使用原因： 想要进行一些dom操作 使用方式： 通过 v-name来进行使用 全局指令：
Vue.directive('name',{ 钩子函数 bind(el,binding,vnode,oldVnode){} //指令绑定之后执行，只绑定一次 inserted(el){el.focus()} //插入之后，实现页面刷新自动聚焦 update //当所在组件的内容发生改变时调用 componentUpdated unbind //只调用一次 参数： el:当前指令绑定的dom元素 binding:对象，指令的详细参数 vnode:虚拟节点(返回值是对象) oldVnode:原始的虚拟节点，仅在update或componentUpdated中使用 })实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <script> window.onload=function(){ //全局指令 Vue.directive('myfocus', { bind(el,binding,vnode,oldVnode){ console.log(vnode) }, inserted(el){ el.focus(); //实现input输入框聚焦 } }) Vue.directive('mychange',{ bind(el,binding,vnode,oldVnode){ console.log(binding) el.innerHTML=binding.value //将value值替换掉hello }, }) var app=new Vue({ el:'#app', data:{ value:'lisi' }, methods:{ }, components:{ } }) } </script> </head> <body> <div id="app"> <h1 v-mychange='value'>hello</h1> //注：value是vue实例中的data中的变量,将value给binding <input v-myfocus type="text" v-model='value'> </div> </body> </html>局部指令: 实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <script> window.onload=function(){ var app=new Vue({ el:'#app', data:{ str:'当然是小仙女啦' }, methods:{}, components:{}, directives:{ 'myfocus':{ inserted(el,binding,vnode,oldVnode){ el.focus() }, update(el,binding,vnode,oldVnode) { console.log(binding) }, } } }) } </script> </head> <body> <div id="app"> {{str}} <input type="text" v-myfocus='str' v-model='str'> </div> </body> </html>