开发者学堂课程【Vue.js 入门与实战：指令-使用钩子函数的第二个binding参数拿到传递的值】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8152
指令-使用钩子函数的第二个 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 尝试，发现可以变换成黄色和绿色，即以上代码正确无误。
