指令-使用钩子函数的第二个binding参数拿到传递的值
目录
一、自定义指令
二、自定义字体颜色
三、函数参数
一、自定义指令
如果想要搜索框颜色发生改变，这是需要找到以下自定义指令
<input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color>
//自定义一个设置字体颜色的指令:
Vue.directive('color',{
bind:function (el) {
el.style.color =’red’
}
})
设置样式的时候，不需要考虑有没有插入到DOM中，只要把样式通过指令绑定给元素，元素一旦被浏览器解析，无论这个元素是否被插入到页面中去，这个元素肯定有了一个内联的样式，元素一定会显示到页面中，浏览器的渲染引擎必然会解析样式，应用给元素。
演示效果：
bind:function(el){
el.focus()
}
inserted: function(el){
el.focus()
}
在 inserted 中,元素从内存渲染到页面上时立即调用 focus 这时在页面中才能获得焦点。在 bind 中元素一加载到内存中，一绑定focus 指令，就会立即调用bind，这是在内存中调用 bind。
和 js 有关的操作最好在 inserted 执行，防止 js 行为不生效。和样式相关的操作一般都可以在 bind 中执行
二、自定义字体颜色
上面的是把字体设置成了红色，如果想要自定义颜色，则需要：
<input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color=”’blue’”>
//blue加单引号表示字符串，不加单引号表示为变量
bind:function (el，binding) {//自定义指令时，通过 binding 拿到值。
el.style.color =’red’
}
三、函数参数
钩子函数被赋予了以下参数：
el：指令所绑定的元素，可以用来直接操作DOM。
binding：一个对象，包含以下属性：
1.name：指令名，不包括 v-前缀。
Vue.directive(‘color’,{
Bind：fuction（e1，binding）｛
e1.style.color='red'
Console.log（binding.name）
此时显示的color就是我们制定的名称
2.value：指令的绑定值，例如：v-my-directive-"1+1”，value 的值是2。如果获取原始的值，可使用 expression 方法。
3.expression：绑定值的字符串形式，例如：v-my-directive="1+1”,expression的值是"1+1”
4.arg：传给指令的参数，例如v-my-directive:foo，arg的值是：’foo’
举例：
要获取
Console.log(binding.value)
Console.log(binding.expression)
可以看到，上面是bule，下面是字符串，所以我们需要用value
<input type=”text”class=”form-control”v-model=”keywords”id=”search”v-focus v-color=”’blue’”>中的blue值,代码演示：
Bind：function（el binding）{
el.style.color= binding. Value
}
})
其中把blue换成yellow，或者green尝试，发现可以变换成黄色和绿色，即以上代码正确无误。
