模板语法
文本
前面常用的{{message}}
就是一种最常用的叫做“Mustache”语法 (双大括号) 的文本插值方式,此时Mustache会将当前数据对象上的message的值动态更新插值处内容。
而v-once则可以只做第一次插入数据,然后就不再更新,但是请留意该节点上其他的数据绑定
<div id="app9_1">
{{message}}
</div>
<div id="app9_2">
<span v-once>{{message}}</span>
</div>
<script>
var app1 = new Vue({
el:"#app9_1",
data:{
message:"无v-once命令"
},
created:function(){
this.message="成功修改"
}
})
var app2 = new Vue({
el:"#app9_2",
data:{
message:"有v-once命令"
},
created:function(){
this.message="成功修改"
}
})
</script>
在简单的测试使用后,发现v-once是在网页加载后再去修改数据时,才会不刷新,但是仍然可以在Vue对象实例中加入生命周期钩子函数来改变初始的property的值。
HTML
用双大括号加入的数据将会被解释成文本,而不是真正的HTML,若要插入HTML,则需要v-html指令
<div id="app">
<p v-html="message"></p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"<h1>这是一个一级标题</h1>"
}
})
</script>
这个 p 的内容将会被替换成为 message 值 ,直接作为 HTML——会忽略解析 property 值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。(在站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值)