Class 与 Style 绑定

v-bind:class 绑定一个返回对象的计算属性。这是一个常用且强大的模式：

v-bind:style 直接绑定到一个样式对象通常更好，这会让模板更清晰.同样的，对象语法常常结合返回对象的计算属性使用。

？自动添加前缀：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。经过测试，transform并不会？

<div v-bind:style="styleObject" ></div>

var vm = new Vue({
  el: document.querySelector('div'),
  data: {
    styleObject: {
      border: 'solid red',
      width: '140px',
      height: '60px',
      color: 'red',
      fontSize: '13px',
      transform: 'translate(30px, 20px) rotate(20deg)'
    }
  }
});

条件渲染

下面这段代码不知道有什么问题，都会显示出来？

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

用 key 管理可复用的元素

• Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可.
• <label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

• 另一个用于根据条件展示元素的选项是 v-show 指令。用法与 v-if 大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

避免 v-if 和 v-for 用在一起：永远不要把 v-if 和 v-for 同时用在同一个元素上。

列表渲染

key

• 建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
• 因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

数组更新检测

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组

• [filter()]((https://developer.mozilla.org/en-US/docs/W...)

• [concat()]((https://developer.mozilla.org/en-US/docs/W...)

• [slice()]((https://developer.mozilla.org/en-US/docs/W...)

• Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

  注意事项

• 由于 JavaScript 的限制，Vue 不能检测以下变动的数组，从而触发视图更新：

  • 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
    • 解决办法
      • Vue.set(vm.items, indexOfItem, newValue)
      • vm.$set(vm.items, indexOfItem, newValue)
      • vm.items.splice(indexOfItem, 1, newValue)
  • 当你修改数组的长度时，例如：vm.items.length = newLength
    • 解决办法
      • vm.items.splice(newLength)

        对象更改检测注意事项

• 由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

• 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

• 有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。

事件处理

事件修饰符

• ? 缺少例子，暂时没有理解
• addEventListener

  按键修饰符

• 可以通过全局 config.keyCodes 对象自定义按键修饰符别名
• ? 自动匹配按键修饰符

系统修饰键

本作品采用《CC 协议》，转载必须注明作者和本文链接