Introducción
常用内置指令
1) v-text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果为 true, 当前标签才会输出到页面
4) v-else: 如果为 false, 当前标签才会输出到页面
5) v-show : 通过控制 display 样式来控制显示/隐藏
6) v-for : 遍历数组/对象
7) v-on : 绑定事件监听, 一般简写为@
8) v-bind : 强制绑定解析表达式, 可以省略 v-bind
9) v-model : 双向数据绑定
10) ref : 指定唯一标识, (通过唯一标识$refs可以获得任意被标识的元素节点) vue 对象通过$refs 属性访问这个元素对象
11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
代码实现的需求:
1.获得某标签中的textContent的值。 -----$refs
2.解决解析之前的闪现问题。
<!-- ref -->
<div id="demo">
<p ref="test">atguigu</p>
<button @click="hint">提示</button>
</div>
<!-- v-cloak -->
<div id="demo1">
<!-- 在解析之前，游览器会显示“{
{test2}}”的样子,解析之后就会被设定的data来替代。--要让"{
{test2}}"解析之前那不要显示，可以使用v-cloak来解决闪现的问题-->
<p v-cloak>{
{test2}}</p>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
alert("------")
<!-- ref -->
new Vue({
el:"#demo",
methods:{
hint(){
alert(this.$refs.test.textContent);//通过唯一标识$refs可以获得任意被标识的元素节点
}
}
})
<!-- v-cloak -->
new Vue({
el:"#demo1",
data:{
test2:"hello"
},
methods:{
}
})
</script>