vue常见特性（自定义指令、计算属性、过滤器、侦听器、生命周期）
自定义指令
内置指令不能满足需求，所以需要自定义指令。
语法：
Vue.directive('指令名称',{
bind: function(){},
inserted: function(){},
updated: function(){}
})实例：
Vue.directive('focus',{
inserted: function(el){
el.focus();
}
})Vue.directive('color',{
inserted: function(el,binding){
el.style.bacgroundColor = binding.value.color;
}
})
//使用方法
<input type="text" v-color="{color: 'red'}"/>一个指令定义对象可以提供如下几个钩子函数(均为可选) :
bind ：
每当指令绑定到元素上的时候,会立即执行这个bind函数，只执行一次
和样式相关的操作，一般都可以在bind执行
inserted ：
元素插入到DOM中的时候，会执行inserted函数，触发一次
和js行为有关的操作,最好在inserted 中去执行
update ：
当VNode更新的时候，会执行updated, 可能会触发多次
componentupdated ：
指令所在组件的VNode及其子VNode全部更新后调用。
unbind ：
只调用一次,指令与元素解绑时调用。
钩子函数的参数：
el 、binding、 vnode 、oldVnode
局部指令：
directives: {
focus: {
inserted: function(el){
el.focus();
}
}
}计算属性
表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁。
语法：
//计算属性的用法
computed: {
reverseStr: function () {
return this.msg.split('').reverse().join('')
}
//使用方法
<div> {{reverseStr}} </div>计算属性与方法的区别：
计算属性是基于它们的依赖进行缓存的
方法不存在缓存
过滤器
过滤器可用于格式化数据，将字符串的格式设置为首字母大写，或将日期设置为特定的格式。
语法：
Vue.filter('过滤器名称', function(val,arg){})实例：
//将字符串的格式设置为首字母大写
Vue.filter('upper', function(val){
return val.charAt(0).toUpperCase() + val.splice(1);
})
//
<p> {{msg | upper}} </p>//格式化日期
Vue.filter('glq', function(time,patter){
var dt=new Date(time);
var y = dt.getFullYear().toString().padStart(2,'0');
var m = (dt.getMonth()+1).toString().padStart(2,'0');
var d = dt.getDate().toString().padStart(2,'0');
var hh = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var ss = dt.getSeconds().toString().padStart(2,'0');
if(patter=='yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
})
//使用
<p> {{time | glq("yyyy-mm-dd")}} </p>局部过滤器：
filters: {
upper(val){
return val.charAt(0).toUpperCase() + val.splice(1);
}
}侦听器
语法：
//侦听姓名的变化
watch: {
name(val) {}
}生命周期
创建阶段
beforeCreate() { }
这是我们遇到的第一个生命周期函数 ，表示实例完全被创建出来之前，会执行它…
created() { }
这是遇到的第二个生命周期函数
beforeMount() { }
这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中； 在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的些模板字符串
mounted() { }
这是遇到的第4个生命周期函数，表示内存中的模板,已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。只要执行完了mounted ,就表示整个Vue实例已经初始化完毕了， 进入到了运行阶段。
运行阶段
组件运行阶段的生命周期函数只有两个beforeUpdate和updated这俩事件，会根据data数据的改变，有选择性的触发0次到多次。
beforeUpdate(){}
当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚末和最新的数据保持同步。这一步执行的是:先根据data中最新的数据,在内存中,重新泣染出一份最新的内存DOM树。当最新的内存DOM树被更新之后，会把最新的内存DOM时,重新滋染到真实的页面中去.这时候，就完成了数据从data(Model层)到view(视图层)的更新。
updated(){}
updated事件执行的时候, 页面和data数据已经保持同步了,都是最新的
销毁阶段
当执行beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段，进入到了销毁阶段;
当执行beforeDestroy 的时候,实例身上所有的data和所有的methods , 以及过滤器.描…都处于可用状态,此时,还没有真正执行悄毁的过程。
当执行到destroyed函数的时候,组件已经披完金销毁了,此时,组件中所有的数据、方法。指令、过滤器…都已经不可用了