尚硅谷的vue旅程15-vue中的指令 v-cloak与ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
常用内置指令
	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.解决解析之前的闪现问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 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>