vue 學習筆記--全局api- Vue.directive

Vue.directivejavascript

1.做用:vue

  使用vue 函數構造自定義方法。java

2.基本概念:node

  在主函數中構造自定義方法 並在模板中使用函數

  構造方法:component

Vue.directive('demo',function(el,binding,vnode){
  el.style='color:'+binding.value;
  // el.style.color
});

  調用方法:對象

    <div v-demo="color" id="demo">
        {{num}}
    </div>

  其中構造方法中的三個參數:blog

  • el: 指令所綁定的元素,能夠用來直接操做DOM。
  • binding: 一個對象,包含指令的不少信息。
  • vnode: Vue編譯生成的虛擬節點。

  自定義方法的五個生命週期:生命週期

  1. bind:只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。
  2. inserted:被綁定元素插入父節點時調用(父節點存在便可調用,沒必要存在於document中)。
  3. update:被綁定於元素所在的模板更新時調用,而不管綁定值是否變化。經過比較更新先後的綁定值,能夠忽略沒必要要的模板更新。
  4. componentUpdated:被綁定元素所在模板完成一次更新週期時調用。
  5. unbind:只調用一次,指令與元素解綁時調用。

3.使用及應用:ip

   須要自定義功能模板時使用

相關文章
相關標籤/搜索