• 写在 <template> 里的语法
  • Vue.js 模板语法是 XML：标签必须闭合，空 div 可写成 <div />
  • 在底层实现上，vue 将模板编译成虚拟 DOM 渲染函数，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
  • 可以不用模板，自己写渲染（render）函数

插入表达式 {{}}

声明式渲染: 声明式地将数据渲染进 DOM 的系统
所有数据都是响应式的，当 app.message 更新时， 页面也会跟着变化

不再与 HTML 直接交互。一个 Vue 应用会将其挂载到一个 DOM 元素上 (这里是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部

文本插值

  1. <div id="app">
  2.     <!-- "Mustache" 语法：响应式 -->
  3.     <div> {{ message }} </div>
  5.     <!-- v-once 指令：一次性插值，非响应式 -->
  6.     <div v-once>{{ message }}</div>
  7. </div>
  1. new Vue({
  2.     el: '#app',
  3.     data: {
  4.         message: 'Hi'
  5.     }
  6. })

原始 HTML

  • 双大括号会将数据解释为普通文本，若要输出真正的 HTML ，要使用 v-html 指令
  1. <p>Using mustaches: {{ rawHtml }}</p>
  2. <p>
  3.     Using v-html directive: <span v-html='rawHtml'></span>
  4. </p>

v-html.png
span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定

  • 使用 v-pre 显示 双大括号 {{}}
    1. <div v-pre> {{ n }} </div>

    JavaScript 表达式

可使用 JS 表达式绑定数据，每个绑定只能包含单个表达式，不能包含语句

  1. {{ number + 1 }}
  2. {{ ok ? 'yes' : 'no' }}
  3. {{ message.split('').reverse().join('')}}
  5. <div v-bind:id="'list-' + id"></div>
  7. <!-- 语句无效，必须为单个表达式 -->
  8. {{ var a = 1 }}

指令 Directives

  • 指令是带有 v-前缀的特殊 attribute
  • 指令是为了减少重复的 DOM 操作

绑定属性 v-bind

  • 从 2.6.0 开始，可以用 [] 括起来的 JavaScript 表达式作为一个指令的参数
  • [] 中不能有空格和引号
  • [] 中变量名不使用大写，因为浏览器会全部转换为小写
  • 动态参数可接受唯一的非字符串类型的值为 null， 该值可用于移除绑定
  1. <!-- 绑定元素 -->
  2. <a v-bind:href="url"> ... </a>
  3. <!-- 若 key = "href", 则等价于 v-bind:href -->
  4. <a v-bind:[key]="url"> ... </a> 
  6. <!-- v-bind缩写 -->
  7. <a :href="url"> ... </a>
  8. <a :[key]="url"> ... </a>
  9. <div :style={width: 10%}></div>

绑定事件 v-on

使用 v-on`指令进行事件绑定

  1. <!-- 绑定事件 -->
  2. <a v-on:click="playTwoDays"> ... </a>
  3. <a v-on:[event]="playTwoDays"> ... </a>
  5. <!-- v-on缩写 -->
  6. <a @click="playTwoDays"> ... </a>
  7. <a @[event]="playTwoDays"> ... </a>
  • 直接写 JS 代码
  1. <div id="app">
  2.     <span>{{ number }}</span>
  3.     <button @click="number += 1">
  4.         +1
  5.     </button>
  6. </div>
  1. new Vue({
  2.     el: '#app',
  3.     data: {
  4.         number: 0
  5.     }
  6. })
  • 接收可调用的方法名 or 在内联 JS 语句中调用方法
  1. <div id="app">
  2.     <span>{{ number }}</span>
  3.     <!-- 接收可调用的方法名 -->
  4.     <button @click="add1">   <!-- 在内联 JS 语句中调用方法: <button @click="add1()"> -->
  5.         +1
  6.     </button>
  7. </div>
  1. new Vue({
  2.     el: '#app',
  3.     data: {
  4.         number: 0
  5.     },
  6.     methods: {
  7.         add1() {
  8.             this.number += 1
  9.         }
  10.     }
  11. })

条件渲染 v-if

  • v-if指令：条件性地渲染一块内容，只有在指令地表达式返回 true 时才会被渲染

控制切换一个元素是否显示：

  1. <div id="app-3">
  2.     <p v-if="seen">
  3.         出现！
  4.     </p>
  5. </div>
  1. new Vue({
  2.     el: '#app-3',
  3.     data: {
  4.         seen: true  // 在控制台输入 app3.seen = false 则信息消失
  5.     }
  6. })

v-else-if

  1. <div v-if="type === 'A'">
  2.   A
  3. </div>
  4. <div v-else-if="type === 'B'">
  5.   B
  6. </div>
  7. <div v-else-if="type === 'C'">
  8.   C
  9. </div>
  10. <div v-else>
  11.   Not A/B/C
  12. </div>
  • v-show：只是简单地切换元素的 CSS property display

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  1. <h1 v-show="ok">Hello!</h1>

循环渲染 v-for

  • v-for 用于遍历数组来渲染一个列表
    • 遍历值 item in items
    • 遍历值与索引 (item, index) in items
    • 可用 of 代替 in，即 item of items
  1. <!-- 遍历打印数组 -->
  2. <div id="app-4">
  3.     <ol>
  4.         <li v-for="(item, index) in items" :key="item.message">
  5.             {{ item.message }} - {{ index }}
  6.         </li>
  7.     </ol>
  8. </div>
  1. new Vue({
  2.     el: '#app-4',
  3.     data: {
  4.         items: [
  5.             {message: '吃饭'},
  6.             {message: '睡觉'},
  7.             {message: '打豆豆'}
  8.         ]
  9.     }
  10. })
  11. // out:
  12. //    1. 吃饭 - 0
  13. //    2. 睡觉 - 1
  14. //    3. 打豆豆 - 2

在控制台输入 `app4.items.push({message: ‘继续打豆豆’})，列表最后会添加一条信息

  • v-for 遍历对象：
    • 遍历值 value in obj
    • 遍历键值对 (value, key) in obj
    • 遍历键值对与索引 (value, key, index) in obj
  1. <div id="app" v-for="(value key) in obj">
  2.     {{key}}: {{value}}
  3. </div>
  1. new Vue({
  2.     el: '#app',
  3.     obj: {
  4.       title: 'How to do lists in Vue',
  5.       author: 'Jane Doe',
  6.       publishedAt: '2016-04-10'
  7.     }
  8. })
  9. //  out:
  10. //      title: How to do lists in Vue
  11. //      author: Jane Doe
  12. //      publishedAt: 2016-04-10
  • 当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级，一般不推荐一同使用，除了有些情况：
    • 只为部分项渲染节点 ```html
    • {{ todo.name }} 

  2.    - 跳过某些循环渲染
  3. ```html
  4. <ul v-if="todo.length">
  5.     <li v-for="todo in todos">
  6.         {{ todo }}
  7.     </li>
  8. </ul>
  • Vue 使用 v-for 渲染元素列表时，默认使用“就地更新”策略，如果列表项顺序改变，Vue 不会移动 DOM 元素，而是就地更新每个元素，若需要Vue跟踪每个节点的身份，从而重用和重新排序现有元素，则需要给每项提供一个唯一的 key
  1. <div v-for="item in items" :key="item.id">
  2.   <!-- 内容 -->
  3. </div>
  • 数组更新：Vue 对数组的操作进行了封装，包括
    • 改变原始数组：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
    • 不改变原始数组，总是返回一个新数组：filter(), concat() , slice()

      其他

      v-model, v-slot, v-clock ,v-once 等

自定义指令

修饰符

v-on

  • 事件修饰符

    • event.preventDefault 阻止默认事件
    • event.stopPropagation 阻止冒泡
    • event.once 事件只促发一次
      1. <a @clicl.once = "doSomeThing"></a>

  • 按键修饰符

监听键盘事件时得到按键的信息

  1. <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  2. <input @keyup.enter="submit">
  3. <input @keyup.13="submit">

Vue 提供了常用按键码的别名：.enter, .tab, .esc, .space, up, .down, .left, .right

  • 鼠标按钮修饰符

.left， .right， .middle

v-bind

.prop .camel .sync

v-model

  • .lazy
  • .number
  • .trim