Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
使用“Mustache”语法 (即用双大括号包裹) 的文本插值:
Message: {{ msg }}
Mustache 标签将会被替代为对应数据对象上 “msg” 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
如果使用 v-once 指令,你也能执行 一次性插值 ,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。
HTML
直接用双大括号包裹只是普通文本,如果想实现HTML代码效果,需要加入 v-html 指令
html部分:
Using mustaches: {{ rawHtml }}
Using v-html directive:
js部分:
var vm = new Vue({
el:'#app',
data:{
rawHtml:'this is red'
}
});
v-html使用时 在span标签的前标签内写入“v-html="xxx” ,相当于将data中的值以HTML形式放入span标签内。
attribute(属性)
Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:
格式:v-bind:属性="变量名"
html部分:
js部分:
data:{
textcolor:"red"
}
将变量textcolor的值“red"绑定在盒子的 "color" 属性上
对于布尔属性,v-bind使用为:
Button
如果 isButtonDisabled 的值是 null、undefined 或 false ,则 disabled attribute 甚至不会被包含在渲染出来的 元素中。
JS表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ data变量 + 1 }} //
{{ data变量/表达式 ? 'true代码' : 'false代码' }} //三元运算
{{ data变量.split('').reverse().join('') }} //可以进行函数调用
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript被解析。
限制是:每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是, 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 回顾我们在介绍中看到的例子:
现在你看到我了
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如, v-bind 指令可以用于响应式地更新 HTML属性值:
...
在这里 href 是参数 ,告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
另一个例子是 v-on 指令,它用于监听 DOM 事件:
...
在这里参数是监听的事件名。
动态参数
可以动态的绑定不同的属性,可以用 方括号 括起来的 JavaScript 表达式作为一个指令的参数:
...
这里的 attributeName(命名中不能有逗号或冒号等符号) 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。
例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 ... 。
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:
...
在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus。
修饰符
修饰符 (modifier) 是以半角句号 " . " 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
简写 v-bind 缩写
...
...
v-on 缩写
...
...
总结
以上所述是小编给大家介绍的Vue.js的模板语法详解,希望对大家有所帮助!