vue
基础复习
watch
监听器
正常格式:
watch:{
(要监听的数据):{
immediate:true // 自动先执行一次
deep:true // 深度监视
handler(newVal,oldVal){
...
}
}
}
简写格式:
watch:{
(要监听的数据) (newVal,oldVal){
...
}
}
此时不能使用immediate
和deep
要监视的数据:先简写,需要用到以下两个功能时,写完整格式
immediate:对监视的数据先进性一次监听
deep:用于监听该数据以下有数据改变的地方
this
指向问题
所有被vue
管理的函数,最好写成普通函数,使this
指向vm
或者组件实例对象
所有不被vue
管理的函数,如定时器回调函数,promise
回调函数,ajax
回调函数,最好写成箭头函数,也使this
指向vm
或者组件实例对象
绑定style
样式(了解)
绑定的可以是个对象{}
,可以是个数组[]
虚拟DOM
v-for
循环数据的过程使由虚拟DOM
转换成真实DOM
,虚拟DOM
是存在于内存中的
key
是虚拟DOM
的唯一表示,在真实DOM
中不会存在
当虚拟DOM
中数据发生了改变,原本的虚拟DOM
会和现在的虚拟DOM
进行对比,而key
就是他们之间的唯一标识
为了提高数据的复用性,每条数据的节点都会进行比较,两者相同的地方会直接复用,不同的地方将会重新渲染
所以就要保证key
的值是唯一的,保证虚拟DOM
中节点和key
一直相同
也可以使用index
为key
的值,可以将数据由后边开始添加
实现数据过滤效果
配合过滤器filter
和索引indexOf
filter
用来获取数组中的每个对象
indexOf
用来判断该项中是否存在该值
return
,并重新渲染页面
immediate
的作用,使他自动运行一遍,此时val
的值为
空,会使list
数组中的数据全部渲染出来
keyword:{
immediate:true,
handler(val){
this.newList = this.list.filter((p) => {
return p.uname.indexOf(val) !== -1
})
}
}
升序降序切换
arr.sort((a, b)=> {
return this.sortType == 1 ? b.age - a.age : a.age - b.age;
});
用sortType
来判断当前选择的是升序还是降序
用sort
函数来执行业务逻辑
数据代理
通过一个对象去展示或修改另一个对象中的属性值
<script>
let obj = {a:100}
let obj2 = {b:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.a
},
set(val){
return obj.a=val
}
})
</script>
Vue
监听数据
在创建完成之后,可以直接获取或者修改任意属性的属性值
但不能直接对属性进行添加操作
因为直接添加操作只能创建该键值对,不能配套生成该属性的getter
和seter
,此时该数据并没有响应式功能,更不会被渲染到页面当中
此时Vue
中可以使用
Vue.set(target,key,val) 或
Vm.$set(target,key,val)
该api
,此方法可以使后来创建的属性与一开始创建的属性功能相同
target目标对象是vm._data.属性,不能直接添加到 _data下
v-model
注意
是获取标签的value
值
像有的input
表单没有value
的可以手动添加value
属性
三个修饰符
lazy
:失去焦点再收集数据
number
:把输入的有效字符转换成数字
trim
:输入框收尾空格过滤
cookie
用户发起请求时,服务器返回给用户的数据,承载着用户的登录信息等,使用户跳转该服务器其他网页时,不需要重复登录