《Vue2.0 · 模板(插值)语法》

插值

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

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

```<template>
  <div>
    <!-- 模板语法 -->
    <p>{{ template1 }}</p>
    
    <!-- 一经插入后,值不可改变 -->
    <p v-once>{{ template2 }}</p>
    
    <p v-html="template3"></p>
    
    <!-- 自定义属性 -->
    <button :disabled="attribute">enter your</button>
    
    <!-- JavaScript表达式支持 -->
    <p>{{ 1>0?'HELLO':'WORD' }}</p>
    
    <p>{{ List +1 }}</p>
    
    <p>{{ title.split('').reverse().join('') }}</p>
    
    <p :id="'List'+List">{{ 'id=List'+List }}</p>
    
  </div>
</template>
<script>
export default {
  name:'IndexPage',
  data(){
    return {
      template1 :'温故而知新。',
      template2 :'后生可畏，焉知来者之不如今也。',
      template3 :`<span>幸福是温暖，是感激，是满足，是宽恕，是奉献，我们苦苦寻觅，殷殷向往</span>`,
      attribute :'disabled',
      List :99,
      title :'Hello Word'
    }
  }
}
</script>