VUE学习笔记[30-46]

最新推荐文章于 2024-01-11 23:52:09 发布

Stupid小池

最新推荐文章于 2024-01-11 23:52:09 发布

阅读量456

点赞数

分类专栏： JS 文章标签： vue.js 前端 javascript

iamzchi

本文链接：https://blog.csdn.net/weixin_44986776/article/details/122788701

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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\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. 收集表单数据

在这里插入图片描述

收集表单数据：

若：<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上面了，这里不再更新

Stupid小池

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE学习笔记[30-46]

lecture30-401. key作用原理特别注意里面的“用index作为key引发的问题”tips：('abc')indexOf('c') == 3('abc')indexOf('') == 0//indexof认为所有字符串里都有空串2. 案例：模糊搜索综合了之前学的知识点<body> <div id="watch"> <h1>single:diva</h1> <input type
复制链接

扫一扫