Vue自定义指令

一简介

自定义指令：以V-开头的，扩展了HTML的语法，通过自定义指令可以操作DOM:

栗子一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue2.2.js"></script>
    </head>
    <body>
　　　　// 注册一个全局的自定义指令
        <div id="app">
            <div v-lang="color">{{num}}</div>  
            <p><button @click="add">add</button></p>
        </div>
    </body>
    <script type="text/javascript">
    Vue.directive('lang',function(el,binding){  //不用加V-
        console.log(el)//el指向的是当前实例绑定的对象<div v-lang="color">{{num}}</div>
        console.log(binding)//输出的是一个对象obj
        el.style='color:'+binding.value//binding.value就是color颜色red。
    })
        var vm = new Vue({
            el:"#app",
            data:{
                num:10,
                color:'red'
            },
            methods:{
                add:function(){
                    this.num++;
                }
            }
        })
    </script>
</html>

栗子二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
　　//局部注册例子
    <div id="app">
        <p v-color="red">我是自定义指令</p>
    </div>
<script src='vue.js'></script>
<script>

    new Vue({
        el:'#app',
        data:{
            red:'red'
        },
        directives: {
          color: {
            // 指令的定义
            inserted: function (el,binding) {
              el.style.color = binding.value
            }
          }
        }
    })

</script>
</body>
</html>

钩子函数的参数 (即 el、binding、vnode 和 oldVnode):

el: 指令所绑定的元素，可以用来直接操作DOM。

binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。

oldVnode:上一个虚拟节点。

二钩子函数

举栗：

Vue.directive('lang',{
  bind:function () {
    console.log("1111"); //被绑定
  },
  inserted:function (el,binding) {
    el.style="color:"+binding.value;//绑定到节点
  },
  update:function () {
    console.log("3333");//组件更新
  },
  componentUpdated:function () {
    console.log("44444");//组件更新完成
  },
  unbind: function() {
    console.log('5555');//解绑
  }
});

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

Vue自定义指令

一 简介

二 钩子函数

一简介

二钩子函数