文章目录
1.插值操作2.插值操作—Mustache3.插值操作—指令v-once4.插值操作—指令v-html5.插值操作—指令v-text6.插值操作—指令v-pre7.插值操作—指令v-cloak
1.插值操作
插值操作：将vue实例中data里面的某个值，插到页面DOM元素上进行显示。 并改变data值可以动态改变显示。
2.插值操作—Mustache
1.Mustache (胡子/胡须)
:可以通过Mustache语法(也就是双大括号{{}})来进行插值操作；
数据绑定最常见的形式就是使用“Mustache”语法的文本插值
2.Mustache语法，不仅仅可以直接写变量，也可以写简单的表达式
<script src
="js/vue.js"></script
>
<div id
="app">
<h2
>{{message
}}</h2
>
<h2
>{{message
}},宋祖儿
</h2
>
<h2
>{{firstName
+ lastName
}}</h2
>
<h2
>{{firstName
+ " " +lastName
}}</h2
>
<h2
>{{firstName
}} {{lastName
}}</h2
>
<h2
>{{counter
*2}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
firstName
:"kobe",
lastName
:"bryant",
counter
:100
}
})
</script
>
3.插值操作—指令v-once
1.指令带有v- 前缀的字符。 2.指令一般是放在标签的属性位置上。 3.指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用 于 DOM元素。
指令v-once
:该指令表示元素和组件只会被渲染一次，之后不会随着数据的改变而改变；
即插值后，该指令所在的DOM元素中的插值内容只显示最开始的数据，不会变化。
使用情况：
*在某些情况下，我们可能不希望界面随意的跟随改变，这个时候指令v-once:
*该指令后面不需要跟任何表达式，直接放上去就可以了。
<div id
="app">
<h2
>{{message
}}</h2
>
<h2 v
-once
>{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊"
}
})
app
.message
="哈哈哈"
</script
>
4.插值操作—指令v-html
指令v-html
:可以将string内容进行解析，以html的形式展示出来，进行渲染。
使用情况：
*某些情况下，我们从服务器请求到的是一个HTML代码，
如果我们直接通过{{ }}来输出，会将HTML代码以字符串的格式输入了。
*如果我们希望将内容按照HTML格式进行解析，则可以用v-html指令
（1）将HTML代码放在该指令后面；
（2）将HTML代码解析出来并且进行渲染;
<div id
="app">
<h2
>{{message
}}</h2
>
<h2
>{{url
}}</h2
>
<h2 v
-html
="url"></h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
url
:"<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script
>
5.插值操作—指令v-text
指令v-text：
v-text的值为一个string类型;
指令v-text与Mustache：
v-text作用和Mustache比较相似，都是用于将数据显示在界面中；
Mustache后面可以任意拼接其他内容；
指令v-text会将后面拼接的内容给覆盖掉；
<div id
="app">
<h2
>{{message
}},刘富楠
</h2
>
<h2 v
-text
="message">,刘富楠
</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊"
}
})
</script
>
6.插值操作—指令v-pre
指令v-pre
:用于跳过该元素和它子元素的编译过程，显示原本的内容。
即vue实例不去解析该元素中的内容，不按照data的内容显示数据，显示原本内容；
<div id
="app">
<h2
>{{message
}}</h2
>
<h2 v
-pre
>{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊"
}
})
</script
>
7.插值操作—指令v-cloak
指令v-cloak： (cloak: 斗篷)
在vue实例解析前指令v-cloak会起作用；在vue解析后v-cloak不会起作用；
v-cloak作为div的属性，我们可以对它设置相应的样式；
使用情况：
* 在我们vue中是实时响应的，执行顺序为：
页面先显示HTML中的内容 —》执行vue实例后—》会对的html解析—》然后data数据将实时显示。
* 则执行vue实例前，页面会先显示html的内容 (可能会先显示)
等执行vue实例后会再变成data对应的内容；这样体验感就不太好。
* 所以我们可以给div加入指令v-cloak
在vue解析前指令v-cloak会起作用，设置内容不显示，
在vue解析后v-cloak不会起作用，则显示出data中对应的数据。
(则不显示html中原本的内容，直接显示出解析后的数据)
下面例子中：
在解析前，我们可以给属性v-cloak设置一个样式display：none，让{{message}}不显示出来；
在解析后，div中没有属性v-cloak，则属性样式无作用，则显示解析的内容；
<div id
="app" v
-cloak
>
{{message
}}
</div
>
<script
>
setTimeout(function () {
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊"
}
})
} ,1000)
[v
-cloak
]{
display
: none
;
}
</script
>
