JS|VUE学习笔记[30-46] 前端|javascript|vue.js

lecture30-39 1. key作用原理特别注意里面的“用index作为key引发的问题”

文章图片

tips：
('abc')indexOf('c') == 3
('abc')indexOf('') == 0//indexof认为所有字符串里都有空串

2. 案例：模糊搜索综合了之前学的知识点

文章图片

single:diva {{p.name}}-{{p.age}}

watch写法

="text/javascript"> new Vue({ el: "#watch", data: { keyword: "", persons: [ { id: "001", name: "gaga", age: '34' }, { id: "002", name: "adele", age: '20' }, { id: "003", name: "beyonce", age: '30' }, { id: "004", name: "cardib", age: '40' } ], filpersons: [] }, //watch写法 watch: { keyword: { immediate: true, handler(newk) { this.filpersons = this.persons.filter((p) => { return p.name.indexOf(newk) !== -1; } ) }} }, })

compute写法【推荐】

="text/javascript"> new Vue({ el: "#watch", data: { keyword: "", persons: [ { id: "001", name: "gaga", age: '34' }, { id: "002", name: "adele", age: '20' }, { id: "003", name: "beyonce", age: '30' }, { id: "004", name: "cardib", age: '40' } ], }, //compute写法 computed: { filpersons() { return this.persons.filter((p) => { //这里p是this.persons的形参 return p.name.indexOf(this.keyword) !== -1; } ) } } })

【JS|VUE学习笔记[30-46]】增加一个排序的功能

文章图片

computed: { filpersons() { const arr = this.persons.filter((p) => { //这里p是this.persons的形参 return p.name.indexOf(this.keyword) !== -1; } ) if(this.sortType){ arr.sort((p1,p2)=>{ return this.sortType === 1? p2.age-p1.age : p1.age - p2.age }) } return arr } }

3. VUE检测数据的原理 VUE的监测原理
重写了实例对象vm：

文章图片

实现的效果：

文章图片

问题引入：
当年忘写了sex这个项，后来想要添加

文章图片

使用api：Vue.set() >官方文档

文章图片

或 vm.$set()

文章图片

（_data可以去掉）

文章图片

4. 对数组的操作问题引入
当我想要改变第一个人的信息时，第一种方法可以，第二种方法失效

文章图片

原因：vue认为，只有在对数组进行了pop\push\shift\unshift\splice\sort\reverse7种基本操作才会对页面进行更新，（VUE对原生的这七中方法重写了）所以上面这个直接修改数组元素的方法失效
可以这样改：

文章图片

5. 一个小练手汇总了上面VUE监测的知识点：
YOUTUBE地址
6. 数据监视的总结【↑】对上面的总结

P.S. 这一节在37课，这一节的练习也应该跟着敲一下的，但是我没有时间就先跳过去了，有机会一定要回来敲一下。

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value)或
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2. Vue.set()或 vm.$set()
特别注意：Vue.set()和 vm.$set()不能给vm 或 vm的根数据对象添加属性！！！

7. 收集表单数据

文章图片

收集表单数据：

若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

容器代码：

账号：密码：年龄：性别：男女爱好：学习打游戏吃饭所属校区 v-model="userInfo.city"> 其他信息：阅读并接受《用户协议》

js代码：

new Vue({ el:'#root', data:{ userInfo:{ account:'', password:'', age:18, sex:'female', hobby:[], city:'beijing', other:'', agree:'' } }, methods: { demo(){ console.log(JSON.stringify(this.userInfo)) } } })

过滤器不看了 VUE3删除了

Lecture 40-46 内置指令
v-text指令

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-clock v-cloak指令（没有值）：