# 插值绑定
插值绑定是Vue.js中最常见，最基本的语法，绑定的内容主要有文本插值和HTML插值
# 文本插值
用两个左右花括号将要绑定的变量、值、表达式括住就可以实现
# 实例
HTML
<div id="app">
<h1>{{ title }}</h1>
</div>
1
2
3
2
3
JS
let vm = new Vue({
el: '#app',
data(){
return{
title:'HELLO'
}
}
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 运行结果
HELLO
1
# v-text
HTML
<div id="app">
<h1 v-text></h1>
</div>
1
2
3
2
3
JS
let vm = new Vue({
el: '#app',
data:{
title:'HELLO'
}
})
1
2
3
4
5
6
2
3
4
5
6
# 运行结果
HELLO
1
# HTML插值
HTML插值可以动态渲染DOM节点
# 实例
CSS
<style>
.align-center {
text-align: center;
}
</style>
1
2
3
4
5
2
3
4
5
HTML
<div id="app" style="width: 800px;margin: 0 auto;">
<div>{{ blog }}</div>
<hr>
<div v-html="blog"></div>
</div>
1
2
3
4
5
2
3
4
5
JS
let vm = new Vue({
el: '#app',
data () {
return {
blog: `<h2 class="align-center">送报少年</h2>
<p class="align-center">浮云柳絮无根蒂，天地阔远随飞扬。</p>`
}
}
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 运行结果
<h2 class="align-center">送报少年</h2> <p class="align-center">浮云柳絮无根蒂，天地阔远随飞扬。</p>
送报少年
浮云柳絮无根蒂，天地阔远随飞扬。
1
2
3
4
2
3
4
可以看到，文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码被渲染为视图节点。
# 插值操作 其他指令的使用
# v-once
不能继续用DOM渲染更改
# v-pre
直接显示里面的内容
<div id="app">
<h1 v-pre>{{ title }}</h1>
</div>
1
2
3
2
3
let vm = new Vue({
el: '#app',
data:{
title:'HELLO'
}
})
1
2
3
4
5
6
2
3
4
5
6
# 运行结果
{{ title }}
1
2
2
# v-cloak
渲染的时候会删除这个指令（属性），用于解决渲染过长的显示异常问题。
案例
<style>
[v-cloak]{
display:none;
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="app" v-cloak>
<h1>{{ title }}</h1>
</div>
1
2
3
2
3
setTimeout(function(){
let vm = new Vue({
el: '#app',
data:{
title:'HELLO'
}
})
},1000)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8