自学Vue的第一周总结

Vue的简要介绍

Vue是一套用于构建用户界面的渐进式框架。Vue的优势在于专注于视图层，易于上手操作，也便于与其他项目或者第三方整合。Vue被设计为自底向上逐层应用。除此之外，当与现代化的工具链以及各种支持类库结合使用时，Vue也能够为复杂的单页应用提供驱动。

Vue实例

每一个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的（new Vue）。实例里接收一些配置项，比如：el表示实例管理的一个区域。

计算属性

计算属性🆚方法🆚侦听属性
计算属性与方法相比：
共同点是：达到的效果相同。
不同点是：计算属性内置缓存，有效地避免了冗余的数据。而方法每次都需要重新执行，性能低。
计算属性与侦听器相比：
共同点是：效果相同，且都有内置缓存。
不同点是：watch语法复杂。
总结来看，计算属性优先推荐使用，简洁且性能好。

样式绑定——class绑定

分为对象绑定和数组绑定。
对象绑定就是借助于class和对象的样式进行绑定。
数组绑定就是当数组里写一个内容的时候，这个内容表示一个变量，class上会显示这个变量的内容。

样式绑定——style绑定

同样分为对象和数组两种形式。

条件渲染

v-if 🆚 v-show
共同点：都可以控制一个模板标签是否在页面上显示。
不同点：
v-if对应的标签，只要其变量值是false，就不存在于dom之上了；
v-show的值是false，这个标签对应的dom在页面上仍然存在，只是以display none的形式。

key值

当重新渲染页面的时候，Vue会尽可能的尝试复用页面上已经存在的dom，这时候我们可以通过key值来表示唯一性。给某个元素标签添加一个key值，Vue就知道他是页面上唯一的元素，则不会进行复用。

列表渲染

改变数组，页面跟着变化的方法：

1. 直接修改引用；
2. 数组的变异方法；
3. set方法。

改变对象的数据，页面跟着变化的方法：

1. 直接修改引用；
2. set方法。

v-for

循环数组：两个参数：value（数组中的每一项）、index（数组的下标）。
循环对象：三个参数：value（对象的每一项内容）、key（该项对应的键值）、index（该项对应的索引下标）。

事件修饰符

prevent：阻止事件的默认行为。
stop：阻止事件向外冒泡。
self：只有点击才会触发事件，感知到然后执行。
once：只执行一次，触发过后自动解绑。
capture：捕获机制由外向内。

表单修饰符

lazy：在输入框失去焦点的时候才会显示值，一定程度上提高性能。
number：把输入的内容尽可能转换成数字形式，而非字符串。
trim：读取输入的内容，去除首尾空格。