VUE---7.事件&循环

最新推荐文章于 2025-02-24 10:14:30 发布

此白非彼白`

最新推荐文章于 2025-02-24 10:14:30 发布

阅读量1.2k

点赞数

分类专栏： VUE 文章标签： javascript 前端开发语言 vue.js 前端框架

本文链接：https://blog.csdn.net/xi_xi_123456/article/details/126513257

版权

VUE 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了Vue.js中的事件处理，包括事件绑定、事件修饰符（如.stop、.prevent等）以及按键修饰符的使用。同时，文章还探讨了循环（v-for）的用法，强调了在循环中使用key属性的重要性及其与Vue的diff算法的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件

1. 绑定事件

2. event事件对象

3. 修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 捕获阶段触发

.self 只在自身(ev.target)触发事件,

.once 只执行一次

.passive 默认行为立即触发,不需等待函数执行完毕 => 感觉不成功(不怎么用)

滚动事件,滚动条执行是等待事件函数执行完毕之后会触发

示例：

<!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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 300px;
            overflow: auto;
        }

        p {
            height: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" @scroll.passive="handlewhell">
            <p>{{name}}</p>
            <p>{{age}}</p>
            <div @click.once="handl">
                <p>1523</p>
                <button @click="handleClick">点击触发</button>
            </div>
        </div>
    </div>
   
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            // 存储数据位置
            data: {
                name: "pxr",
                age: 18,
                sex: "nba"
            },
            // 存储函数位置 
            methods: {
                handleClick(ev) {
                    console.log(ev);
                },
                // 父级事件
                handl(ev) {
                    console.log(ev.target);
                },
                // 滚轮事件
                handlewhell(){
                  for (let index = 0; index < 10000; index++) {
                    console.log(1);
                  }
                }

            }
        })

    </script>
</body>

</html>

二、按键

1. 按键修饰符(内置)

.enter

.tab 配合keydown使用

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

2. 自定义修饰符 event.key

多个单词组成使用连接符 @keyDown.Arrow-Up="handleClick"

示列: @keyDown.w="handleClick"

3. 系统修饰符

.ctrl

.alt

.shift

.meta => mac(command)

按住其中一个按其他键也会触发

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

4. 组合修饰符

根据你所学的修饰符进行组合

补充

1. ev.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>Document</title>
    <style>
      
    </style>
</head>

<body>
    <div id="app">
        <input type="text" @keyDown.up="handleClick">
      
    </div>
   
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            // 存储数据位置
            data: {
                name: "pxr",
                age: 18,
                sex: "nba"
            },
            // 存储函数位置 
            methods: {
                handleClick(ev) {
                    console.log(ev);
                },
                // 父级事件
                handl(ev) {
                    console.log(ev.target);
                },
                // 滚轮事件
                handlewhell(){
                  
                }

            }
        })

    </script>
</body>

</html>

三、循环

A: 指令 v-for="" 执行迭代数据数组循环选中的数据,

B: 设置指令之后根据数据进行循环次数

第一项数据

第二项下标

示例：

<div id="app">

<div v-for="(item,index) of arr"> //谁用v-for谁循环

<p>{{item}}---{{index}}</p>

</div>

</div>

<script>

let vm = new Vue({

el: "#app",

// 存储数据位置

data: {

name: "pxr",

age: 18,

sex: "nba",

arr: ["pxr","lisa","ylc","lusy"]

},

// 存储函数位置

methods: {

}

})

</script>

C:v-for中的key

在我们开发程序时会遇到下面这种问题：

代码如下
<!DOCTYPE html> 
<html lang="zh-CN"> 
<head>
    
    <title>text</title> 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: inherit;
        }
 
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item of arr">{{item}}<input type="text" name="" id=""></li>

        </ul>
        <button @click="handle">CLICK</button>
    </div>
    <script src="../../vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                arr:[1,2,3,4]
            },
            methods:{
                handle() {
                    this.arr.unshift(0)
                }
            }
        })
    </script>
</body>
</html>
运行结果如下

点击CLICK按钮会执行handle函数，像前面添加一个数组

这样看似没有什么问题。。。。

但是如果返回到没有点击按钮事件之前，在第一个输入框里输入一些内容

这个时候再点击CLICK按钮，会出现下面这种情况

这个时候就需要用到‘key’啦~

v-for的key作用外加 diff算法的作用

问题:

diff算法比较的问题, 旧虚拟dom与新虚拟dom比较有问题,

解决添加key属性 :key="唯一值"

key属性 => 让vue根据key属性的标识(唯一值)进行渲染

key属性 => 默认绑定index下标

diff算法相同节点直接引用不相同节点删除重新创建, 内容不会比较

这时我们在v-for后面加入key

<ul>

<li v-for="item of arr" :key="item">{{item}}<input type="text" name="" id=""></li>

</ul>

我们来看一下运行结果

点击CLICK按钮

这就是key的作用，会标识唯一值进行渲染！！