vue的生命周期钩子函数与自定义指令钩子函数

vue的生命周期钩子函数与自定义指令钩子函数

<title>Documenttitle>
<script src="Js/vue.js">script>
<div id="app">
    <input v-hello v-model="msg"/>
div>

<script>
  Vue.directive('hello',{
      bind:function(el){
          console.log("bind时父节点为:"+el.parentNode)
          console.log("触发bind指令钩子函数")
      },
      inserted:function(el,binding,vnode){

        console.log("inserted时父节点为:"+el.parentNode)
          console.log("触发inserted指令钩子函数");
      },
      update:function(el){
          console.log("触发update指令钩子函数")
      },
      componentUpdated:function(el){
          console.log("触发componentUpdated指令钩子函数")
      },
      unbind:function(el){
          console.log("触发unbind指令钩子函数")
      }
  })

  new Vue({
        el:"#app",
       data:{
           msg:""
       },
       beforeCreate(){
           console.log("beforeCreate")
       },
       created(){
           console.log("created")
       },
       beforeMount(){
           console.log("beforeMount")
       },
       mounted(){
           console.log("mounted")
       },
       beforeUpdate(){
           console.log("BeforeUpdate")
       },
       updated(){
           console.log("updated")
       },
       beforeDestroy(){
           console.log("beforeDestroy")
       },
       destroyed(){
           console.log("destroyed")
       }
    })

---

1. vue在执行过程中会自动调用生命周期钩子函数
2. 指令钩子函数能够接受所有合法的js表达式
3. 页面初始化后函数如下顺序执行

beforeCreate                //el 和 data 并未初始化 
created                     //完成了 data 数据的初始化，el没有
beforeMount                 //完成了 el 和 data 初始化   

"bind时父节点为:"null       //bind指令钩子函数被触发时，其父节点为null
触发bind指令钩子函数

"inserted时父节点为:",
"app"><input>div>  //inserted钩子函数被触发时，父节点是存在的
触发inserted指令钩子函数

mounted                     //vue实例已经挂载到页面中，可以获取el的DOM元素，进行DOM操作

4. 输入框内容发生改变时函数触发顺序如下:

BeforeUpdate //数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
触发update指令钩子函数
触发componentUpdated指令钩子函数
updated

             5.指令钩子函数参数

bind(el, binding, vnode)
        inserted(el, binding, vnode)
        update(el, binding, vnode, oldVnode)
        componentUpdated(el, binding, vnode, oldVnode)
        unbind(el, binding, vnode)

               6.指令钩子函数参数详解

binding参数是一个对象，包含以下属性
        name:指令名，不包括v-前缀
        value:指令的绑定值，如v-hello="1+1"中，绑定值为2
        oldValue:指令绑定的前一个值，仅在update和componentUpdated中可用
        expression:字符串形式的指令表达式,例如v-hello = "1 + 1"中，表达式为"1 + 1"
        arg：传给指令的参数，可选。例如v-hello:message中，参数为"message"
        modifiers：一个包含修饰符的对象。例如v-hello.foo.bar中，修饰符对象为{foo:true, bar:true}

---