Vue2学习笔记（尚硅谷张天禹老师）Day-02
8、class与style绑定
8.1、理解
（1）在应用界面中，某个（些）元素的样式是变化的 （2）class/style绑定就是专门用来实现动态样式效果的技术
8.2、绑定class
（1）绑定class样式–字符串写法，适用于：样式的类名不确定，需要动态指定 （2）绑定class样式–数组写法，适用于：要绑定的样式个数不确定、名字也不确定 （3）绑定class样式–对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
例如：
{{name}}
{{name}}
{{name}}
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: "test",
classStr: "happy",
classArr: ['at1', 'at2', 'at3'],
classObj: {
at1: true,
at2: false
}
}
})8.3、style绑定
（1）绑定style样式–对象写法 ，属性名改为小驼峰命名 （2）绑定style样式–数组写法（不常用），数组其中是对象 例如：
{{name}}
{{name}}
const vm = new Vue({
el: "#root",
data: {
name: "test",
styleObj: {
fontSize: '40px',
color: "red",
backgroudColor: "yellow"
},
styleArr: [{
fontSize: '40px',
color: "red"
}, {
backgroudColor: "yellow"
}
]
}
})9、条件渲染
9.1、v-if
写法：
-
v-if=“表达式”
-
v-else-if=“表达式”
-
v-else 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被删除 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
条件渲染
当前的n值是:{{n}}
Hello,{{name}}!
Angular
React
Vue
< template>配合v-if使用：
你好，{{name}}
你好，{{name}}
你好，{{name}}
< template>不会渲染到DOM结构中，且只有和v-if配合使用才可以起到整套删除整套显示的效果。
9.2、v-show
写法：v-show=“表达式” 适用于：切换频率较高的场景 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉了
使用
v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
10、列表渲染
10.1、基本列表
v-for指令：
-
用于展示列表数据
-
语法：
v-for="(item,index) in xxx" :key="xxx"举例：
基本列表
人员列表（遍历数组）
-
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
-
{{k}}-{{value}}
遍历字符串
-
{{char}}-{{index}}
遍历指定次数
-
{{index}}-{{number}}
总结：
v-for指令：
-
用于展示列表数据
-
语法：
，其中key可以是index，也可以是遍历对象的唯一标识 -
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）
10.2、key的原理
我们在上面遍历数组的代码基础上，增加一个需求：点击一个按钮在张三的上面增加一行老刘的信息，并在每一行后面增加一个input框，用这个需求来分析key的原理：
key的原理
人员列表
-
{{p.name}} - {{p.age}}
原理：
-
虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
-
对比规则：
-
旧虚拟DOM中找到了与新虚拟DOM相同的key：
-
若虚拟DOM中内容没变, 直接使用之前的真实DOM
-
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
-
-
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面
-
-
用index作为key可能会引发的问题：
若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低 若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题
-
开发中如何选择key?
最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的
10.3、列表过滤
下面用两个例子（分别是用监视和计算属性）来实现列表过滤：
例子一（监视）：
- {{p.name}}-{{p.age}}-{{p.sex}}
const vm = new Vue({
el: "#root",
data: {
keyword: "",
person: [{
id: '001',
name: "马冬梅",
age: 18,
sex: '女'
}, {
id: '002',
name: "周冬雨",
age: 28,
sex: '女'
}, {
id: '003',
name: "周杰伦",
age: 13,
sex: '男'
}, {
id: '004',
name: "温兆伦",
age: 45,
sex: '男'
}, ],
person1: []
},
watch: {
keyword: {
//初始状态页面没有数据显示，即初始状态person1为空，此时让handler先执行一遍，让person1得到数据
immediate: true,
handler(val) {
//filter过滤器 遍历旧数组中的元素后，返回过滤后的新数组
this.person1 = this.person.filter((p) => {
//indexOf 前一个字符串中是否包含有括号里的字符串，不包含返回-1
return p.name.indexOf(val) !== -1
})
}
}
}
})例子二（计算属性）：
- {{p.name}}-{{p.age}}-{{p.sex}}
const vm = new Vue({
el: "#root",
data: {
keyword: "",
person: [{
id: '001',
name: "马冬梅",
age: 18,
sex: '女'
}, {
id: '002',
name: "周冬雨",
age: 28,
sex: '女'
}, {
id: '003',
name: "周杰伦",
age: 13,
sex: '男'
}, {
id: '004',
name: "温兆伦",
age: 45,
sex: '男'
}, ]
},
computed: {
person1() {
return this.person.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
}
}
})10.4、列表排序
在上面用计算属性的列表过滤的基础上增加一个排序功能：
- {{p.name}}-{{p.age}}-{{p.sex}}
const vm = new Vue({
el: "#root",
data: {
keyword: "",
sortType: 0, //0原顺序，1降序，2升序
person: [{
id: '001',
name: "马冬梅",
age: 18,
sex: '女'
}, {
id: '002',
name: "周冬雨",
age: 28,
sex: '女'
}, {
id: '003',
name: "周杰伦",
age: 13,
sex: '男'
}, {
id: '004',
name: "温兆伦",
age: 45,
sex: '男'
}, ]
},
computed: {
person1() {
const arr = this.person.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
//判断是否排序
if (this.sortType) {
arr.sort((a, b) => {
return this.sortType === 1 ? b.age - a.age : a.age - b.age
})
}
return arr
}
}
})穿插：Vue监测数据的原理
1、更新时的一个问题
- {{p.name}}-{{p.age}}
const vm = new Vue({
el: "#root",
data: {
person: [{
id: '001',
name: "马冬梅",
age: 18,
sex: '女'
}, {
id: '002',
name: "周冬雨",
age: 28,
sex: '女'
}, {
id: '003',
name: "周杰伦",
age: 13,
sex: '男'
}, {
id: '004',
name: "温兆伦",
age: 45,
sex: '男'
}, ]
},
methods: {
mdm() {
this.person[0].name = '马老师'
this.person[0].age = 50
this.person[0].sex = '男'
}
}
})上述代码实现更新马冬梅的信息：
点击按钮后成功更新：
但是将methods中的方法改为直接修改整个对象元素：
methods: {
mdm() {
this.person[0] = {
id: '001',
name: "马老师",
age: 50,
sex: "男"
}
}
}
这样点击按钮，信息就没有更新，其实Vue无法监测到直接给数组元素赋的值，下面说说Vue监测数据的原理。
2、监测数据的原理
①Vue会监测data中所有层次的数据，就是即使对象中的对象的属性也能递归监测
②如何监测对象中的数据 通过setter实现监测，且要在new Vue时就传入要监测的数据
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如需要给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/index,value)或vm.$set(target,propertyName/index,value)
③如何监测数组中的数据 通过包裹数组更新的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重写解析模板，进行更新页面
④在Vue修改数组中的某一个元素不能直接赋值，即不能直接带下标赋值，Vue监测不到，就像上面的问题一样，一定要用如下方法：
（1）使用数组的一些API：push()/pop()/shift()/unshift()/splice()/sort()/reverse()
（2）Vue.set()或vm.$set()
当然可以直接改变整个数组。
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象 添加属性
例子：
Vue数据监视
学生信息
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：
-
{{h}}
朋友们：
-
{{f.name}}--{{f.age}}
效果：
每个点击之后
11、收集表单数据
收集表单数据
总结：
-
收集表单数据：
-
若：，则v-model收集的是value值，用户输入的内容就是value值
-
若：，则v-model收集的是value值，且要给标签配置value属性
-
若：
-
没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
-
配置了value属性：
-
v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
-
v-model的初始值是数组，那么收集的就是value组成的数组
-
-
-
v-model的三个修饰符：
-
lazy：失去焦点后再收集数据
-
number：输入字符串转为有效的数字
-
trim：输入首尾空格过滤