目录
绑定class
条件渲染
列表过滤
列表排序
111{{name}}
111{{name}}
本来class只能出现一个,但是现在:class代表绑定,后面是表达式就行
dom操作通过vue实例里data来动态绑定
1 如果class后是对象,说明参数个数和名字都确定
2 后是数组,说明动态绑定
3 后是字符串
v-show后面是表达式,并且是display为none不是真的删除
但是v-if后面表达式,则没的很彻底
111
333{{name}}
简单交互,点击后n自增
{{n}}
{{name}}dianwo
const vm = new Vue({
el: '#root',
data: {
name: 'fansi',
n: 0
}
})
{{n}}
react
angular
vue
很高的变化频率用v-show
v-else-if
v-else后面别跟条件
如果用v-if,v-else-if,v-else则三者之间不能被打断,即插入别的,不然打断后面的都不奏效
如果想一系列同时出现,用template,不影响结构
11
12
13
但是template只能配合v-if不能配合v-show
v-for
v-for加在谁身上遍历谁,数组长度多长就多少次
总结:
1 用于展示列表数据
2 v-for="(item,index) in xxx" :key="xxx"
3 可遍历:数组,对象,字符串
人员列表
-
{{p.name}}-{{p.age}}
姓名-年龄
-
{{p.name}}--{{p.age}}
-
{{p.name}}-{{p.age}}
姓名-年龄
-
{{k}}--{{value}}
-
{{a}}-{{b}}
姓名-年龄
-
{{k}}--{{value}}
如果key写了该怎么处理:虚拟dom对比算法(diff)
如果没写key该怎么处理:将遍历时候的索引值index自动作为key
react,vue中的key有什么用:
1 虚拟dom中key作用:数据变化时候,vue根据新数据生成新的虚拟dom
如果旧的虚拟dom找到与新的虚拟dom相同的key,如果内容没变直接使用已经转的真实dom(复用dom节点)
-对比key一样但内容不一样,还有就是旧的没找到,直接创新的
将index作为key:如果对数据进行逆序添加,逆序删除等破坏顺序操作,产生没有必要的dom更新,效率低;一旦有输入类dom(input等),就会串行
最好使用能够唯一标识的作为key
列表过滤
1用watch实现:
解决问题关键:过滤条件为空''时候返回的是整个数组
所以用watch完整形式实现,加了immediate能在一开始输入为空时候就执行一次handler
用indexOf表示返回数组里是否包含某个值
const vm = new Vue({
el: '#root',
data: {
keyWord: '',
persons: [
{ id: '001', name: '马冬梅', age: 18 },
{ id: '002', name: '周冬雨', age: 19 },
{ id: '003', name: '周杰伦', age: 18 }
], filpersons: []
},
watch: {
keyWord: {
immediate: true,
//不等输入已经调用一次handler
handler(val) {
this.filpersons = this.persons.filter((p) => {
// p是每个人的对象
return p.name.indexOf(val) !== -1//判断是否包含用indexof,只要不等于-1
//filter会返回一个全新数组,persons变了重新解析模板
})
}
// 非常关键点:在一个数组上indexof一个''空字符串出来的是0
}
}
})
新建一个filpersons存过滤后的数组,由于filter函数是通过返回新的数组但对原数组没有修改的方式进行过滤的
indexof意思是找数组里是否包含val并返回index值,只要不是-1就意味着有
2 computed实现(能用computed实现尽量用从他)
出现问题:watch实现能获得用户输入的新旧值,computed可以通过this.keyword来获得
#region 和#endregion在vscode里能让一段代码隐藏
const vm = new Vue({
el: '#root',
data: {
keyWord: '',
persons: [
{ id: '001', name: '马冬梅', age: 18 },
{ id: '002', name: '周冬雨', age: 19 },
{ id: '003', name: '周杰伦', age: 18 }
]
},
computed: {
filpersons() {
return this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
//判断是否包含用indexof,只要不等于-1
// //filter会返回一个全新数组,persons变了重新解析模板
})
// 注意只有监控时候能收到新旧值,新数组值作为filperson的值,直接return
// 第一个return是计算属性规定的,第二个return是filter规定的,只有返回值才知道filperson是什么
}
}
})
列表排序
注意,对于数组排序:
arr=[1,2,4,3,5,3]
arr.sort((a,b)=>{
return a-b
}
)
这里a和b是获得的前后两个项,现在a-b是升序
new Vue({
el: '#root',
data: {
keyWord: '',
sortType: 0,
persons: [
{ id: '001', name: '马冬梅', age: 18 },
{ id: '002', name: '周冬雨', age: 19 },
{ id: '003', name: '周杰伦', age: 18 }
]
},
computed: {
filpersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
//判断是否包含用indexof,只要不等于-1
// //filter会返回一个全新数组,persons变了重新解析模板
})
// 注意只有监控时候能收到新旧值,新数组值作为filperson的值,直接return
// 第一个return是计算属性规定的,第二个return是filter规定的,只有返回值才知道filperson是什么
// 先过滤再排序
if(this.sortType){
arr.sort((a,b)=>{
return this.sortType===1?p2.age-p1.age: p1.age - p2.age
// sort排序能收到前后两个数据项
})
}
return arr
}
}
})
加了两个按钮,data里一个sorttype进行判断,注意computed要返回值
vue里的监控功能
Object.defineProperty(data,'name',{
get(){
return data.name
读溢出,改uncaught
原因:你想获取值调用get,调用get后又return data.name意味着又要调用get进入死循环,set也是同理
},
set(val){
}
const obs=new Observer(data)创建一个监视的实例对象,监视data中属性变化
function observer(obj){
const keys=object.keys()
}
可以用observer进行模拟
通过setter实现监视,要在new vue时候就传入要检测的数据
对象后追加属性,vue默认不响应式处理
why:_data收集data中数据前先加工,给每个数据匹配一个getter和setter
vue.set只能给data某个对象增加属性,不能对vm或者vm根数据对象增加属性
如果要响应式处理:
vue.set(target,propertyname/index,value)
vm.$set(target,propertyname/index,value)
{{whatt}}
123
methods:{
addwhat(){
Vue.set(this.whatt,
'name','guess')
}
}
vue检测数组中数据
vue修改数组中某个元素实现响应式一定用如下方法:
api:(1)push(),pop(),shift(),unshift(),splice(),sort(),reverse()
(2)vue.set()/vm.$set也能实现响应式第二个参数写索引,第三个写元素
总结:
1 单独改每个属性,因为vue能检测到对象里每个属性
2 将数组中元素单独替换,数据修改成功但vue不能检测到,因为数组元素没有getter和setter,修改数组中元素无法实现响应式
3 更改数组实现响应式,应该调用数组api或者vue.set