自定義指令實(shí)現(xiàn)

• 參數(shù)1——指令的名稱，注意：在定義的時(shí)候，指令的名稱前面，不需要加 v- 前綴，而在調(diào)用的時(shí)候，必須在指令名稱前 加上 v- 前綴來進(jìn)行調(diào)用
• 參數(shù)2：是一個(gè)對(duì)象，這個(gè)對(duì)象身上，有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段，執(zhí)行相關(guān)的操作
• 參數(shù)2中涉及到的鉤子函數(shù)
  1、bind() 一次執(zhí)行 調(diào)用是在指令綁定到元素上的時(shí)候執(zhí)行，這時(shí)還沒有進(jìn)行dom插入
  2、insert() 一次執(zhí)行 調(diào)用時(shí)在元素插入到dom中的時(shí)候會(huì)執(zhí)行此函數(shù)
  3、update() 多次執(zhí)行 調(diào)用時(shí)在每次vnode更新時(shí)
  4、componentUpdate 指令所在的組件的VNode以及其子VNode 全部更新后調(diào)用
  5、unbind: 指令和元素解綁的時(shí)候調(diào)用,只調(diào)用一次
• binding對(duì)象
  1、name : v-gqs ==> gqs 不包括前面的v-
  2、valule : 指令后面的值 v-gqs='abc' value=abc
  3、oldValue 前一個(gè)值,只能在 update & componentUpdate 中使用.
  4、expression : v-gqs='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
  5、arg: 指令傳遞的參數(shù) ,比如 v-gqs:hello arg = hello
  6、modifiers : 比如 v-gqs.a.b modifiers = {a:true,b:true}

注意：在每個(gè)函數(shù)中，第一個(gè)參數(shù)，永遠(yuǎn)是 el ，表示被綁定了指令的那個(gè)元素，這個(gè)el參數(shù)，是一個(gè)原生的JS 對(duì)象

全局定義

Vue.directive('focus',{
             bind:function(el,binding){
                // el.style.color = 'red';
                // 和樣式相關(guān)的操作，一般都可以在 bind 中執(zhí)行，因?yàn)橐粋€(gè)指令被綁定的時(shí)候，該元素已經(jīng)存在，可以修改它的樣式

                el.style.color = binding.value
            }
            inserted:function(el){ 
                el.focus() 
                // 和JS 行為有關(guān)的操作，最好在inserted 中去執(zhí)行，防止 JS 不生效
            },
            updated:function(el){}
        })

局部自定義私有指令

directives:{
     'fontweight':{
         bind:function(el,binding){
            el.style.fontWeight = binding.value
          }
      },


      // ** 這個(gè) function 等同于 把 代碼寫到了 bind 和 update 中去
      'fontsize':function(el,binding){
          el.style.fontSize = parseInt(binding.value) + 'px'
       }
}