Vue2入门必知的几点
常用功能的基本使用和相关知识
ViewModel指令
- Vue2的数据双向绑定，即v-model
- 默认是绑定value属性，同时监听input事件。
- 对于默认未实现v-model指令的组件，可以通过组件的props['value']和emits['input']来实现该功能
- 我们也可以修改v-model指令的默认行为，通过组件的model选项来指定prop和event。
Computed和Watch选项
Computed
- 当一个
数据要随另一个数据变化时，采用计算属性
- 默认值为一个get函数，函数内部会创建与函数名同名的变量对象，将计算结果赋值到该对象的value上
- 也可为一个对象，包含get，set两个方法。
methods
- 当要执行某些操作时，采用监听事件触发方法来操作
- 方法名一般是驼峰式
- 事件名最好用短横线链接
Watch
- 当一些
操作要随另一个数据变化时，采用Watch
- 计算属性与方法相比拥有对依赖项的缓存能力，只有依赖项变化时才会重新求值
- Watch与计算属性相比可以实现除了数据之外的其余操作，功能更丰富
Class和Style属性
Class
class作为一个标签属性，在vue中支持动态绑定
正常来说，class应该接收一个样式类的名称字符串作为值
如果绑定的是对象，则属性名即类名，属性值决定该类名是否激活
如果绑定的是数组，则数组的每个元素即为要绑定的类名，当然数组可以套娃对象
对象和数组可以来自于data，computed
Style
Style作为一个标签属性，也可以支持动态绑定
正常来说，style应该接收一个样式对象的字符串作为值
Vue对其做了增强，支持传递一个对象作为值
内部会将该对象解析转换为合法的cssStyle对象字符串
正常来讲，css的style对象内部的属性名是短横线连接，不支持驼峰的，但是由于我们传递的值不会直接作为style对象，所以支持驼峰写法
支持数组，数组的每个元素是一个style对象变量
支持对象，每个属性的值可为一个变量
注意点
- 绑定class时，绑定一个字符串变量最好，绑定style时，绑定一个对象类型的变量最好
- scope是特殊选择器，会为当前组件的样式加上一个随机特定的data标识来限制样式的作用范围，与class和id配合最好，与其他选择器配合会有性能问题
Event和Form
Event
@或者v-on监听的是原生的DOM事件
Vue提供了$event，它是原生的DOM事件，可将其传入回调函数来访问，以及e，它是事件名，也可传入来访问事件名
当对事件的某些行为有限制或者是需求时，可以查看相关的事件修饰符
Form
text 和 textarea 元素使用 value property 和 input 事件
checkbox 和 radio 使用 checked property 和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
支持事件修饰符lazy，number，trim
注意点
- 在某些特定的DOM元素，如ul，ol，table，select等其内部只能渲染特定的DOM元素，如果想使用组件，则必须在特定元素中通过is属性绑定组件名来实现，否则可能出现无效渲染
- 当sfc中有template时，如果script中导出了{}对象，会导致template被覆盖，整个组件的option为{}，可能出现无效渲染
If和For指令
If
v-if,v-else-if,v-else这三种情况
如果将v-if用于template则可以进行分组渲染
默认情况会复用已有的真实DOM
如果不想复用，增加一个key即可，key不止用于for循环
v-show只是切换css属性，不支持tempalte
for
正常的for in循环，迭代的是对象和数组的key
for of 循环迭代的是拥有迭代器的对象和数组
v-for in与正常的for in同理
迭代数组或对象的每一项的key，value，以及index（对象的此值为keys的顺序）
对于遍历的每项加上key属性，可以提高DOM的update速度
注意点
迭代数组时，只有特定的数组方法能触发更新，push，pop，shift，unshift，splice，sort，reverse
当使用filter，slice，concat时，会返回一个新数组
注意：按常理来说如果数组变了，而不是数组元素变了，应该会重新渲染整个DOM，但是Vue做了优化，当新旧数组的元素相同时，也会重用
for指令中的js表达式，迭代对象可以是一个方法的调用结果，或者一个计算属性，这大大增加了灵活性
如果遍历的是整数，则重复n次模板
v-for优先级会高于v-if，同时使用则会判断n次if 
