模板语法

Vue.js使用了基于HTML的模板语法, 所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

Vue会将模板编译成虚拟DOM渲染函数，结合响应系统，Vue能算出至少需要重新渲染多少组件，并把DOM操作次数减到最少。

如果熟悉虚拟DOM，并偏爱JS原生，可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。详情参见 3_可复用性和组合-渲染函数和JSX

插值

v-once指定

如果元素加了v-once修饰符，改变vm里对应的值，值虽然变了，但不会将改动渲染到页面。

<div id="app">
  <p>Message: {{ msg }}</p>
  <p v-once>这个值将不会改变: {{ msg2 }}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: "这是一条消息",
      msg2: "msg2"
    }
  })
</script>

v-html原始HTML

默认情况模板渲染都是字符串。如果需要渲染HTML文本，需要使用v-html指令。注意：动态渲染的任意 HTML 可能会非常危险，容易导致 XSS 攻击。记住只对可信的内容使用 HTML 插值，绝对不要使用用户提供的内容

<div id="app">
  <p>插入HTML文本: {{ msg }}</p>

  <!-- span元素的内容将会是msg渲染后的内容 -->
  <p>插入HTML文本: <span v-html="msg"></span></p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: "这是一条<em style='color:red'>html文本</em>消息"
    }
  })
</script>

v-bind特性

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

这里如果v-bind了一个布尔属性，isBtnDisabled的值为false, null, undefined特殊值时，button渲染时不会出现disabled属性，如果isBtnDisabled为true或任意的字符串，disabled的值会被渲染为disabled.

<div id="app">
  <button v-bind:disabled="isBtnDisabled">按钮</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      isBtnDisabled: false
    }
  })
</script>

{{}}内使用JS表达式

对于所有的数据绑定，Vue.js都提供了完全的JS表达式支持

<div id="app">
  <p>{{ num + 1}}</p>
  <p>{{ ok ? 'YES' : 'NO' }}</p>
  <p>{{ msg.split('').reverse().join('') }}</p>
  <div v-bind:id="'list-' + id">id为list-la</div>
  <!-- 不推荐使用，可以使用计算属性代替, 除非不希望缓存 -->
  <p>{{ reverseMsg() }}</p>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      num: 20,
      ok: false,
      msg: 'ABCDEFG',
      id: 'la'
    },
    methods: {
      reverseMsg: function() {
        return this.msg.split('').reverse.join('');
      }
    }
  })
</script>

注意事项

• 每个绑定都只能包含单个表达式，下面的情况，将不会生效

{{ var a = 1 }} <!-- 这是语句，不是表达式 -->
{{ if (ok) { return message } }} <!-- 流控制不会生效，可以使用三元表达式 -->

• 模板表达式都防止沙盒中，只能访问全局变量一个白名单，如Math，Date，不能在表达式中访问用户自定义的全局变量。

指令

指令(Directives)是带有 v- 前缀的特殊特性。指令特性的值预期是单个JS表达式(v-for是特殊情况)，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式的应用于DOM，比如之前的一个例子，v-if指令根据表达式seen的值来插入或移除p元素

<p v-if="seen">现在看到我了</p>

注意这里如果为false直接移除p元素。而不是将p元素的display设置为false。另外visibility属性设置为false时，也是不显示，但会占用空间。

参数

一些指令能够接收一个参数，在指令名称后以冒号表示，下面的例子中，href为参数，告知v-bind指令将元素的href特性与表达式的url的值绑定。

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

<!-- v-on 指令，它用于监听 DOM 事件 -->
<a v-on:click="doSomething">...</a>

指定动态参数

从2.6.0开始，可以用方括号括起来的JS表达式作为一个指令的参数，下面例子中的attrname，eventname会被作为一个js表达式进行动态求值。动态参数表达式的约束

• 不能含有空格和引号
• 如果直接在HTML中使用模板，浏览器会把特性名称全部转为小写，不能用驼峰命名。下面的例子中attrName是无效的，需要改为attrname才能正常绑定

<div id="app">
  <a v-bind:[attrname]="url">测试链接</a>

  <button v-on:[eventname]="doSomething">打开一个弹窗</button>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      attrname: 'href',
      eventname: 'click',
      url: 'http://zuo11.com'
    },
    methods: {
      doSomething: function() {
        alert('Hello world!');
      }
    }
  })
</script>

修饰符

指令的参数后面可以使用 . 指明一个特殊后缀, 这个后缀被称为修饰符。 表示指令应该以特殊方式绑定。如.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()：

<div id="app">
  <form v-on:submit.prevent="onSubmit">
    <input v-model="name">
    <button type="submit">提交</button>
  </form>
</div>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: ''
    },
    methods: {
      onSubmit: function() {
        alert('prevent submit');
        return false;
      }
    }
  })
</script>

v-bind和v-on缩写

• v-bind: 缩写 :
• v-on: 缩写 @

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

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

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

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

<!-- 改写之前的例子 -->
<div id="app">
  <a :[attrname]="url">测试链接</a>
  <button @[eventname]="doSomething">打开一个弹窗</button>
</div>