vue-模板语法

• 模板语法
• • 文本插值
  • 原始 HTML
  • Attribute 绑定
  • • 简写
    • 布尔型 Attribute
    • 动态绑定多个值
  • 使用 JavaScript 表达式
  • 指令 Directives
  • • 参数 Arguments
    • 动态参数
    • • 动态参数语法的限制

模板语法

文本插值

Message: {{ msg }}

原始 HTML

Using text interpolation: {{ rawHtml }}
Using v-html directive: 

指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。

Attribute 绑定

如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写

布尔型 Attribute

Button

当 isButtonDisabled 为真值或一个空字符串 (即disabled=“”) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

data() {return {objectOfAttrs: {id: 'container',class: 'wrapper'}}
}

使用 JavaScript 表达式

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

调用函数

{{ formatDate(date) }}

指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。

参数 Arguments

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute：

 ... 
 ... 

动态参数

 ... 
 ... 

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的