1. 绑定class和style样式

 dom里自己拿到节点，改它上面的class样式

shift()移除第一个class属性

 

 push想加哪个class属性都行

 

59行div知道自己只能用两个样式，四种情况 

上面这种不合法，就算把样式加进div也得

 

样式对象：里面的key绿色的不能瞎写，都得是存在的

{{name}}
 

{{name}}
 

{{name}}
 

{{name}}
 

{{name}}

 2. 条件渲染

 v-if/v-else-if  跟以前一个用法，eg：三个if都会判断，但像上面这种if实现了就不会往下判断

 v-else 前面条件都不执行直接执行else里面的，没条件

当前的n值是:{{n}}
点我n+1{name}} -->{name}} -->{name}} -->{name}} -->

3. 列表渲染

3.1 基本列表

人员列表（遍历数组）
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
{{k}}-{{value}}
测试遍历字符串（用得少）
{{char}}-{{index}}
测试遍历指定次数（用得少）
{{index}}-{{number}}

3.2 key作用与原理

1.index做标识

 对比虚拟dom里面input一样，索性直接用了人家的真是dom，轮到王五比较左边没有key是3的了，于是自己生成真是dom

都是从新虚拟dom上掉下来的，复用率低

2. id作为key是唯一标识，不错乱

只有老刘30和后面的框新生成，绿色框里都是复用的，效率高，数据不会错乱 

3. 不写key照样错乱

不写在用v-for时，vue自动把遍历的索引值作为key了（说白了如果你没有写key，vue自动帮你补了index）

人员列表（遍历数组）
添加一个老刘
{{p.name}}-{{p.age}}

3.3 列表过滤

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

3.4 列表排序

人员列表
年龄升序年龄降序原顺序
{{p.name}}-{{p.age}}-{{p.sex}}

3.5 更新时的一个问题

人员列表
更新马冬梅的信息
{{p.name}}-{{p.age}}-{{p.sex}}

3.6 Vue监测数据的原理_对象

vue检测对象里面数据的改变：只要里面有对象，就有对应的set，get检测

//模拟一个数据监测

 3.7 Vue.set()方法

不能给vm/data追加属性，只能给data里面的某一个对象追加属性

学校信息
学校名称：{{school.name}}
学校地址：{{school.address}}
校长是：{{school.leader}}
学生信息
添加一个性别属性，默认值是男
姓名：{{student.name}}
性别：{{student.sex}}
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
朋友们
{{f.name}}--{{f.age}}