VUE---7.事件&循环

最新推荐文章于 2024-04-24 15:32:41 发布

此白非彼白`

最新推荐文章于 2024-04-24 15:32:41 发布

阅读量1k

点赞数

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

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

版权

一、事件

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(){