开发者学堂课程【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。
如果网速很慢，那么</ script>标签请求速度也会很慢。在Network菜单下设置 Online为Slow 3G的网速，刷新浏览器，可以看到：{{ msg }}一直在请求vue-2.4.0js /lib 文件，一直有闪烁。inject.js被请求出来后，结果才显示为123。
怎么才能让结果看不见插值表达式呢？
这就需要在上述程序加一个[V- cloak]属性，创建一个钥匙
<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>哈哈 ,我是一个大大的H1 ，我大,我骄傲</h1>'
将msg2渲染到div,用产品表达式：
<div>({msg2)}</div>
或 <div v-text= "msg2"></ div>
这时，这个值仅为普通文本。要怎样渲染为html文本呢？
这就要用到"v-html"了。
<div v-html= "msg2 "></ div>
程序代码为：
…… <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，我大,我骄傲</h1>
<h1>哈哈,我是一个大大的H1，我大,我骄傲</h1>
本章节学习了三个指令"v-cloak"、"v-text"、"v-html"和一个插值表达式"msg"。"v-cloak"解决插值表达式闪烁问题的；"v-text"会把元素中的内容覆盖；"v-html"也会覆盖元素中的内容，但是它会把内容当做html的插值放到msg这个位置。
