vue学习笔记——模板语法:模板语法插值
模板语法:(摘自vue.js官网)
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法。
1、插入纯文本
a.声明式渲染,使用“{{ }}”即Mustache语法
//-------------------HTML------------------
<div class="app">
{{msg}}
</div>
//-------------------JS---------------------
var data={
msg:"hello world!"
}
new Vue({
el:".app",
data:data
})
Mustache标签的内容会直接替代为对应数据对象上msg的值,若数据对象发生改变,则插值处也会随之改变。
b.v-once指令进行插值
//-------------HTML--------------------
<div class="app" v-once>
{{msg}}
</div>
//--------------JS--------------------
var data={
msg:"hello world!"
}
var vm=new Vue({
el:"app"
data:data
})
通过v-once指令进行插值msg标签中的内容不会随之数据对象的改变而改变
在console页面中输入,并执行改变msg的数据对象
可发现,msg标签中的内容并没有发生改变
2、插入纯HTML
这里要用到v-html指令
<div v-html="msg1"></div>
var data={
msg:"hello World!!",
};
var vm=new Vue({
el:".app",
data:data
});
执行结果如下:
特性:Mustache语法不能作用在HTML属性上,需要用到v-bind指令:
<div class="app">
div v-bind:tittle="msg2">nihao</div>
</div>
var data={
msg2:"你好啊"
}
var vm=new Vue({
el:".app",
data:data
});
v-bind指令同样适用于布尔值特性,若该布尔值是false、undefined或null则不会进行渲染。要进行渲染布尔值类型必须要为true。
<div class="app">
<button v-bind:disabled="isButtonDisabled">anniu</button>
</div>
var data={
isButtonDisabled:false
}
var vm=new Vue({
el:".app",
data:data
});
布尔值为false执行结果如下:
布尔值为true执行结果如下: