基础部分

条件渲染

v-if可以和 <template> 元素搭配实现条件渲染分组`

<template v-if="ok"> 
    <h1>Title</h1> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
</template>

v-show的相关注意点
1. 带有v-show的元素始终会渲染并保留在DOM中
2. v-show切换的是元素的CSS属性——display
v-if vs v-show
1. v-if是“真正”的条件渲染，它会在切换的过程中，条件块内的事件监听器和子组件在被销毁和重建
2. v-if是惰性的，即初始渲染时，条件为假则不进行渲染
3. v-show元素总是会被渲染，切换的只是css的display属性
4. 综合来说，v-if有更高的切换开销，v-show有更高的初始渲染开销，v-if适合运行时条件很少改变时使用，v-show适合在频繁地切换时使用

列表渲染

v-for的相关注意点
1. v-for在遍历数组时： v-for="(item, index) in Array"
2. v-for在遍历对象时： v-for="(value, name, index) in Object"
3. 遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的javascript引擎下都一致
v-for的维护状态

Vue在更新v-for渲染的元素列表时，默认使用“就地更新”的策略，在数据项的顺序被改变，Vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素

好处： 更加高效

适用范围： 不依赖子组件状态或临时DOM状态的列表渲染输出

不要使用对象或数组之类的非基本类型值作为v-for的key
数组更新检测

变更方法：Vue中对数组的七种方法进行了包裹，通过这七种方法变更数据，会触发视图更新（响应式），这七种方法分别是：push() pop() shift() unshift() splice() sort() reverse()

替换数组：Vue中在使用filter()、concat()、slice()等总是返回一个新数组的方法时，可以使用新数组去替换旧数组，Vue为了使DOM元素等到最大范围的重用而使用了一些智能的启发式方法，因此直接替换是非常高效的操作。
v-for 和 v-if的优先级问题

首先，Vue 不推荐在同一元素上使用 v--if 和 v-for

当 v-if 和 v-for 在同一节点时，v-for 的优先级更高，即 v-if 将分别重复运行与 v-for 循环中

如果想为部分项渲染节点，示例代码如下：

    <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>

如果想有条件地跳过循环的执行，那么可以将 v-if 置于外层元素（或 <template> 上）

<ul v-if="todos.length"> 
    <li v-for="todo in todos"> 
        {{ todo }} 
    </li>
</ul> 
<p v-else>No todos left!</p>

事件处理

内联处理器中的方法

如果需要在内联语句处理器中访问原始的 DOM 事件，可以用特殊变量 $event 把它传入方法，代码示例如下：

<button v-on:click="warn('Form cannot be submitted yet.', $event)"> 
    Submit 
</button>
// ... 
methods: { 
    warn: function (message, event) { 
        // 现在我们可以访问原生事件对象 
        if (event) { 
            event.preventDefault() 
        } 
        alert(message) 
    } 
}

这里的 warn 函数中的 event，就能够接收到原始的click事件

事件修饰符的注意事项

使用修饰符时，顺序十分重要，相同的代码会以同样的顺序产生。如 @click.prevent.self 会阻止所有的点击， @click.self.prevent只会阻止元素自身的点击

passive修饰符 能够使滚轮事件的默认行为立即触发，而不是等待 onScroll完成后触发，这个修饰符尤其能够提升移动端性能。

注意： .passive 和 .prevent 不能一起用，.prevent 会被忽略，同时浏览器也会有警告
系统修饰键的注意点

系统修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态

.exact 修饰符允许控制由精确的系统修饰符组合触发事件

鼠标按钮修饰符： .left .right .middle

表单输入绑定

选择框的注意点

如果 v-model 表达式的初始值未能匹配到任何选项时，<select> 元素将被渲染为“未选中”状态。在 ios 中，这会使用户无法选中第一个选项（ios 不会触发 change 事件）。所以，比较好的做法是提供一个值为空的禁用选项，如 <option disabled value="">请选择</option>

组件基础

组件复用

data 必须是一个函数：每个实例必须维护一份被返回对象的独立的拷贝，组件实例共用一个构造函数，如果单纯的是对象形式，所有组件会共用一个data，所以需要使用函数形式，返回一个对象独立的拷贝
监听子组件事件

父组件可以通过 v-on 监听子组件实例的任意事件，事件的方法在父组件中，通过 v-on 将事件传递到子组件中子组件通过调用 $emit 方法来并传入事件名称来触发事件，如 @click="$emit('enlarge-text')" 子组件可以在调用 $emit 的第二个参数及之后的参数中输入抛出到父组件中的值，父组件可以通过 $event 访问到被抛出的值
动态组件

实现动态组件，即在不同组件之间进行动态切换，可以通过 Vue 的 <component> 元素加一个特殊的 is属性 来实现，如 <component v-bind:is="currentTabComponent"></component>

currentTabComponent可以包括： 已注册组件的名字 或 一个组件的选项对象

注意： is属性 可以用在常规 HTML 元素，但这些元素会被视为组件，这样做的话，会让常规 HTML 元素的属性被视为 DOM 属性绑定。如果想让 value 这样的属性按照常规 HTML 元素属性使用，可以使用 .prop修饰器
解析 DOM 模板的注意事项

有些 HTML 元素，如 ul、ol 等，对于其内部允许出现的元素有严格的限制，如果直接将自定义组件插入到这些元素中，会导致渲染出错，可以通过 is属性 来进行变通，代码示例如下：
```
<table> 
    <tr is="blog-post-row"></tr> 
</table>
```
需要注意的是以下来源使用模板的话，这条限制会不存在
1. 字符串( template: '...')
2. 单文件组件（.vue）
3. <script type="text/x-template">

Vue 2.0 基础部分

基础部分

条件渲染

列表渲染

事件处理

表单输入绑定

组件基础