一.常用指令
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 }
二.实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指令</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
[v-cloak] { display: none }
</style>
<body>
<div id="app">
<div v-cloak>{{message1}}</div>
<div v-text="message1"></div>
<div v-html="message1"></div>
<div ref="msg">{{msg}}</div>
<button @click="tishi">提示</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message1: '<a href="http://www.baidu.com">百度一下</a>',
msg: 'A B C D'
},
methods: {
tishi() {
alert(this.$refs.msg.innerHTML)
}
}
})
</script>
</html>
三.实现效果
