【Vue】基础复习

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

用户发起请求时，服务器返回给用户的数据，承载着用户的登录信息等，使用户跳转该服务器其他网页时，不需要重复登录