<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>自定义指令</title></head><scripttype="text/javascript"src="js/vue.js"></script><body><divid="div1"><h3v-message>{{msg}}</h3><hr><button@click="change">更改</button><hr><spanv-content:header.footer="cont">{{content}}</h3><hr><inputtype="text"v-onfocus></div></body><script>Vue.directive('message',{bind(){alert('指令第一次绑定到元素上时调用，只能调用一次，可执行初始化操作');},inserted(){alert('被绑定元素插入到DOM中时调用');},update(){alert('被绑定元素所在模板更新时调用');},componentUpdated(){alert('被绑定元素所在模板完成一次更新周期时调用');},unbind(){alert('指令与元素解绑时调用，只调用一次');}})Vue.directive('content',{bind(el,binding){console.log(el);//打印DOMel.style.color='red';console.log(binding);//打印对象}})letvm=newVue({el:"#div1",data:{msg:"科比：你见过凌晨四点的洛杉矶吗？",content:"这是内容！！！",cont:'内容'},methods:{change(){this.msg='程序员：凌晨四点还没下班...';}},directive:{//局部自定义指令onfocus:{inserted(el){el.focus();}}}});</script></html>