1.常用内置指令
- v:text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为 true, 当前标签才会输出
- v-else: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 强制绑定解析表达式, 可以省略 v-bind
- v-model : 双向数据绑定
- ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
- v-cloak : 防止闪现, 与 css 配合: [v-cloak]
2.自定义指令
2.1 注册全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2.2 注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
2.3 使用指令
v-my-directive='xxx'
3.编码
3.1 内置指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-内置指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app-13-1">
<p v-text="url"></p>
<p v-html="url"></p>
<img :id="myId" :src="imageSrc">
<p>
<span ref="message">I Love Vue</span>
<button @click="showMsg">显示左侧文本</button>
</p>
<p v-cloak>{{url}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
alert("模拟浏览器加载缓慢，测试 v-cloak 指令")
new Vue({
el: '#app-13-1',
data: {
url: '<a href="http://www.baidu.com">百度一下</a>',
myId: '12345',
imageSrc: 'https://cn.vuejs.org/images/logo.png'
},
methods: {
showMsg: function () {
alert(this.$refs.message.textContent)
}
}
})
</script>
</body>
</html>
3.2 自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-自定义指令</title>
</head>
<body>
<div id="demo1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></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 type="text/javascript">
Vue.directive('upper-text', function (el, binding) {
el.innerHTML = binding.value.toUpperCase()
})
new Vue({
el: '#demo1',
data: {
msg1: 'I Love Vue!'
},
//注册局部指令
directives: {
'lower-text': {
bind (el, binding) {
el.innerHTML = binding.value.toLowerCase()
}
}
}
})
new Vue({
el: '#demo2',
data: {
msg2: 'I Love Java!'
}
})
</script>
</body>
</html>