mustache语法
mustache语法又叫双大括号语法,用于在页面中插入数据
data(){
message:'mustache!',
firstName: 'one',
lastName: 'two',
counter: 100
}
<h2>{{message}}</h2>
也可以拼装
<h2>{{message}} , hello</h2>
也可以些简单的表达式
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
v-once指令
vue是响应式的,页面的值可以根据控制室的值来改变
但是在某些时候,我们可能不需要这种改变,这时我们就可以使用v-once
v-once指令后面不需要跟任何表达式
v-once指令表示元素和组件只渲染一次,不会跟随控制室里数据的改变而改变
data : {
message : '你好呀'
}
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
在控制台修改信息
v-html指令
v-html指令往往后面会将data中的数据名作为string类型跟上
v-html指令会将数据中的html代码解析出来并进行渲染
在某些情况下,我们从服务器本身请求过来的就是html代码
例如:
data : {
url : '<a href=www.baidu.com>百度一下</a>'
}
如果我们直接输出,会输出html代码格式
<h2>{{url}}</h2>
如果想要解析代码并在页面上渲染,可以使用v-html指令
<h2 v-html='url'></h2>
v-text指令
v-text指令和mustache语法的用法比较相似,都是将数据在页面中显示出来
v-text通常接受一个string类型
data : {
message : '你好啊'
}
// mustache语法
<h2>{{message}}</h2>
// v-text指令
<h2 v-text='message'> </h2>
v-text指令缺点:不灵活,v-text中的内容会将标签中原本的内容覆盖掉
<h2 v-text='message'>vue</h2>
v-pre指令
v-pre指令会跳过这个元素和它子元素的编译过程,用于显示原本的mustache语法
data: {
message: '你好啊!'
}
<div id="app">
<h2>{{message}}</h2>
<div v-pre>{{message}}
<div>{{message}}</div>
</div>
</div>
v-cloak指令
在某些情况下,浏览器可能会直接显示出未编译的mustache标签,这时可以使用v-cloak指令,在数据没渲染出来时,使页面保持空白
setTimeout(function () {
const app = new Vue({
el: "#app",
data: {
message: '你好啊!'
}
})
}, 1000)
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>