Vue学习（三）

最新推荐文章于 2024-06-19 11:12:11 发布
最新推荐文章于 2024-06-19 11:12:11 发布
阅读量317 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49113107/article/details/132650548
版权

一、列表渲染

v-for指令

  • 用于展示列表数据

  • 语法<li v-for="(item, index) in items" :key="index"></li>key可以是index,最好是遍历对象的唯一标识

  • 可遍历：数组、对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基本列表</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>人员列表（遍历数组）</h3>
        <ul>
            <li v-for="(p, index) in persons" :key="index">{{p.name}}--{{index}}</li>
        </ul>
        <h3>遍历字符串</h3>
        <ul>
            <li v-for="(char, index) in str" :key="index">{{char}}--{{index}}</li>
        </ul>
        <h3>遍历指定次数</h3>
        <ul>
            <li v-for="(num, index) in 5" :key="index">{{num}}--{{index}}</li>
        </ul>

        <h3>遍历对象</h3>
        <ul>
            <li v-for="(car, index) in cars" :key="index">{{car}}--{{index}}</li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            // 函数形式的data
            data() {
                return {
                    persons: [
                        { id: "001", name: "张三", age: 18 },
                        { id: "002", name: "李四", age: 20 },
                        { id: "003", name: "王五", age: 19 },
                    ],
                    str:"hanzhe",
                    cars:[
                        {name:"保时捷",rice:198},
                        {name:"宝马",rice:208}
                    ]
                }
            }
        })
    </script>
</body>
</html>

 

二、列表渲染中key的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基本列表</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h3>遍历对象</h3>
        <button @click="addCar">添加一个汽车</button>
        <ul>
            <!-- :key用作固定值 -->
            <li v-for="(car, index) in cars" :key="1">{{car.name}}--{{car.rice}} <input type="text"></li> 
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            // 函数形式的data
            data() {
                return {
                    cars: [
                        { name: "保时捷", rice: 198 },
                        { name: "宝马", rice: 208 }
                    ]
                }
            },
            methods: {
                addCar(){
                    // 在后面加个数据没问题
                    // this.cars.push({ name: "宝马1", rice: 203 })
                    this.cars.unshift({ name: "宝马1", rice: 203 })
                }
            },
        })
    </script>
</body>
</html>

 key用固定值后，看一个现象看一个现象

点击添加按钮后：

分析：

面试题：react、vue中key有什么作用？

  • 虚拟DOM中key的作用：key是虚拟DOM中对象的标识，但数据发生变化时，vue会根据新的数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧的DOM的差异进行比较，比较规则如下

  • 对比规则

  • 旧虚拟DOM中找到了新虚拟DOM相同的key

    • 若虚拟DOM中内容没变，直接使用之前的真实DOM

    • 若虚拟DOM内容改变了，则生成新的真实DOM，随后替换页面中之前的真实DOM

  • 旧虚拟DOM中未找到与新虚拟DOM相同的key

    创建新的真实DOM，随后渲染到页面上

  • 用index作为key可能会引发的问题

  • 若对数据进行逆序添加，删除等破坏顺序的操作，会产生没必要真实DOM更新，界面效果没问题，但是效率低下

  • 若结构中还包含输入类的DOM，会产生错误DOM更新，界面有问题

  • 开发中如何选择Key?

    最好每条数据的唯一标识作为key

    如果仅仅是在页面渲染，使用index作为key完全没问题。

三、列表过滤

分别使用计算属性和监听实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基本列表</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>遍历对象</h3>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(car, index) in filterCars" :key="index">{{car.name}}--{{car.rice}}</li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            // 函数形式的data
            data() {
                return {
                    keyWord: '',
                    cars: [
                        { name: "保时捷", rice: 198 },
                        { name: "宝马", rice: 208 }
                    ],
                    filterCars: []
                }
            },
            // 使用计算属性
            // computed: {
            //     filterCars: {
            //         get() {
            //             return this.cars.filter((p) => {
            //                 // 过滤空格
            //                 return p.name.indexOf(this.keyWord) !== -1;
            //             })
            //         },
            //         set(value) {
            //             alert(value)
            //         }
            //     }
            // }

            // 使用监听属性
            // 需要在data中添加 filterCars:[]

            watch: {
                keyWord: {
                    immediate:true,
                    handler(newValue) {
                        this.filterCars = this.cars.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1;
                        })
                    }
                }
            }
        })
    </script>
</body>

</html>

