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指令。




    
    Document
    


    

{{data.message}}

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

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

特性

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




    
    Document
    


    

{{data.message}}

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




    
    Document
    


    

{{data.message}}

isDisabledBtn的值是nullundefinedfalse时,则disabled特性甚至不会被包含在渲染出来的

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

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

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

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

指令

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



    
    Document
    


    

data seen

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

元素。

参数

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




    
    Document
    


    
    


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




    
    Document
    


    
    


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

修饰符

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

缩写

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

...


...

...

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

你可能感兴趣的:(Vue模板语法)