Vue语法笔记

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

事件监听：
v-on 指令绑定一个事件监听器  缩写【@】   v-on:click

用户输入,绑定数据：
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

绑定 DOM 元素属性:  缩写【:】
v-bind   缩写：
 V-bind:title
 v-bind:style
 v-bind:href
 v-bind:class
 　　对象： v-bind:class="{ active: isActive, 'text-dange r': hasError }">
 　　数组：<div v-bind:class="[activeClass, errorClass]">

插入内容：
 Mustache 语法（双大括号），双大括号会将数据解释为纯文本，当数据改变时，插值处的内容会更新。
 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
 v-html 指令 为了输出真正的 HTML
 v-text 会把所有的内容当成字符串给直接输出出来。

逻辑流转：
 v-if 条件
 v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面
 v-show 根据条件展示元素的选项是，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
 v-if vs v-show
注：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
 v-for  循环
 v-for 具有比 v-if 更高的优先级。

组件： 非常类似于自定义元素——它是 Web 组件规范的一部分
 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
其他：
 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
 过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

属性：

　　Vue 不能检测到对象属性的添加或删除

　　属性必须在 data 对象上

注：由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

Vue 不允许动态添加根级响应式属性

注：Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上 Vue.$set(object, key, value)  或使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。可以创建一个新的对象，让它包含原对象的属性和新的属性；例： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

比较择优：

计算属性 vs Methods

要缓存最好用计算属性，不要缓存最好用methods

注：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。 如果你不希望有缓存，请用 method 替代。

计算属性 vs Watched 属性

有一些数据需要随着其它数据变动而变动时，最好使用 computed 属性。
在数据变化响应时，执行异步操作或开销较大的操作, 使用命令式的 watch 回调。
注：计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ;

其他：

<router-link :to="'/content/' + i.id">     转化为  <a href> </a>
注：router-link 是 VueRouter2 “声明式导航”的写法，在实际转换为 html 标签的时候，会转化为 <a></a>，里面的 to 属性，就相当于 a 的 href 属性。