内置指令与自定义指令
常用内置指令
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 }
自定义指令
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'
代码展示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>[v-cloak]{display: none;}</style></head><body><div id="example"><p v-text="url"></p><p v-html="url"></p><!-- :id -> 元素的唯一标识符。 --><!-- :src -> 指定图像的URL Specifies the URL of an image --><img :id='myid' :src="imageSrc" /><p><span ref="message"></span><button @click="showMsg">显示左侧文本</button></p><!-- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none } --><p v-cloak>{{ url }}</p></div><script type="text/javascript" src="js/vue.js"></script><script>alert('模拟加载慢')new Vue({el: '#example',data: {url: '<a href = "/">京东</a>',myid: 'abc123',imageSrc: '/images/logo.png'},methods:{showMsg() {//$refs -> 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。alert(this.$refs.message.textContent)}}})</script></body></html>
结果展示
代码展示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="demo1"><p v-upper-text="msg"></p><p v-lower-text="msg"></p></div><div id="demo2"><p v-upper-text="msg2"></p><p v-lower-text="msg2"></p> <!-- 局部指令，此处不能用 --></div><script type="text/javascript" src="js/vue.js"></script><script>//注册全局指令Vue.directive('upper-text',function(el,binding){el.innerHTML = binding.value.toUpperCase()})new Vue({el: '#demo1',data: {msg: 'GeorgeDage AoliGei'},//包含 Vue 实例可用指令的哈希表。directives: {//注册局部指令'lower-text': {bind (el,binding) {el.innerHTML = binding.value.toLowerCase()}}}})new Vue({el: '#demo2',data: {msg2: 'I love kangkang'}})</script></body></html>
