-
一Vue基础：绑定样式、条件渲染、列表渲染、列表过滤
目录
1. 绑定样式
1.1绑定class样式
- 字符串写法：样式类名不确定，需要动态指定
- 数组写法：绑定的样式个数不确定，名字不确定
- 对象写法：绑定样式个数确定，名字确定，动态决定用不用
1.2 绑定style样式
- 对象写法（常用） ：{{name}}
- 数组写法（少用）： {{name}}
2. 条件渲染
v-show：使用频率高的情况下使用，通过控制display的值来显示隐藏元素
v-if：使用频率低的情况下使用，通过操作dom节点的新增和删除来显示隐藏元素
v-if 、v-else-if、v-else 这三个必须连续使用，不允许被打断，
v-else建议最好不要写条件，这是没有意义的
标签不影响结构，能与v-if 搭配使用，不能和v-show搭配使用
3. 列表渲染
3.1 列表渲染
1. 遍历数组（多）
- <h2>人员列表（遍历数组）h2>
- <ul>
- <li v-for="(p,index) of persons" :key="index">
- {{p.name}}-{{p.age}}
- li>
- ul>
2. 遍历数组
- <h2>汽车信息（遍历对象）h2>
- <ul>
- <li v-for="(value,k) of car" :key="k">
- {{k}}-{{value}}
- li>
- ul>
3. 遍历字符串（少）
- <h2>测试遍历字符串（用得少）h2>
- <ul>
- <li v-for="(char,index) of str" :key="index">
- {{char}}-{{index}}
- li>
- ul>
4. 遍历次数（少 ）
- <h2>测试遍历指定次数（用得少）h2>
- <ul>
- <li v-for="(number,index) of 5" :key="index">
- {{index}}-{{number}}
- li>
- ul>
3.2 key 原理
真实的dom是没有key的，虚拟dom有key，vue 会将初始的虚拟dom和新虚拟dom 使用 diff 对比算法进行比对，最后将虚拟dom转为真实dom
3.2.1 如果没有指定key，diff 算法会将下标作为key值，会引发如下问题：
- 数据对比时：逆序添加，逆序删除等破坏顺序操作；会产生没有必要的真实dom 更新 =》界面效果没有问题，但是效率低
- 结构中包含输入类dom：会产生错误的dom更新 =》界面有问题
3.2.2 虚拟DOM 中key的作用：（面试常问）
key 是DOM对象的标识，当数据发生变化时，vue 会根据新数据生成虚拟DOM，随后vue将新的虚拟DOM与旧虚拟DOM的差异使用diff算法进行比较，最后创建新的真实DOM
3.2.3 diff算法 对比规则：
- 旧虚拟DOM 与新虚拟DOM 找到了相同的key：
- 内容没变，使用原来的真实DOM
- 内容改变，生成新的真实DOM，替换原来的真实DOM
- 旧虚拟DOM与新虚拟DOM为找到相同的key：
- 创建真实DOM渲染到页面
3.2.4 开发中正确选择key
最好使用每条数据中唯一标识作为key，如学号，身份证号，手机号
如果不存在对数据的逆序添加、逆序删除等破坏顺序等操作，仅用于渲染列表展示，使用index 作为key 是没有问题的
3.3 列表过滤
filter（）过滤函数
indexOf 如果为空，则包含里面所有的数据
indexOf 包含该元素返回元素索引值，不包含返回-1
列表过滤不要修改原数据，原数据修改了就回不去了
原理：创建一个新数组，存放过滤出来的数据
3.3.1 watch 监视实现
- html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>列表过滤title>
- <script type="text/javascript" src="../js/vue.js">script>
- head>
- <body>
- <div id="root">
- <h2>人员列表h2>
- <input type="text" placeholder="请输入名字" v-model="keyWord">
- <ul>
- <li v-for="(p,index) of filPerons" :key="index">
- {{p.name}}-{{p.age}}-{{p.sex}}
- li>
- ul>
- div>
- <script type="text/javascript">
- Vue.config.productionTip = false
- //用watch实现
- new Vue({
- el:'#root',
- data:{
- keyWord:'',
- persons:[
- {id:'001',name:'马冬梅',age:19,sex:'女'},
- {id:'002',name:'周冬雨',age:20,sex:'女'},
- {id:'003',name:'周杰伦',age:21,sex:'男'},
- {id:'004',name:'温兆伦',age:22,sex:'男'}
- ],
- filPerons:[]
- },
- watch:{
- keyWord:{
- immediate:true,
- handler(val){
- this.filPerons = this.persons.filter((p)=>{
- return p.name.indexOf(val) !== -1
- })
- }
- }
- }
- })
- script>
- html>
3.3.2 compute 计算属性实现 （推荐使用）
原理：计算属性在一开始时和所依赖的数据发生变化时调用
- html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>列表过滤title>
- <script type="text/javascript" src="../js/vue.js">script>
- head>
- <body>
- <div id="root">
- <h2>人员列表h2>
- <input type="text" placeholder="请输入名字" v-model="keyWord">
- <ul>
- <li v-for="(p,index) of filPerons" :key="index">
- {{p.name}}-{{p.age}}-{{p.sex}}
- li>
- ul>
- div>
- <script type="text/javascript">
- Vue.config.productionTip = false
- //用computed实现
- new Vue({
- el:'#root',
- data:{
- keyWord:'',
- persons:[
- {id:'001',name:'马冬梅',age:19,sex:'女'},
- {id:'002',name:'周冬雨',age:20,sex:'女'},
- {id:'003',name:'周杰伦',age:21,sex:'男'},
- {id:'004',name:'温兆伦',age:22,sex:'男'}
- ]
- },
- computed:{
- filPerons(){
- return this.persons.filter((p)=>{
- return p.name.indexOf(this.keyWord) !== -1
- })
- }
- }
- })
- script>
- html>
3.4 列表排序
顺序、降序和原顺序
知识储备：
- sort （）是改变原数组的
- 升序：sort （（a,b）=> { return a-b}）
- 降序：sort （（a,b）=> { return b-a}）
- <body>
- <div id="root">
- <h2>人员列表h2>
- <input type="text" placeholder="请输入名字" v-model="keyWord">
- <button @click="sortType = 2">年龄升序button>
- <button @click="sortType = 1">年龄降序button>
- <button @click="sortType = 0">原顺序button>
- <ul>
- <li v-for="(p,index) of filPerons" :key="p.id">
- {{p.name}}-{{p.age}}-{{p.sex}}
- <input type="text">
- li>
- ul>
- div>
- <script type="text/javascript">
- Vue.config.productionTip = false
- new Vue({
- el:'#root',
- data:{
- keyWord:'',
- sortType:0, //0原顺序 1降序 2升序
- persons:[
- {id:'001',name:'马冬梅',age:30,sex:'女'},
- {id:'002',name:'周冬雨',age:31,sex:'女'},
- {id:'003',name:'周杰伦',age:18,sex:'男'},
- {id:'004',name:'温兆伦',age:19,sex:'男'}
- ]
- },
- computed:{
- filPerons(){
- const arr = this.persons.filter((p)=>{
- 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
- }
- }
- })
- script>
3.5 列表更新时的一个问题
- <div id="root">
- <h2>人员列表h2>
- <button @click="updateMei">更新马冬梅的信息button>
- <ul>
- <li v-for="(p,index) of persons" :key="p.id">
- {{p.name}}-{{p.age}}-{{p.sex}}
- li>
- ul>
- div>
- <script type="text/javascript">
- Vue.config.productionTip = false
- const vm = new Vue({
- el:'#root',
- data:{
- persons:[
- {id:'001',name:'马冬梅',age:30,sex:'女'},
- {id:'002',name:'周冬雨',age:31,sex:'女'},
- {id:'003',name:'周杰伦',age:18,sex:'男'},
- {id:'004',name:'温兆伦',age:19,sex:'男'}
- ]
- },
- methods: {
- updateMei(){
- // this.persons[0].name = '马老师' //奏效
- // this.persons[0].age = 50 //奏效
- // this.persons[0].sex = '男' //奏效
- // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
- this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
- }
- }
- })
- 当点击更新按钮时，列表已经改变，但是vue没有检测到变化，开发者工具
- 如果是先点开发者工具，再点按钮，则不会呈现已经变化的列表
- 如果是先点更新按钮，再点开发者工具，则呈现已经变化的列表
3.5.1 vue监测数据的原理
vue 检测数据原理：
1. vue 监视data中所有层次的数据
2. 如何检测对象中的数据：
- 通过setter实现监视，且在 new vue 时传入检测的数据
- 对象中追加属性，vue 默认不做响应式处理
- 如需响应式处理，请使用如下API：
- Vue.set(target, propertyName/index, value)
- vm.$set(target, propertyName/index, value)
3. 如何检测数组中的数据：
通过包裹数组元素的方法实现，本质是做了两件事：
- 调用原生对呀的方法对数组进行更新
- 重新解析模板，进而更新页面
4. 在Vue 修改数组中的某个元素一定要用如下方法：
API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或者 vm.$set()
注意：Vue.set() 和 vm.$set() 不能给vm 或者vm的根数据对象（vm._data）添加属性
vue 监测对象数据改变:只要修改数据，多层嵌套的都可以， set 和get就会监测到，就会重新生成模板，生成虚拟dom.....
如果数据是undefined，页面上是不显示的且不会报错，
后添加的数据是没有响应式的
数组的子元素没有setter和getter ，需要通过修改数组本身去触发这个数组的setter和getter完成更新
- push 后面添加元素
- pop 后面删除元素
- shift 前面删除一个元素
- unshift 前面添加一个元素
- splice（索引值，替换长度，内容 ） 指定位置替换、添加、删除元素
- sort 排序
- reverse 反转
不能对数组进行赋值操作，如hobby[0]
-
相关阅读:
快速搭建SSM框架
实验2 朴素贝叶斯和SVM 实操项目2 肿瘤分类与预测（SVM）
再下一城 | “GBASE数据库中华行—上海站”圆满落幕
基于gunicorn+flask+docker模型高并发部署
.NET Core(.NET6)中gRPC使用
解密全产业供应关系，助力企业寻找客户资源，洞察商机
Wireshark数据包分析——时间盲注/延时注入攻击
Linux命令200例：apt-get软件包管理工具的使用
【wiki知识库】05.分类管理实现--前端Vue模块
《web课程设计》基于HTML+CSS+JavaScript典的中医药大学网(11个页面)
- 原文地址：https://blog.csdn.net/weixin_49555741/article/details/125961937
