1. 常用内置指令
v:text: 更新元素的 textContentv-html: 更新元素的 innerHTMLv-if: 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show: 通过控制display样式来控制显示/隐藏v-for: 遍历数组/对象v-on: 绑定事件监听, 一般简写为@v-bind: 强制绑定解析表达式, 可以省略v-bindv-model: 双向数据绑定
ref: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
[v-clock] {
display: none;
}
<body>
<div id="demo">
<p ref="content">baidu.com</p>
<button @click="hint">提示</button>
<p v-cloak>{
{msg}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {
msg: "YK菌"
},
methods: {
hint(){
alert(this.$refs.content.textContent);
}
}
})
</script>
</body>
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个指令
- 功能类型于v-text, 但转换为全大写 v-upper-text
- 功能类型于v-text, 但转换为全小写 v-lower-text
<body>
<!-- 需求：自定义两个指令
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>
<script src="../js/vue.js"></script>
<script>
// 定义全局指令
// el: 指令属性所在的标签对象
// binding: 包含指令相关信息数据的对象
Vue.directive("upper-text", function(el, binding){
el.textContent = binding.value.toUpperCase();
})
new Vue({
el: "#test1",
data: {
msg1: 'Hello, I am YK!'
},
directives: {
// 注册局部指令 当前vm实例管理范围内有效
'lower-text': function (el ,binding){
el.textContent = binding.value.toLowerCase();
}
}
})
new Vue({
el: "#test2",
data: {
msg2: 'HiHi, I am KK!'
}
})
</script>
</body>
