vue自定义指令 directive

vue.direactive 是什么？

在vue框架中，我们开发者，时常使用vue自带的指令，比如v-on，v-for，v-modal等等。
同样的，vue提供给开发者一些钩子，用以帮助开发者自定义vue指令，用法和v-on等是一样的。

vue.direactive如何使用？

//在html方面，直接在标签上绑定，但是要添加上v-
<div id="app">
    <!--#ff4200如果不用单引号引上的话会被当作data里的变量，数字则无影响-->
    <input type="text" id="text" v-color="'#ff4200'">
</div>
//在js方面，通过Vue.direactive实现全局的directive
//这个vue钩子一共有两个参数，
//第一参数是字符串，字符串就是自定义指令的名称，用到标签上的时候，需要添加v-
//第二参数是对象，对象里面有三个比较特殊的方法，bind是其中一个
Vue.directive('color', {
    bind: function (el,binding) {  //形参名字可随意，但一般是这么写
        console.log(binding.name)   //color
        console.log(binding.value)  //#ff4200
    }
})

vue.direactive第二个参数中三个重要的方法

//注册一个全局自定义指令
    Vue.directive('focus', {
//每当指令绑定到元素上时，会立即执行这个bind函数，只执行一次
        bind: function () {

        },
//inserted表示元素插入到DOM中时，会执行inserted函数，
//insert方法只触发一次，el表示被绑定的那个标签元素
        inserted: function (el) {
            el.focus()
        },
 //当VNode更新时会执行updated，可能触发多次
        updated:function(){
        }
    })

和js行为有关的操作，最好在inserted中执行，和css相关的操作都可在bind中执行

bind inserted updated 三个方法的参数

这三个方法都有两个参数，第一个参数是绑定自定义指令的元素标签本身，第二个参数是binding对象
其中binding对象有三个重要的属性name，value，expresstion
name： 自定义指令的名称是一个字符串，不包括v-
value： 就是自定义指令被赋予的值
expression： 就是自定义指令等于符号后面“”内的所有内容，可以是一个表达式，值的本身是一个字符串

<div id="app">
    <!--#ff4200如果不用单引号引上的话会被当作data里的变量，数字则无影响-->
    <input type="text" id="text" v-color="1+1">
</div>
Vue.directive('color', {
    bind: function (el,binding) {  //形参名字可随意，但一般是这么写
        console.log(binding.name)   //color
        console.log(binding.value)  //2
        console.log(binding.expression) // 1+1 
    }
})