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函数的时候,组件已经披完金销毁了,此时,组件中所有的数据、方法。指令、过滤器…都已经不可用了