Vue教程(二):数据代理和事件处理

news2024/11/18 5:46:48

1、数据代理

数据代理

通过obj2操作obj1的对象

<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">

    </div>
</body>
<script type="text/javascript">
    let obj1 = {x:100};
    let obj2 = {y:200};

    Object.defineProperty(obj2, 'x', {
        get(){
            return obj1.x;
        },
        set(value){
            obj1.x = value;
        }
    })
</script>
</html>

在浏览器控制台测试结果:
在这里插入图片描述

2、事件处理

2.1 事件处理基础

完整代码

<!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 type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}的Vue教程</h2>
    <el-button type="primary" @click="showInfo1">点我提示信息1【不传参数】</el-button>
    <el-button type="primary" @click="showInfo2($event, 35)">点我提示信息2【传参数】</el-button>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    // data的两种写法
    const vm = new Vue({
        el: '#root',
        data(){
            return{
                name: 'NoBug',
            }
        },
        methods:{
            showInfo1(event){
                console.log(event);
                console.log(this); // 此处的this是vm
                alert("Hello, Welcome to NoBug learning.")
            },
            showInfo2(event, value){
                console.log(event, value);
                console.log(this); // 此处的this是vm
                alert("Hello, Welcome to NoBug learning..." + value)
            }

        }
    })
</script>
</html>

总结

  • 使用v-on:xxx@xxx 绑定事件,其中xxx是事件名
  • 事件的回调需要配置在methods对象中,最终会在vm上
  • methods中配置的函数,不要用箭头函数!否在this就不是vm了
  • methods中配置的函数,都是被vue所管理的函数,this的指向是vm或组件实例对象
  • @click="function"@click="function($event)",效果一致,但后者可以传参数,不会覆盖点击事件默认传的event参数。

2.2 事件修饰符

六大修饰符介绍

前三个用的比较多,后三个了解一下即可

  • prevent:阻止默认事件
  • stop:阻止事件冒泡
  • once:事件只触发一次
  • capture:使用事件的捕获模式
  • self:只有event.target是当前操作的元素时才会触发
  • 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>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin-top: 30px;
        }
        .demo1{
            border: 2px solid black;
            padding: 10px;
        }
        .box1{
            padding: 5px;
            border: 2px solid green;
        }
        .box2{
            border: 2px solid red;
        }
        .list{
            height: 200px;
            width: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}的Vue教程</h2>
    <!--    阻止默认事件:我们点击按钮之后,只会弹出提示信息,不会跳转到a标签所指定的href链接-->
    <a href="https://blog.csdn.net/WwLK123?spm=1011.2421.3001.5343" @click.prevent="showInfo">点我提示信息</a>
    <!--    阻止事件冒泡:一般情况下,我们点击按钮的事件之后,首先会弹出一次提示信息,但是接着也会触发div所绑定的点击事件再次弹出提示信息。我们给按钮绑定.stop之后就不会出现这种情况,-->
    <div class="demo1" @click="showInfo">
        <el-button type="primary" @click.stop="showInfo">点我提示信息</el-button>
    </div>
    <!--    事件只触发一次:给点击事件加上.once之后,我们点击多次按钮,但是只会弹出一次提示信息-->
    <el-button type="primary" @click.once="showInfo">点我提示信息</el-button>
    
    <!--    使用事件的捕获模式(用的不多)-->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>
    <!--    只有event.target是当前操作的元素时才会触发-->
    <div class="demo1" @click.self="showInfo">
        <el-button type="primary" @click="showInfo">点我提示信息</el-button>
    </div>

    <!--    wheel是只有鼠标滚轮滚动才会触发 @wheel="demo"-->
    <!--    scroll是滚动条滚动(键盘上下控制,也可以鼠标滚轮控制)@scroll="demo"-->
    <!--    事件的默认行为立即执行,无需等待事件回调执行完毕-->
    <ul class="list" @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    // data的两种写法
    const vm = new Vue({
        el: '#root',
        data(){
            return{
                name: 'NoBug',
            }
        },
        methods:{
            showInfo(e){
                console.log(e.target);
                alert("Hello, Welcome to NoBug learning.")
            },
            showMsg(msg){
                alert(msg);
            },
            demo(){
                for(let i=0; i<100000; i++){
                    console.log("#");
                }
                console.log("累坏了");
            }
        }
    })
