vue教程:模板语法

如果想显示{{}}标签,而不进行替换,使用 v-pre即可跳过这个元素和它的子元素的编译过程。

Vue.js只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用Vue白名单内的全局变量,例如Math和Date。 

文本:

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

var obj = {
    foo: 'bar',
    rawHtml: 'This is should be red!'
}

let vm = new Vue({
    el: '#app',
    data: obj
})

{{foo}}

 原始 HTML:

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

var obj = {
    foo: 'bar',
    rawHtml: 'This is should be red!'
}

let vm = new Vue({
    el: '#app',
    data: obj
})

 这个 span 的内容将会被替换成为属性值 rawHtml,直接作为 HTML——会忽略解析属性值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。

特性:

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

使用 JavaScript 表达式:

实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。有个限制就是,每个绑定都只能包含单个表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}


{{ var a = 1 }}


{{ if (ok) { return message } }}

 指令:

指令必须添加在一个元素上,指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)

现在你看到我了

另外,指令可以绑定属性:

...

 

你可能感兴趣的:(vue)