Vue.js 知识点罗列

• Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM.

• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

• v-bind:该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。响应式行为

<span v-bind:title="message">    鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例.
• 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。每个 Vue 实例都会代理其 data 对象里所有的属性，注意只有被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：

var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true// $watch 是一个实例方法vm.$watch('a', function (newVal, oldVal) {  // 这个回调将在 `vm.a`  改变后调用})

• 实例生命周期
  
  每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

var vm = new Vue({  data: {    a: 1  },  created: function () {    // `this` 指向 vm 实例    console.log('a is: ' + this.a)  }})// -> "a is: 1"

• 模版语法
  Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
  在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
  如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。
• 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。(=>模板表达式是指你在写html标签时，在{{}}中或者绑定的事件（v-on,v-if,之类的）=后，只能使用Math、Date之类的全局函数)
• 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定
• 指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
• 计算缓存 vs Methods
  我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比而言，只要发生重新渲染，method 调用总会执行该函数。
• 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
• v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
• 用 key 管理可复用的元素
  Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。例如，如果你允许用户在不同的登录方式之间切换:

<template v-if="loginType === 'username'">  <label>Username</label>  <input placeholder="Enter your username"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address"></template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素， 不会被替换掉——仅仅是替换了它的的 placeholder。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">  <label>Username</label>  <input placeholder="Enter your username" key="username-input"></template><template v-else>  <label>Email</label>  <input placeholder="Enter your email address" key="email-input"></template>

现在，每次切换时，输入框都将被重新渲染。

• 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 visibility 。注意， v-show 不支持 语法，也不支持 v-else。
• 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
• 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。也可以用 of 替代 in 作为分隔符

<ul id="example-2">  <li v-for="(item, index) in items">    {{ parentMessage }} - {{ index }} - {{ item.message }}  </li></ul>var example2 = new Vue({  el: '#example-2',  data: {    parentMessage: 'Parent',    items: [      { message: 'Foo' },      { message: 'Bar' }    ]  }})

• 由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
  当你利用索引直接设置一个项时，例如：
  vm.items[indexOfItem] = newValue
  当你修改数组的长度时，例如：
  vm.items.length = newLength
  为了解决第一类问题，以下两种方式都可以实现和
  vm.items[indexOfItem] = newValue
  相同的效果， 同时也将触发状态更新：

Vue.set(example1.items, indexOfItem, newValue)example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你也同样可以使用 splice：
example1.items.splice(newLength)

• 在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替,单个勾选框，逻辑值,多个勾选框，绑定到同一个数组,对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）,但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
• 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步（change事件常在表单元素失去焦点时触发）.
  

参考链接 https://cn.vuejs.org/v2/guide/