除了核心功能默认内置的指令，Vue也容许注册自定义指令express
页面加载后，让文本框自动获取焦点，原生js作法是获取文本框元素后调用focus()方法，但Vue不建议手动操做DOM元素，因此此时要自定义指令app
这里须要注意的是v-on指令绑定focus事件的方式是实现不了上面需求的，区别就像onfocus和focus()，前者是事件绑定，当元素得到焦点时去执行事件处理函数，然后者是方法，调用后会让元素得到焦点，onclick和click()同理dom
自定义全局指令函数
Vue.directive( ' 自定义指令名 ' , { } )spa
参数一是指令的名字，注意定义的时候指令前不须要加 v- 前缀，但调用的时候必须加上这个前缀code
参数二是一个对象，在这对象身上有一些指令相关的函数，这些函数能够在特定阶段执行相关的操做，叫钩子函数 对象
<body> <div id="app"> <input type="text" id="text" v-focus><!--自定义全局指令后可在标签内直接使用这个指令--> </div> <script> //注册一个全局自定义指令 Vue.directive('focus', { //每当指令绑定到元素上时，会当即执行这个bind函数，只执行一次 bind: function () { }, //inserted表示元素插入到DOM中时，会执行inserted函数，只触发一次，el表示被绑定的那个原生js对象 inserted: function (el) { el.focus() }, //当VNode更新时会执行updated，可能触发屡次 updated:function(){ } }) var vm = new Vue({ el: '#app', data: { } }) </script> </body>
钩子函数我以为跟原生事件注册方式类似 dom.onclick = function(){ } ，就是有些状态会被Vue捕捉并贴上名字（如bind这个名字表明指令绑定到了元素上），名字是为了让咱们能够将自定义处理函数“钩”在上面，这样，咱们就能够决定哪一种状态作哪一种事blog
在这个案例中，el.focus()不可放在bind函数里，由于指令虽然绑定到了元素上，但元素尚未插入到DOM中也就是元素还在内存中没有被渲染到页面上，这时在内存调用focus方法没有做用，而inserted则表示元素已经加载到网页上了，此时使用focus才是有效的事件
自定义全局指令，指定文本框文字颜色ip
Vue.directive('color', { bind: function (el) { //钩子函数的第一个参数都是被绑定的DOM元素 el.style.color = 'red' } })
由于是样式，因此不须要元素插入到DOM中，就好像link引入CSS文件时并不关心元素是否加载
和js行为有关的操做，最好在inserted中执行，和样式相关的操做均可在bind中执行
钩子函数第一个参数是被绑定的原生DOM元素，第二个元素是一个binding对象，该对象有三个重要的属性name、value和expression
<div id="app"> <!--#ff4200若是不用单引号引上的话会被看成data里的变量，数字则无影响--> <input type="text" id="text" v-color="'#ff4200'"> </div>
Vue.directive('color', { bind: function (el,binding) { //形参名字可随意，但通常是这么写 console.log(binding.name) //color console.log(binding.value) //#ff4200 } })
自定义私有指令
自定义私有指令跟自定义过滤器的套路是同样的，在构造函数里定义
var vm = new Vue({ el: '#app', directives: { 'color': { //指令名要加上引号 bind: function (el, binding) { el.style.color = binding.value } } } })
函数简写
也就是若是只用到bind或update，就可省略指令定义对象的书写