Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
Mustache胡子语法(双大括号语法),直接用{{}},将data中的值写入页面中
<div id="app">
{{msg}}
</div>
<script>
const app = new Vue({
el:'#app',
data:{
msg:'nihao'
}
})
</script>
v-html:
若后台返回的数据为html标签内容,如<a href="www.baidu,com"></a>
,写成如下代码,会直接在页面显示
<div id="app">
<h2>{{msg}}</h2>
<h2>{{url}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
msg:'hello',
url:'<a href="http://www.baidu,com">百度一下</a>'
}
})
</script>
但其实我们想显示的为一个超链接,所以要用v-html
<h2 v-html="url"></h2>
就可以显示为超链接了,
v-text:
直接将文本显示在页面中,与Mustache使用的方式差不多,都可以显示内容
但不如Mustache方便,如果想拼接个数据,还是使用Mustache便捷。
v-text中如果有拼接的值,里面的值会覆盖后面拼接的值,在此指“世界”
<h2 v-text="msg">,世界</h2>
<h2 >{{msg}} world</h2>`
v-once
该元素和组件只渲染一次,不会随数据改变而改变,想不支持响应式,就可以使用。
只使用一次,后续不会修改的值,可以使用这个指令。
<h2 >{{msg}} </h2>`
<h2 v-once>{{msg}}</h2>`
若在控制台输入:app.msg=‘msg改变了值’,上面的值,修改了,但下面的没有修改。
v-pre :
若想要将一个值原封不动的显示,不想要解析,可以在元素中加入此指令
<h2 v-pre>{{msg}}</h2>`
页面就会显示{{msg}}
v-cloak:
在一些情况下,浏览器可能会直接显示出Mustache标签,闪一下才会出现解析后的值。
作用是:在vue解析前,在div中有v-cloak属性,在解析vue后,这个属性自动删除。所以在解析前不会显示Mustache
<style>
[v-cloak]:{
display::none
}
</style>
<div id="app" v-cloak>
<h2>{{msg}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
msg:'hello',
}
})
</script>