详解Vue(4) ——模板语法

一、插值

1.文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{message}}

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

  
{{message}}
  

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

直接在HTML标签里写v-once即可

  

      {{message}}
    

      {{message}}
    
  
  

对比结果

2.原始HTML

结果

3.Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind
如：更新
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中

  

    更新//更改值
    连接//更改
    Button
  
  

结果

4.使用JavaScript表达式

  

    

      {{ 1+1 }}
      

      {{ true ? "1":"2" }}
      

      {{new Date()}}
    
  
  

结果

  

      
      {{var str ="hello";}}
    
  

报错结果

那么到底是哪些能执行呢？

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

二、指令

1.参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。如...其中v-bind也可以称之为指令，可以在href这个指令里面指定一些参数或者方法

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定

  

    连接//更改
  
  

2.动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
如连接//更改
这里的attrname会被作为一个JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

指令

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

3.修饰符

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

三、缩写

v-就是Vue的前缀。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。

1.v-bind缩写

v-bind:href=""可以缩写成:href="url

2.v-on缩写

v-on:click=""可以缩写成@click=""