VUE学习笔记[30-46]
lecture30-39
1. key作用原理
特别注意里面的“用index作为key引发的问题”
![VUE学习笔记[30-46]_第1张图片](http://img.e-com-net.com/image/info8/1281638bbe474b949906a769c0f5cb60.jpg)
tips：
('abc')indexOf('c') == 3
('abc')indexOf('') == 0//indexof认为所有字符串里都有空串
2. 案例：模糊搜索
综合了之前学的知识点
![VUE学习笔记[30-46]_第2张图片](http://img.e-com-net.com/image/info8/4e4bd3bed77545cbafda3e21501225aa.png)
![VUE学习笔记[30-46]_第3张图片](http://img.e-com-net.com/image/info8/3d982bde2c5f4381b1d65993aa642c18.png)
<body>
<div id="watch">
<h1>single:divah1>
<input type="text" v-model='keyword'>
<ul>
<li v-for="(p,index) of filpersons" :key='p.id'>
{{p.name}}-{{p.age}}
li>
ul>
div>
body>
watch写法
<script type="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;
}
)
}
}
},
})
</script>
compute写法【推荐】
<script type="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;
}
)
}
}
})
</script>
增加一个排序的功能
![VUE学习笔记[30-46]_第4张图片](http://img.e-com-net.com/image/info8/dc0e51d6bf1249d8b40d96fceacbe33d.png)
<button @click = "sortType=0">原序button>
<button @click = "sortType=1">降序button>
<button @click = "sortType=2">升序button>
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：
![VUE学习笔记[30-46]_第5张图片](http://img.e-com-net.com/image/info8/c4456e7c1a044ac3b724d5162fdc5653.jpg)
实现的效果：
![VUE学习笔记[30-46]_第6张图片](http://img.e-com-net.com/image/info8/69d22b28b58f49cb99da4c16698ad46f.jpg)
问题引入：
当年忘写了sex这个项，后来想要添加
![VUE学习笔记[30-46]_第7张图片](http://img.e-com-net.com/image/info8/67f4d176dfff406697fb1aecd21d69f2.jpg)
使用api：Vue.set() >官方文档
或 vm.$set()
（_data可以去掉）
![VUE学习笔记[30-46]_第8张图片](http://img.e-com-net.com/image/info8/19910eb1fb5141d8bf71a0f1c23bc7a3.jpg)
4. 对数组的操作
问题引入
当我想要改变第一个人的信息时，第一种方法可以，第二种方法失效
![VUE学习笔记[30-46]_第9张图片](http://img.e-com-net.com/image/info8/0710c2c577bc4221971ea1851a24f873.jpg)
原因：vue认为，只有在对数组进行了pop\push\shift\unshift\splice\sort\reverse7种基本操作才会对页面进行更新，（VUE对原生的这七中方法重写了）所以上面这个直接修改数组元素的方法失效
可以这样改：
![VUE学习笔记[30-46]_第10张图片](http://img.e-com-net.com/image/info8/7c404c227a4f40b5bd1e89bf8093aef9.jpg)
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. 收集表单数据
![VUE学习笔记[30-46]_第11张图片](http://img.e-com-net.com/image/info8/8a63e1683826459aad9891a65ebd2271.png)
收集表单数据：
- 若：
，则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：输入首尾空格过滤
容器代码：
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区option>
<option value="beijing">北京option>
<option value="shanghai">上海option>
<option value="shenzhen">深圳option>
<option value="wuhan">武汉option>
select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other">textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》a>
<button>提交button>
form>
div>
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指令（没有值）：
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once
![VUE学习笔记[30-46]_第12张图片](http://img.e-com-net.com/image/info8/ca853d78794c4e0492cf20cc1d6d198b.jpg)
v-pre
![VUE学习笔记[30-46]_第13张图片](http://img.e-com-net.com/image/info8/c9e54e65b8e94daa88b2df1de4bc7cf1.jpg)
自定义指令
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
![VUE学习笔记[30-46]_第14张图片](http://img.e-com-net.com/image/info8/bf2493f5e4c446ee981687b0d35c81cf.jpg)
在这之后的代码都放在github上面了，这里不再更新