黑马前端学习笔记（从vue2.0到vue3.0）第四天P53-P73

P53条件渲染指令

   v-if 

原理：每次动态创建或移除元素，实现元素的显示和隐藏

 扩展 v-if  后续可以跟 v-else-if  最后可以写  v-else

   v-show  

原理：动态为元素添加或移除样式，来实现元素的显示和隐藏

P55列表渲染指令

v-for

 基础语法  ** in  list  操作 **就可以了 

或者 （**，index）in list  index可以看成为数组下标 

这两个数值都是形参 不需要固定写 可以写成index 也可以写成xxx

记得绑定 ：key=“id（唯一性）” key的值 只能是字符串或者数字类型

index  数组下标没有强制绑定的作用

P61 知识点（只能在vue2.0使用 ）

过滤  this.list.filter（item => item.id !== id）

类似于java的过滤   其中 item 为形参  形参.id 指的是数组中的id  后者id为传入的id 

过滤后 会形成新的数组 

但 后期都有需要数据库支持 一般不会再这边 做删除操作 与新增操作 

这小案例我看了看 没有手动敲

P65 过滤器（只能在vue2.0使用 ）

{{xxx | 过滤器}} 写法

在new 的VUE中 与data平级定义  这叫私有过滤器

filters：{ }           // 存放过滤器

a（形参）{             //过滤器中一定有返回值

return

}

P66 全局过滤器

与new vue平级

Vue.filter（过滤器的名字，function(形参){}）

P68过滤器特性

1.可以连续使用过滤器  |  |  | 

2.过滤器传参

p69侦听器

与过滤器一样 侦听器 也是写在 new Vue中 与data平级

需要对话框绑定 v-model 

watch：{

 绑定方法都会接收两个形参   a（新改动的值，旧值）

}

应用场景一般为  名字是否被占用  百度形式下拉框

P71侦听器扩展immediate选项

侦听器两种格式

对象格式的侦听器格式如下：

watch：{

 a：{

handler（新改动的值，旧值）{

}，

immediate：true  是否刷新页面触发一次

}

}

P72侦听器扩展deep选项

这个选项就是解决 侦听器 侦听不到对象中属性的变化

麻烦：

watch：{

 a：{

handler（新改动的值，旧值）{

}，

deep：true 深度侦听 对象变化也能被侦听

}

}

简单：

如果要侦听的是对象的子属性

watch:{

'a.name'(新值){

}

}