Vue模板语法

Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

如果你熟悉虚拟DOM并偏爱JS的原始力量，你也可不用模板直接写渲染(render)函数，使用可选的JSX语法。

插值

文本插值

数据绑定最常见的形式是使用"Mustache"（小胡子语法）语法(双大括号)的文本插值：

{{message}}

Mustache将会被替代为对应数据对象上的message属性的值，无论何时绑定的数据对象上message属性发生了改变，插值的文本内容都会更新。

{{message}}

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

原始HTML

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

    
    
    


    

        
{{data.message}}
        

        
    
    

注意不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。

注意站点上动态渲染任意HTML可能非常危险，很容易导致XSS攻击，请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。

特性

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

    
    
    


    

        
{{data.message}}
        

        

        
    
    

在布尔特性的情况下，它们的存在即暗示为true， v-bind工作有所不同。

    
    
    


    

        
{{data.message}}
        

        

        
        Button
    
    

当isDisabledBtn的值是null、undefined、false时，则disabled特性甚至不会被包含在渲染出来的元素中。

使用JS表达式

迄今为止模板都只绑定简单的属性键值，但实际上对于所有数据绑定，Vue.js都提供了完全的JS表达式支持。

    
    
    


    

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

        

        
        

Button

JS表达式会在所属Vue实例的数据作用域下座位JS被解析，不过每个绑定都只能包含单个表达式。

# 语句无法解析
{{var tmp = 1}}

# 流程控制无法生效
{{ if(ok){return message} }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。不要在模板表达式中试图访问用户定义的全局变量。

指令

• 指令(Directives)是带有v-前缀的特殊属性
• 指令属性的值预期是单个JS表达式(v-for例外)
• 指令职责是当表达式值改变时，将其产生的连带影响，响应式地作用于DOM。

    
    
    


    

        
data seen
        
    
    

v-if指令将根据表达式seen的值的真假来插入/移除

元素。

参数

指令能接收一个“参数”，在指令名称后以冒号表示。

    
    
    


    

        link
        
    
    

href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

    
    
    


    

        link
    
    

v-on指令用于监听DOM事件，其参数是监听的事件名称。

修饰符

修饰符(Modifiers)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

缩写

v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性，当你在使用Vue.js为现有标签添加动态行为(dynamic behavior)时，v-前缀很有帮助，然后对于一些频繁用到的指令来说，就会感到繁琐。同时，在构建由Vue.js管理所有模板的单页面应用程序(SPA-single page application)时，v-前缀也变得没那么重要了。因此Vue.js为v-bind和v-on这两个常用指令提供特定缩写：

...

...

...

他们看起来可能与普通的HTML略有不同，但:和@对于特性名来说都是合法字符，在所有支持Vue.js的浏览器都能被正确地解析。而且它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着更深入地了解它们的行为，你会庆幸拥有它们。