四、列表排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基本列表</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>遍历对象</h3>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button v-on:click="btn1">价格降序</button>
        <button @click="btn2">价格升序</button>
        <button @click="btn3">原来降序</button>
        <ul>
            <li v-for="(car, index) in filterCars" :key="index">{{car.name}}--{{car.rice}}</li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            // 函数形式的data
            data() {
                return {
                    keyWord: '',
                    sortType: 0,
                    cars: [
                        { name: "保时捷", rice: 198 },
                        { name: "保马", rice: 208 },
                        { name: "保马2", rice: 309 },
                        { name: "雷克萨斯", rice: 500 }
                    ],
                    filterCars: []
                }
            },
            methods: {
                btn1(event) {
                    this.sortType = 2
                },

                btn2() {
                    this.sortType = 1
                },

                btn3() {
                    this.sortType = 0
                }
            },
            // 使用监听属性
            // 需要在data中添加 filterCars:[]
            watch: {
                keyWord: {
                    immediate: true,
                    handler(newValue) {
                        const arr = this.cars.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1;
                        })

                        // 非 0 即true
                        if (this.sortType) {
                            arr.sort((p1, p2) => {
                                return this.sortType == 1 ? p2.rice - p1.rice : p1.rice - p2.rice
                            })
                        }
                        // 将排序后的数据赋值
                        this.filterCars = arr;
                    }
                }
            }
        })
    </script>
</body>
</html>

五、数据监视

data属性是对象时，修改对象可能不能触发MVVM的变化：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-基本列表</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h3>遍历对象</h3>
        <button v-on:click="updatebmw2">修改宝马2的数据</button>
        <ul>
            <li v-for="(car, index) in cars" :key="index">{{car.name}}--{{car.rice}}</li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: "#root",
            // 函数形式的data
            data() {
                return {
                    cars: [
                        { name: "保时捷", rice: 198 },
                        { name: "保马", rice: 208 },
                        { name: "保马2", rice: 309 },
                        { name: "雷克萨斯", rice: 500 }

                    ]
                }
            },
            methods: {
                updatebmw2() {
                    // 将数组中存下标2开始，删除一个，并添加后面的数据
                    // 数组改变了，能触发mvvm模型的变化
                    // this.cars.splice(2,1,{ name: "保马2", rice: 109 }) 


                    // 数据虽然变化了，但是没有触发data上数据的变化
                    // this.cars[2] = { name: "保马2", rice: 109 }

                    // 生效的
                    this.cars[2].name = "名称修改了";
                    console.log(JSON.stringify(this.cars))
                }
            },
            // 使用监听属性
            // 需要在data中添加 filterCars:[]
            watch: {
                keyWord: {
                    immediate: true,
                    handler(newValue) {
                        const arr = this.cars.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1;
                        })
                        // 将排序后的数据赋值
                        this.filterCars = arr;
                    }
                }
            }
        })
    </script>
</body>

</html>

模拟一个数据监视：

let data = {
  name: '尚硅谷',
  address: '北京',
}

function Observer(obj) {
  // 汇总对象中所有的属性形成一个数组
  const keys = Object.keys(obj)
  // 遍历
  keys.forEach((k) => {
    Object.defineProperty(this, k, {
      get() {
        return obj[k]
      },
      set(val) {
        console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
        obj[k] = val
      }
    })
  })
}

// 创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data)
console.log(obs)

// 准备一个vm实例对象
let vm = {}
vm._data = data = obs

原理：

  • vue会监视data中所有层次的数据

  • 如何监测对象中的数据？

  • 通过setter实现监视，且要在new Vue（）时传入要检测的数据

    • 兑现创建后追加的属性vue默认不做响应式处理

    • 如果需要给后添加的属性做响应式，使用如下API
      Vue.set(target,propertyName/index,value)
      vm.$set(target,propertyName/index,value)

  • 如何检测数组中的数据
    通过包裹数组新元素的方法实现，本质做了两件事
    调用原生对应的方法对数组进行更新
    重新解析模板，进而更新页面

  • 在vue修改数组的某个元素时，用如下方法
    push,pop,unshift,shift,splice,sort,reverse这几个方法被Vue重写了
    特别注意：vue.set()和vm.$set()不能给vm或vm的根对象（data）添加属性

<title>总结数据监视</title>
<style>button {margin-top: 10px;}</style>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h1>学生信息</h1>
  <button @click="student.age++">年龄+1岁</button> <br />
  <button @click="addSex">添加性别属性，默认值：男</button> <br />
  <button @click="student.sex = '未知' ">修改性别</button> <br />
  <button @click="addFriend">在列表首位添加一个朋友</button> <br />
  <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br />
  <button @click="addHobby">添加一个爱好</button> <br />
  <button @click="updateHobby">修改第一个爱好为：开车</button> <br />
  <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
  <h3>姓名：{{ student.name }}</h3>
  <h3>年龄：{{ student.age }}</h3>
  <h3 v-if="student.sex">性别：{{student.sex}}</h3>
  <h3>爱好：</h3>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">{{ h }} </li>
  </ul>
  <h3>朋友们：</h3>
  <ul>
    <li v-for="(f,index) in student.friends" :key="index">{{ f.name }}--{{ f.age }}</li>
  </ul>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      student: {
        name: 'tom',
        age: 18,
        hobby: ['抽烟', '喝酒', '烫头'],
        friends: [
          { name: 'jerry', age: 35 },
          { name: 'tony', age: 36 }
        ]
      }
    },
    methods: {
      addSex() {
        // Vue.set(this.student,'sex','男')
        this.$set(this.student, 'sex', '男')
      },
      addFriend() {
        this.student.friends.unshift({ name: 'jack', age: 70 })
      },
      updateFirstFriendName() {
        this.student.friends[0].name = '张三'
      },
      addHobby() {
        this.student.hobby.push('学习')
      },
      updateHobby() {
        // this.student.hobby.splice(0,1,'开车')
        // Vue.set(this.student.hobby,0,'开车')
        this.$set(this.student.hobby, 0, '开车')
      },
      removeSmoke() {
        this.student.hobby = this.student.hobby.filter((h) => {
          return h !== '抽烟'
        })
      }
    }
  })

 

