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 }
ref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref指令</title>
</head>
<body>
<div id="app">
<p ref="msg">abcd</p>
<button @click="hint">提示</button>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {},
//ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
methods: {
hint(){
// alert(this.$refs.msg.textContent);
alert(this.$refs.msg.innerHTML);//获取标识为msg的标签的文本
}
}
})
</script>
</body>
</html>结果：点击提示按钮
v-cloak 防止闪现表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
alert('---');
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>结果：当执行到alert时，vue实例还未解析，所以也无法解析大括号表达式，就会在页面上显示表达式。为了解决这种问题， 引入了v-cloak指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak指令</title>
<style>
/*属性选择器*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
alert('---');
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>结果: 指令属性v-cloak在vue解析之前存在，display样式为none，则p标签的内容不显示。
在点击alert的确定后，代码往下继续执行，vue实例被解析，则v-cloak属性被移除， v-clock无法与p标签匹配。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。