</script>
</html>

由于所涉及的是动态变化,截图看不出效果,这里只提供了完整的代码和注释,可以亲自测试一下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/800012.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【图论】三种中心性 —— 特征向量、katz 和 PageRank

维基百科&#xff1a;在图论和网络分析中&#xff0c;中心性指标为图中相应网络位置的节点分配排名或数值。中心性这一概念最初起源于社交网络分析&#xff0c;因此很多衡量中心性的术语也反映了其社会学背景。 不同中心性指标对 “重要” 的衡量方式不同&#xff0c;因此适用于…

Android调用摄像头拍照从相册中选择图片

以下内容摘自郭霖《第一行代码》第三版 activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-a…

简单分享婚宴预订小程序怎么做

婚宴预订小程序需要具备一些功能&#xff0c;通过这些功能&#xff0c;新人可以更方便地选择婚宴场地、预订服务&#xff0c;并且更好地规划自己的婚礼。 1. 场地浏览与选择 婚宴预订小程序可以展示多个婚宴场地的照片和详细信息&#xff0c;包括容纳人数、场地设施、价格等。…

Flutter:flutter_local_notifications——消息推送的学习

前言 注&#xff1a; 刚开始学习&#xff0c;如果某些案例使用时遇到问题&#xff0c;可以自行百度、查看官方案例、官方github。 简介 Flutter Local Notifications是一个用于在Flutter应用程序中显示本地通知的插件。它提供了一个简单而强大的方法来在设备上发送通知&#…

PHP 3des加解密新旧方法可对接加密

