Vue模板语法【三】

模板语法

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

插值

文本

Mustache语法（双大括号）：

<span>Message: {{ msg }}</span>

msg的值绑定在data的msg的property上，如果data的msg的值发生改变，则插值处的内容就会更新。

v-once指令，可以实现一次性插值，以后数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML。

你需要使用v-html指令

 <div id="app">
      <p>using mustaches: {{rawHtml}}</p>
      <p>using v-html directive: <span v-html="rawHtml"></span></p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          rawHtml: '<h1>hhh</h1>'
        }
      })
    </script>

Attribute

Mustache语法不能作用在HTML attribute上。

这种情况应该使用v-bind指令

<div id="app">
      <p v-bind:id="dynamicId"></p>
      <button v-bind:disabled="isButtonDisabled">Button</button>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            dynamicId: 'I am p',
            isButtonDisabled: null
          }
        }
      })
    </script>

对于布尔值，只要存在就位true，如果是null，undefined，false，则该布尔值所处的attribute不会包含在渲染出来的元素中。

使用JavaScript表达式

对于所有的数据绑定，Vue提供完全的JavaScript表达式支持。

但是每个绑定只能包含单个表达式

<div id="app">
      <p>{{number+1}}</p>
      <p>{{ok?'yes':'no'}}</p>
      <p>{{Date().toString()}}</p>
      <p v-bind:id="'list-'+id"></p>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            number: 1,
            ok: true,
            id: 1
          }
        }
      })
    </script>

下面的例子不会生效：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

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

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

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

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。

动态参数

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<div id="app">
      <a v-bind:[attribute]="url">Baidu</a>
      <a v-on:[pick]="click">Event</a>
      <input type="text" name="input" id="input" v-on:[event]="handle" />
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: function () {
          return {
            attribute: 'href',
            url: 'https://www.baidu.com',
            event: 'focus',
            pick: 'click'
          }
        },
        methods: {
          handle: function () {
            console.log('you focus me')
          },
          click: function () {
            console.log('you click me')
          }
        }
      })
    </script>

注意：

• 某些字符，如空格和引号，放在HTML attribute名里面是无效的。通过使用没有空格和引号的表达式，或用计算属性代替这种复杂表达式。

• 避免使用大写字符来命名键名，因为浏览器会把attribute名全部强制转为小写。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

在接下来对 v-on 和 v-for 等功能的探索中，你会看到修饰符的其它例子。

缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

v-bind缩写为:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on缩写为@

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>