Vue.js 模板语法
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。使用“Mustache”语法 (即用双大括号包裹) 的文本插值：Message: {{ msg }}Message: {{ msg }}Mustache 标签将会被替代为对应数据对象上 “msg” 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。如果使用 v-once 指令，你也能执行 一次性插值 ，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。v-once一次性插值HTMLHTML直接用双大括号包裹只是普通文本，如果想实现HTML代码效果，需要加入 v-html 指令v-htmlhtml部分：


Using mustaches: {{ rawHtml }}



Using v-html directive:





Using mustaches: {{ rawHtml }}



Using v-html directive:


js部分：
var vm = new Vue({

el:'#app',

data:{

rawHtml:'this is red'

}
});
var vm = new Vue({

el:'#app',

data:{

rawHtml:'this is red'

}
});v-html使用时 在span标签的前标签内写入“v-html="xxx” ，相当于将data中的值以HTML形式放入span标签内。在span标签的前标签内写入“v-html="xxx”attribute（属性）attribute（属性）Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：格式：v-bind:属性="变量名"html部分：
123

123
js部分：
data:{
textcolor:"red"
}
data:{
textcolor:"red"
}将变量textcolor的值“red"绑定在盒子的 "color" 属性上对于布尔属性，v-bind使用为：

如果 isButtonDisabled 的值是 null、undefined 或 false ，则 disabled attribute 甚至不会被包含在渲染出来的