一季春秋
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
三开关threeSwitch（三态门）vue组件
09-02
通过学习和理解这个"三开关threeSwitch（三态门）vue组件"，开发者可以加深对Vue.js组件化开发的理解，掌握如何构建交互式UI，并熟悉TypeScript在前端开发中的应用。对于想要提升Vue.js技能或者学习TypeScript的人来...
vue列表渲染 v-for
xiaowude_boke的博客
02-16 719
vue中v-for遍历数组 对象 字符串
前端Vue v-for 的使用
A乐神的博客
01-28 1787
前端Vue v-for 的使用
vue基础知识
m0_65491952的博客
08-08 289
M：Model（模型） 对应data的数据V：View（视图） 模板==>页面VM：ViewModel（视图模型） Vue实例对象。
vue v-for循环列表，点击当前项（每一项），通过后台数据id进行url传参，进行页面(路由)跳转到同一个页面
好巧的博客
12-04 1万+
官方解释：当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。在项目中经常遇到，用v-for循环出一个列表，点击当前项跳转到另一个页面，跳转后的页面使用的是同一个页面的基础结构，这个时候就需要使用url传参传值给后台，来返回不同数据用于渲染页面。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。// 接收到a.vue页面传递的id。// 编程式导航路由跳转。
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 5824
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
vue学习 三种常用传值方式 $emit的用法 slot与slot-scope
04-02
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发为核心，极大地提高了开发效率。在Vue应用中，数据的传递和组件间的通信是非常重要的部分。...不断学习和实践，将使你在Vue.js的开发领域更加游刃有余。
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Axios则是一个常用的第三方库，用于在Vue中发起HTTP请求，与后端服务器进行数据交互。Vuex是Vue的状态管理库，用于集中管理组件间的共享状态，解决复杂应用中的数据同步问题。 Vue实战项目通常会结合Element UI这样...
Vue学习之旅Part7：三种Vue的动画实现方式及列表的动画效果
01-08
在Vue中 有三种动画的实现方式 分别是： 使用过渡类名实现 使用第三方animate.css实现 使用钩子函数实现 下面将一一介绍： 1、使用过渡类名实现 首先 来了解一下动画的过渡类名： ( 这是我在Vue官网找到的一个示意...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
v-for循环的使用方法
qq_44130891的博客
05-18 1275
v-for
v-for遍历对象(value，key，index)和遍历数组(item，index)
WYB_BOOM的博客
09-14 1329
v-for遍历对象和数组的传参区别
Vue 基础
stanwuc的博客
07-09 220
一、概述 1、什么是 vue Vue是一套构建用户界面的渐进式框架 Vue是一个构建 数据驱动的 web 界面 的库，其目标是通过简单的 API 实现 响应的数据绑定 和 组合的视图组件 Vue只聚焦于视图层，更像是一个 视图模版引擎，但是也能作为一个框架使用，提供了完备的支持 2、vue 的特点 声明式渲染：直接告诉框架你需要什么，具体怎么渲染由框架的底层来实现，而命令式的话就是需要一步一...
关于v-for的item-index-key的理解
qq_25327339的博客
10-17 945
【代码】关于v-for的item-index-key的理解。
实现在v-for的Div里面列表循环滚动效果
最新发布
小金子J的博客
06-19 811
本文介绍了在Vue.js框架中实现列表循环滚动效果的两种方法。第一种方法是使用vue-seamless-scroll插件，它提供了丰富的配置选项，可以快速实现无缝滚动效果。第二种方法是通过纯JavaScript实现，这需要编写获取数据的逻辑、滚动动画的JavaScript代码，并在组件的生命周期钩子中进行相应的处理。同时，文章还提供了相应的CSS样式，确保滚动效果的展示。
在vue中，v-for的索引index在html中的使用
沿华的博客
01-04 9280
使用vue时如何获取v-for数组的下标index值的方法
热门推荐
weixin_43968782的博客
10-28 2万+
<div v-for="(item,index) in arr" : key="index" @click="getIndex(item,index)"> <p>{{item}}</p> </div> methods:{ getIndex(item,index){ console.log(item,index) //这里的item是点击获取当前值的每一项内容 //这里的index是点击获取当前值的下标 } } ...
vue v-for 数据处理
wngzhem的博客
11-18 2万+
v-for的使用的方法，和注意事项。v-for 给了两个参数 key 和 index 这里需要对遍历的数据 分为 数组 和 对象分别对待 数组下是没有 key值的 而对象下可以得到参数key值 实际显示效果如下：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一季春秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值