lecture30-39
1. key作用原理
特别注意里面的“用index作为key引发的问题”
tips:
('abc')indexOf('c') == 3
('abc')indexOf('') == 0
//indexof认为所有字符串里都有空串
2. 案例:模糊搜索
综合了之前学的知识点
<body>
<div id="watch">
<h1>single:diva</h1>
<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>
增加一个排序的功能
<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:
实现的效果:
问题引入:
当年忘写了sex这个项,后来想要添加
使用api:Vue.set()
>官方文档
或 vm.$set()
(_data
可以去掉)
4. 对数组的操作
问题引入
当我想要改变第一个人的信息时,第一种方法可以,第二种方法失效
原因:vue认为,只有在对数组进行了pop\push\shift\unshift\splice\sort\reverse
7种基本操作才会对页面进行更新,(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. 收集表单数据
收集表单数据:
- 若:
<input type="text"/>
,则v-model收集的是value值,用户输入的就是value值。 - 若:
<input type="radio"/>
,则v-model收集的是value值,且要给标签配置value值。 - 若:
<input type="checkbox"/>
- 没有配置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
v-pre
自定义指令
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
在这之后的代码都放在github上面了,这里不再更新