Vue2 自定义指令函数&自定义指令对象&生命周期

自定义指令函数式

1. 把要构造的指令写在directives：{ }, 跟methods类似

2. 在标签里写v-big，在directives中构造是就只用big(){}

3. 只要data中数据发生改变，模板重新解析时，就会重新调用该函数

4. 相当于对象式的bind和update

 <h2 v-big="n"></h2>
 directives: {
        big(element, binding) {
          element.innerHTML = binding.value * 10;
        }

element是添加指令所对应的DOM元素，binding是将指令与元素绑定，binding.value就是n

自定义指令对象

对象中包含三个回调函数

1.bind(element,binding){ } 当指令与元素绑定成功时调用

2.inserted(element,binding){ } 当指令所对应的元素插入到页面后调用

3.update(element,binding){ } 当data中数据发生变化时调用

directives: { 
        fbind: {
          //当元素与指令绑定成功时，相当于初始化时就别调用
          bind(element, binding) {
            element.value = binding.value;
          },
          //当vue将元素插入到页面后
          inserted(element, binding) {
            element.focus();
          },
          //当data数据变化时，重新调用
          update(element, binding) {
            element.value = binding.value;
          }
        }
      }

生命周期

beforeCreate：无法通过vm去访问 data/props/methods，初始化声明周期、事件，没有开始数据代理，数据监测

created： data/props/methods都可用,可以通过vm去访问，但组件的结构尚未生成，不能操作DOM，只是在内存中生成了 HTML结构

beforeMount： 页面生成vue未解析的DOM元素，只是将要将内存中的HTML结构渲染到页面

mounted：生成经过vue解析后DOM元素，页面渲染到浏览器，可以操作DOM元素了

数据变化之后执行

{

beforeUpdate：data中数据更新完成，页面还没修改，还是旧数据，相当于data中数据是新数据，页面还是旧数据，还没有将data数据渲染到页面

当数据变化之后，操作DOM元素，就用updated

updated：页面和数据都是data更新后的，最新的数据

}

this.destory ( ) 销毁组件 v c , v m 。执行 t h i s . destory()销毁组件vc,vm。执行this. destory()销毁组件vc,vm。执行this.destory()之后，vc，vm上的自定义事件全部不奏

//vue解析完模板挂载到页面上
mounted(){
    
},
//vm销毁时
beforeDestory(){
    clearInterval(timer)
}