vue自定义指令

时间：2017-11-28 23:14:23 阅读：174 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义指令</title> </head> <script type="text/javascript" src="js/vue.js" ></script> <body> <div id="div1"> <h2 v-message>{{msg}}</h2> <hr> <button @click="change">更改</button> <hr> <span v-content:header.footer="cont">{{content}}</h2> <hr> <input type="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); //打印DOM el.style.color = 'red'; console.log(binding); //打印对象 } }) let vm = new Vue({ el: "#div1", data:{ msg:"科比：你见过凌晨四点的洛杉矶吗？", content:"这是内容！！！", cont:'内容' }, methods:{ change(){ this.msg = '程序员：凌晨四点还没下班...'; } }, directive:{ //局部自定义指令 onfocus:{ inserted(el){ el.focus(); } } } }); </script> </html>

vue自定义指令

标签：自定义指令 vue bind

原文地址：http://blog.51cto.com/3miao/2045479

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行