Vue学习笔记2(官网学习)

一.模板语法

1.插值

（1）文本

（2） v-once指令

（3）v-html指令

（4）Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

（5）使用javascript表达式

限制：

2.指令

（1）参数

（2）动态参数

对动态参数的值的约束

（3）修饰符

（4）缩写

二.计算属性和侦查器

（1）计算属性缓存 vs 方法

（2）计算属性和侦查属性

（3）计算属性的setter

（4）侦听器

三.Class 与 Style 绑定

1.绑定 HTML Class

（1）对象语法

绑定的数据对象不必内联定义在模板里：

（2）数组语法

（3）用在组件上

2.绑定内联样式

（1）对象语法

直接绑定到一个样式对象通常更好，这会让模板更清晰：

同样的，对象语法常常结合返回对象的计算属性使用

（2）数组语法

（3）自动添加前缀

（4）多重值

四.条件渲染

1.v-if

（1）在 <template> 元素上使用 v-if 条件渲染分组

（2）v-else

（3）v-else-if

（4）用 key 管理可复用的元素

（5）v-show

（6）v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

（7）v-if 与 v-for 一起使用

五.列表渲染

1.

（2）一个对象的 v-for

（3）key

2.数组更新检测

（1）变异方法

（2）替换数组

（3）注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

解决：

（4）对象更改注意事项

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

3.显示过滤/排序结果

4.一段取值范围的 v-for

5.v-for on a <template>

6.v-for with v-if

7.一个组件的 v-for

六.事件处理

1.监听事件

（1）可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

（2）事件处理方法

（3）内联处理器中的方法

（4）有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

2.事件修饰符

3.按键修饰符

（1）按键码

4.系统修饰键

5..exact 修饰符

6.鼠标按钮修饰符