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对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
<div id="example">
<p ref="content">abcdefg</p>
<p v-text="msg"></p> <!--p.textContent=msg-->
<p v-html="msg"></p> <!--p.innerHtml=msg-->
<button @click="hint">提示</button>
<p v-cloak>{{msg}}</p> <!--解析msg之前有[v-cloak]，解析之后无[v-cloak]指令-->
</div>
<scrip type="text/javascript" src="../js/vue.js"></script>
<scrip type="text/javascript">
alert("------") //解析msg数据之前弹窗
new Vue({
el: "#example",
data: {
msg: "message",
},
methods: {
hint () {
alert(this.$refs.content.textContent)
}
}
})
</script>
2.自定义指令
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, 但转换为全大写 v-upper-text
2. 功能类型于v-text, 但转换为全小写 v-lower-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>
<scrip type="text/javascript" src="../js/vue.js"></script>
<scrip type="text/javascript">
// 注册一个全局指令
// el: 指令所在的标签对象
// binding: 包含指令相关数据的容器对象
Vue.directive("upper-text",function (el,binding) {
console.log(el,binding)
el.textContent = binding.value.toUpperCase()
})
new Vue({
el: "#test1",
data: {
msg1: "NBA I Love This Game!"
},
directives: { //注册局部指令：只在当前vm管理范围内有效
"lower-text"(el,binding){ //es6写法 原本写法："lower-text": function(el,binding){}
el.textContent = binding.value.toLowerCase()
}
}
})
new Vue({
el: "#test2",
data: {
msg2: "Just Do It!"
}
})
</script>
