开发者学堂课程【Vue.js 入门与实战：讲解 v-cloak、v-text、v-html 的基本使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8129
讲解 v-cloak、v-text、v-html 的基本使用
目录：
一、Vue 之-基本的代码结构和插值表达式、v-cloak
二、Vue 指令之 v-text
三、Vue 指令之 v-html
一、Vue 之-基本的代码结构和插值表达式、v-cloak
使用 v-cloak 能够解决插值表达式闪烁的问题。
实例：
新建 HTML 文件：02.v-cloak 的学习.html 编辑：
1 <!DOCTYPE html>
2 <htm1 lang="en">
3
4 <head>
5 <meta charset="UTF- 8">
6 <meta name= "viewport" content="width=device-width, initial-scale=1.0">
7 <meta http- equiv= "X -UA-Compatible" content=" ie=edge ">
8 <title>Document</ title>
9 </head>
10
11 <body>
12 <div id=" app">
13 <p>{{ msg }}</p>
14 </div>
15
16
17 <script src="./1ib/vue-2.4.0. js"></script>
18
19 <script>
20 var Vm = newVue({
21 el: ' #app' ,
22 data: {
23 msg: '123 '
24 }
25 })
26 </script>
27 </body>
28
29 </htm1>
以服务器进行文件托管的方式打开 localhost/02.v-cloak 的学习.html 文件，看结果显示：123。
如果网速很慢，那么标签请求速度也会很慢。在 Network 菜单下设置 Online 为Slow 3G 的网速，刷新浏览器，可以看到：{{ msg }}一直在请求 vue-2.4.0js /lib 文件，一直有闪烁。inject.js 被请求出来后，结果才显示为123。
怎么才能让结果看不见插值表达式呢？
这就需要在上述程序加一个[V- cloak]属性，创建一个钥匙
。修改上程序段为：
…
9 <style>
10 [v- cloak ]{
11 display: none ;
12 }
13 </style>
14 </head>
15
16 <body>
17 <div id=" app">
18 <p v-cloak>{{ msg }}</p>
19 </div>
20
21
22 <script src=". /1ib/vue-2.4.0. js"></ script>
……
刷新，这时候就可以看见 vue-2.4.0js /lib 请求出来，但结果还是空白没出来，这时候是[v-cloak]将 {display: none;}这个类隐藏了。当 inject.js 请求回来后，就直接显示结果123。这时候没有闪烁。使用 v-cloak 能够解决插值表达式闪烁的问题。
二、Vue 指令之"v-text"
"v-text"和"v-cloak"一样也能渲染内容，两者区别是：
1.默认"v-text"是没有闪烁问题的。
实例：
……
<p v-cloak>{{ msg }}</p>
<h4 v-text="msg"></h4>
……
2."v-text"会覆盖元素中原本的内容,但是 插值表达式 只会替换自己的这个占位符,不会把整个元素的内容清空。
实例：
……
<P v-cloak>++++++++ {{ msg }} ---------</p>
<h4 v-text= "msg">===============</h4>
……
刷新浏览器，显示结果：
++++++++ 123 ---------
123
插值表达式前后可以放置任意内容。
三、Vue 指令之"v-html"
"v-html"和"v-text"一样，也会覆盖元素中原本的内容。但"v-html"会将内容作为html类型解析。
实例：
设置一个内容：
msg2: '哈哈 ,我是一个大大的H1 ，我大,我骄傲'
将 msg2 渲染到 div,用产品表达式：
({msg2)}
这时，这个值仅为普通文本。要怎样渲染为 html 文本呢？
这就要用到"v-html"了。
程序代码为：
……
<div> { {msg2} }</div>
<div v- text= "msg2">< /div>
<div v-html="msg2 ">1212112< /div>
</div>
<script src="。/1ib/vue-2.4.0. js"></ script>
<script>
var vm = new Vue({
el: '#app' ,
data: {
msg: '123' ,
msg2: '<h1>哈哈 ,我是一个大大的H1， 我大， 我骄傲</h1>'
}
})
</ script>
< /body>
……
浏览器刷新结果为：
++++++++ 123 ---------
123
哈哈,我是一个大大的H1，我大,我骄傲
哈哈,我是一个大大的H1，我大,我骄傲
本章节学习了三个指令"v-cloak"、"v-text"、"v-html"和一个插值表达式"msg"。"v-cloak"解决插值表达式闪烁问题的；"v-text"会把元素中的内容覆盖；"v-html"也会覆盖元素中的内容，但是它会把内容当做 html 的插值放到 msg 这个位置。