一、旧3des加解密方法 <?php class Encrypt_3DES {//加密秘钥&#xff0c;private $_key;private $_iv;public function __construct($key, $iv){$this->_key $key;$this->_iv $iv;}/*** 对字符串进行3DES加密* param string 要加密的字符串* return mixed 加密成…

blender 用蒙版添加材质

一、添加材质常规方法 选择物体新建材质&#xff0c;shift a 新建图像纹理&#xff0c;此时会发现添加上的纹理会有接缝&#xff0c;shift a 新建映射 纹理坐标&#xff0c;纹理坐标选择生成&#xff0c;此时&#xff0c;之前的接缝便会消失&#xff1b; 如何快捷添加纹理坐…

【应用】Asible自动化运维工具的应用与常用命令

ansible自动化运维工具 一、ansible 的概述1. ansible 的概念2. ansible 的特性 二、ansible 的部署与命令1. ansible 的部署1.1 服务器ip地址设置1.2 ansible 服务器部署 2. ansible 命令行模块2.1 command 模块2.2 shell 模块2.3 cron 模块2.4 user 模块2.5 group 模块2.6 co…

TCP KeepAlive与HTTP Keep-Alive

TCP KeepAlive与HTTP Keep-Alive TCP KeepAliveHTTP Keep-AliveTCP服务器怎么检测客户端断开连接 TCP KeepAlive TCP连接建立之后&#xff0c;如果应用程序或者上层协议一直不发送数据&#xff0c;或者隔很长时间才发送一次数据&#xff0c;那么TCP需要判断是应用程序掉线了还…

postgresql|数据库|启动数据库时报错:FATAL: could not map anonymous shared memory的解决

前言&#xff1a; 一个很偶然的出现的问题&#xff0c;因为我需要验证备份文件是否正确&#xff0c;因此&#xff0c;我在一台已启动了一个数据库实例的服务器上&#xff0c;依据全备的数据库文件在启动一个实例&#xff0c;当然&#xff0c;在此之前&#xff0c;已经修改了备…

C语言习题练习

C语言习题练习 一、offsetof宏二、交换奇偶位三、原地移除数组总结 一、offsetof宏 首先我们要了解什么是offsetof宏&#xff1a; . 此具有函数形式的宏返回数据结构或联合类型中成员成员的偏移值&#xff08;以字节为单位&#xff09;。 . 返回的值是size_t类型的无符号整数…

DevOps(四)

CD(二) 1. CDStep 1 - 上传代码Step 2 - 下载代码Step 3 - 检查代码Step 4 - 编译代码Step 5 - 上传仓库Step 6 - 下载软件Step 7 - 制作镜像Step 8 - 上传镜像Step 9 - 部署服务2. 整体预览2.1 预览1. 修改代码2. 查看sonarqube检查结果3. 查看nexus仓库4. 查看harbor仓库5.…

【打卡】Datawhale暑期实训ML赛事

文章目录 赛题描述任务要求数据集介绍评估指标 赛题分析基于LightGBM模型Baseline详解改进baseline早停法添加特征 赛题描述 赛事地址&#xff1a;科大讯飞锂离子电池生产参数调控及生产温度预测挑战赛 任务要求 初赛任务&#xff1a;初赛提供了电炉17个温区的实际生产数据&…

字典树Trie

Trie树又称字典树&#xff0c;前缀树。是一种可以高效查询前缀字符串的树&#xff0c;典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串&#xff09;&#xff0c;所以经常被搜索引擎系统用于文本词频统计。 它的优点是&#xff1a;利用字符串…

欧姆龙 NJ SNMP 协议的使用,用于监控PLC的网络状态

NJ SNMP 协议的使用 实验时间&#xff1a;2023.07.25 实验器材&#xff1a;NJ501-1300 实验目的&#xff1a;NJ SNMP 协议的使用 1. SNMP 协议介绍 ​ SNMP&#xff08;Simple Network Management Protocol&#xff09;是一种简单网络管理协议。它属于 TCP/IP 五层协议中的…

Cerbero Suite Advanced Crack

Cerbero Suite Advanced Crack 用于软件分类和文件分析的最先进的工具套件。分析多种文件格式&#xff0c;包括PE、Mach-O、ELF、Java、SWF、DEX、PDF、DOC、XLS、RTF、Zip等。 它提供自动分析、交互式分析、Carbon interactive Disassembler、字节码反汇编程序、带布局的十六进…

一篇文章搞定《EventBus详解》

一篇文章搞定《EventBus详解》 前言EventBus简述EventBus的使用EventBus源码解析初始化并构建实例EventBus.getDefault()EventBus.builder()EventBus初始化的重要成员 注册流程register方法SubscriberMethodFinder类findSubscriberMethods方法findUsingReflection方法&#xff…

掌握Python的X篇_10+11_if分支语句、else语句、elif语句

文章目录 1. if关键字及语法2. 语句块的概念3. else语句4. elif语句 1. if关键字及语法 基本语法如下&#xff1a; if 条件表达式:条件为True时&#xff0c;要执行的语句举例&#xff1a; number int(input("Input an number")) if number > 5 :print("这…

【Spring框架】spring对象注入的三种方法

目录 1.属性注入问题&#xff1a;同类型的Bean存储到容器多个&#xff0c;获取时报错的问题&#xff1b;1.将属性的名字和Bean的名字对应上。2.使用AutoWiredQualifier来筛选bean对象&#xff1b; 属性注入优缺点 2.Setter注入Setter注入优缺点 3.构造方法注入&#xff08;Spri…

Node.js 安装与版本管理(nvm 的使用)

安装 Node.js Node.js 诞生于 2009 年 5 月&#xff0c;截至今天&#xff08;2022 年 3 月 26 号&#xff09;的最新版本为 16.14.2 LTS 和 17.8.0 Current&#xff0c;可以去官网下载合适的版本。 其中&#xff0c;LTS&#xff08;Long Term Support&#xff09; 是长期维护…

MySQL基础扎实——主键与候选键

词义解释 主键&#xff08;Primary Key&#xff09;和候选键&#xff08;Candidate Key&#xff09;是关系型数据库中的术语&#xff0c;用于标识和唯一确定表中的记录。它们之间有以下区别&#xff1a; 唯一性&#xff1a;主键是表中的唯一标识&#xff0c;每个表只能有一个主…