VUE：内置指令与自定义指令
常用的内置指令
1）v:text 更新元素的 textContent
2）v-html 更新元素的 innerHTML
3）v-if 如果为true，当前标签才会输出到页面
4）v-else 如果为false，当前标签才会输出到页面
5）v-show 通过控制display样式来控制显示/隐藏
6）v-for 遍历数组/对象
7）v-on 绑定事件监听，一般简写为@
8）v-bind 强制绑定解析表达式，可以省略v-bind
9）v-model 双向数据绑定
10）ref 指定唯一标识，vue对象通过$els属性访问这个元素对象
11）v-cloak 防止闪现，与css配合：[v-cloak]{display:none}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="example"> <p ref="content">taosir is learning...</p> <button @click="hint">提示</button> <!--<p v-text="msg"></p>--> <p v-cloak>{{msg}}</p> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> alert('----') new Vue({ el:'#example', data:{ msg:'涛先森正在努力学习' }, methods:{ hint(){ alert(this.$refs.content.innerHTML); } } }) </script> </body> </html>
自定义指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.注册全局指令 Vue.directive('my-directive',function(el,binding){ el.innerHTML = binding.value.toupperCase() }) 2.注册局部指令 directives： 'my-directive':{ bind(el,binding){ el.innerHTML = binding.value.toupperCase() } } 3.使用指令 v-my-directive='xxx' --> <!-- 需求：自定义2个指令 1.功能类似于 v-text，但是转换为全大写 2.功能类似于 v-text，但是转换为全小写 --> <div id="test1"> <p v-upper-text="msg1"></p> <p v-lower-text="msg1"></p> </div> <div id="test2"> <p v-upper-text="msg2"></p> <p v-lower-text="msg2"></p> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> //定义全局指令 //el：指令属性所在的标签对象 //binding：包含指令相关信息数据的对象 Vue.directive('upper-text',function(el,binding){ console.log(el,binding); el.textContent = binding.value.toUpperCase() }) new Vue({ el:'#test1', data:{ msg1:'taosir love java!' }, //注册局部指令 directives:{ 'lower-text'(el,binding){ el.textContent = binding.value.toLowerCase() } } }) new Vue({ el:'#test2', data:{ msg2:'taosir love Vue!' } }) </script> </body> </html>