03 【数据代理 事件处理】

03 【数据代理 事件处理】

1.数据代理

了解数据代理需要js的一些知识:Object.defineProperty(),属性标志,属性描述符,getter,setter。。。

1.1数据代理

建议学习文章地址:

https://zh.javascript.info/property-descriptors

https://zh.javascript.info/property-accessors

这里简单介绍一下:

属性标志:

对象属性(properties),除 value 外,还有三个特殊的特性(attributes),也就是所谓的“标志”

  • writable — 如果为 true,则值可以被修改,否则它是只可读的
  • enumerable — 如果为 true,则表示是可以遍历的,可以在for… .in Object.keys()中遍历出来
  • configurable — 如果为 true,则此控制属性可以被删除,默认值是false

Object.defineProperty(obj, prop, descriptor)

obj:要定义属性的对象。

prop:要定义或修改的属性的名称

descriptor:要定义或修改的属性描述符

let number = 18
let person = {
  name: '张三',
  sex: '男',
}

Object.defineProperty(person, 'age', {
  // value:18,
  // enumerable:true,		// 控制属性是否可以枚举,默认值是false
  // writable:true,			// 控制属性是否可以被修改,默认值是false
  // configurable:true	// 控制属性是否可以被删除,默认值是false

  // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
  get() {
    console.log('有人读取age属性了')
    return number
  },

  // 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
  set(value) {
    console.log('有人修改了age属性,且值是', value)
    number = value
  }

})
// console.log(Object.keys(person))
console.log(person)

1.2vue中的数据代理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

      let vm = {};
      let data = {
        name: 'ds',
        age: 18,
      };
      Object.defineProperty(vm, 'age', {
        get() {
          return data.age;
        },
        set(value) {
          data.age = value;
        },
      });

image-20220627121636057

使用{{}}插值语法获取vm的x时,触发get方法,将data的x赋值给vm的x

修改data中的age时并没有改变vm里的age的值,当{{}}获取vmage的值时,就会将dataage赋值给vmage

修改vm中的age,触发set方法,将修改的值赋值给data中的age

  1. Vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)
  2. Vue中数据代理的好处:更加方便的操作data中的数据
  3. 基本原理
  • 通过object.defineProperty()data对象中所有属性添加到vm
  • 为每一个添加到vm上的属性,都指定一个 getter,setter
  • getter,setter内部去操作(读/写)data中对应的属

image-20220627120432752

Vuedata中的数据拷贝了一份到_data属性中,又将_data里面的属性提到Vue实例中(如name),通过defineProperty实现数据代理,这样通过geter/setter操作 name,进而操作_data中的 name。而_data又对data进行数据劫持,实现响应式。

name被修改–>调用setter–>重新解析模板–>生成新的虚拟DOM–>新旧DOM对比(diff)–>更新页面

2.事件处理

2.1事件的基本用法

  1. 使用v-on:xxx@xxx绑定事件,其中 xxx 是事件名
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要用箭头函数,否则 this 就不是vm了
  4. methods中配置的函数,都是被 Vue所管理的函数,this 的指向是vm组件实例对象
  5. @click="demo"@click="demo($event)"效果一致,但后者可以传参
<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1(不传参)</button>
    <!-- 主动传事件本身 -->
    <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:'vue',
        },
        methods:{
            // 如果vue模板没有写event,会自动传 event 给函数
            showInfo1(event){
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好!')
            },
            showInfo2(event,number){
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好!!')
            }
        }
	});
</script>

2.2事件修饰符

Vue中的事件修饰符
1.prevent 阻止默认事件(常用)
2.stop 阻止事件冒泡(常用)
3.once 事件只触发一次(常用)
4.capture 使用事件的捕获模式
5.self 只有event.target是当前操作的元素时才触发事件
1.passive 事件的默认行为立即执行,无需等待事件回调执行完毕
修饰符可以连续写,比如可以这么用:@click.prevent.stop="showInfo"

    <style>
      * {margin-top: 20px;}
      .demo1 {height: 50px;background-color: skyblue;}
      .box1 {padding: 5px;background-color: skyblue;}
      .box2 {padding: 5px;background-color: white;}
      .list {width: 200px;height: 200px;background-color: skyblue;overflow: auto;}
      li {height: 100px;}
    </style>

    <div id="root">
      <h2>欢迎来到{{ name }}学习</h2>
      <!-- 阻止默认事件(常用) -->
      <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

      <!-- 阻止事件冒泡(常用) -->
      <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.qq.com" @click.prevent.stop="showInfo">点我提示</a> -->
      </div>

      <!-- 事件只触发一次(常用) -->
      <button @click.once="showInfo">点我提示信息</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">
        <button @click="showInfo">点我提示信息</button>
      </div>

      <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕; -->
      <!-- scroll是滚动条滚动,passsive没有影响 -->
      <!-- wheel是鼠标滚轮滚动,passive有影响 -->
      <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>

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

      new Vue({
        el: '#root',
        data: {
          name: '尚硅谷'
        },
        methods: {
          showInfo(e) {
            alert('同学你好!')
            // console.log(e.target)
          },
          showMsg(msg) {
            console.log(msg)
          },
          demo() {
            for (let i = 0; i < 100000; i++) {
              console.log('#')
            }
            console.log('累坏了')
          }
        }
      })
    </script>

2.3键盘事件

键盘上的每个按键都有自己的名称和编码,例如:Enter(13)。而Vue还对一些常用按键起了别名方便使用

1.Vue中常用的按键别名
回车enter
删除delete捕获“删除”和“退格”键
退出esc
空格space
换行tab特殊,必须配合keydown去使用
up
down
left
right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(多单词小写短横线写法 NumLock(num-lock) CapsLock(caps-lock)
3.系统修饰键(用法特殊)ctrl、alt、shift、meta(meta就是win键)
3.1配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
指定 ctrl+y 使用 @keyup.ctrl.y
3.2配合keydown使用:正常触发事件
4.也可以使用keyCode去指定具体的按键**(不推荐)**
@keyup.13=xxx(@keyup.enter=xxx)

5.Vue.config.keyCodes 自定义键名 = 键码,可以去定制按键别名

    <div id="root">
      <h2>欢迎打开{{name}}笔记</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br/>
      <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br/>
      <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"><br/>
    </div>
	
    <script type="text/javascript">
      Vue.config.productionTip = false	// 阻止 vue 在启动时生成生产提示。
      Vue.config.keyCodes.huiche = 13		// 定义了一个别名按键

      new Vue({
        el: '#root',
        data: {
          name: 'vue'
        },
        methods: {
          showInfo(e) {
            // console.log(e.key,e.keyCode)
            console.log(e.target.value)
          }
        },
      })
    </script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考A计划-试题模拟含答案解析-卷十三

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

docker可视化管理工具portainer忘记密码重置教程

目录 前言&#xff1a; 1 停止portainer容器 2 借助仓库 portainer/helper-reset-password 重置密码 3 重新启动portainer容器 4 验证是否修改成功 5 修改登录密码 前言&#xff1a; 由于学习的深入&#xff0c;各种账号密码实在是太多了&#xff0c;建议各位配置账号密…

【JavaSE】Java基础语法(三十五):多线程实战

文章目录 1. 多线程入门1.1 多线程相关概念1.2 什么是多线程1.3 多线程的创建方式1.3.1 继承 Thread 的方式1.3.2 实现 Runnable 接口的方式1.3.3 实现 Callable 接口的方式1.3.4 Thread 类中常用方法1.3.5 sleep() 方法 和 wait() 方法区别&#xff1a; 2. 线程安全2.1 线程安…

机器学习算法

机器学习擅长的任务: ● 回归&#xff08;regression&#xff09; ● 分类&#xff08;classification&#xff09; ● 聚类&#xff08;clustering&#xff09; 1.回归&#xff08;regression&#xff09; 回归是处理连续数据时使用的方法&#xff0c;如时间序列数据。 …

java 利用poi根据excel模板导出数据(一)

前言 作为B端开发&#xff0c;导出数据是不可以避免的&#xff0c;但是有时候需求很变态&#xff0c;表头复杂的一笔&#xff0c;各种合并单元格&#xff0c;如下图&#xff1a; 这些虽说用代码可以实现&#xff0c;但是很繁琐&#xff0c;而且代码并不能通用&#xff0c;遇到…

Python编程面试题及答案(20例)

以下是一些常见的Python编程面试题以及它们的答案&#xff1a; 1.解释Python中的 GIL&#xff08;全局解释器锁&#xff09;是什么&#xff0c;它对多线程编程有什么影响&#xff1f; 答案&#xff1a;GIL是Python解释器中的一个机制&#xff0c;它确保在任何给定时间只有一个…

Lecture 5 Part of Speech Tagging

目录 POS application: Information Extraction 词性应用&#xff1a;信息提取 POS Open Class 开放类词性Problem of word classes: Ambiguity 词类问题&#xff1a;模糊性Tagsets 标记集Penn Treebank Tags:Derived Tags: 衍生标签Tagged Text Example 标记文本示例Reasons f…

160个CrackMe之001

吾爱中的逆向练习题 运行程序 有两个方式 一个是账号登入 一个是序列号输入 账号输入 方法一 爆破 我们先进行账号输入 这个是最简单的逆向 所以我们可以使用 字符串查找看看 先试用ollydbg打开 右键 ->查找 ->所有参考文本字符串 这里我们能发现有两个报错 我们还…

通过python封装1688图片搜索商品数据接口,拍立淘API接口

1688图片搜索API封装接口是一个可以帮助用户快速使用1688图片搜索API的接口封装库。该接口封装库可以帮助用户快速引入1688图片搜索API&#xff0c;并提供各种参数配置和封装的API调用方法&#xff0c;以方便用户快速实现自己的图片搜索需求。 该接口封装库将1688图片搜索API的…

九耶丨阁瑞钛伦特-springmvc(三)

SpringMVC作为一种流行的Java Web框架&#xff0c;是基于Spring之上的。它提供了强大的MVC&#xff08;Model-View-Controller&#xff09;架构&#xff0c;能够快速地实现Java Web开发&#xff0c;高效地与数据交互。如何使用SpringMVC成为开发人员的首要问题。要了解SpringMV…

设计模式之~外观模式

定义&#xff1a; 为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用。 结构图&#xff1a; 区分中介模式&#xff1a; 门面模式对外提供一个接口 中介模式对内提供一个接口 优点&#xff1a; 松耦…

Linux进程概念引入

文章目录 冯诺依曼体系操作系统概念设计目的定位系统调用和库函数的概念 进程概念描述进程PCBtask_struct内容分类 组织进程查看进程通过系统调用获取进程标识符通过系统调用创建进程 冯诺依曼体系 目前我们的计算机基本都是遵守冯诺依曼体系的&#xff0c;在冯诺依曼体系中&am…

C++ 内存分区模型

C程序在执行时&#xff0c;将内存大方向划分为4个区域 代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统进行管理的 全局区&#xff1a;存放全局变量和静态变量以及常量 栈区&#xff1a;由编译器自动分配释放 , 存放函数的参数值 , 局部变量等 堆区&…

第11届蓝桥杯Scratch国赛真题集锦

编程题 第 1题 问答题 3D打印小猫 题目说明 背景信息:3D打印技术,它与普通打印工作原理基本相同,打印机内装有液体或粉未等“打印材料”,与电脑连接后,通过电脑控制把“打印材料”一层层叠加起来,最终把计算机上的蓝图变成实物。 编程实现:通过滑杆控制小猫造型变化,按下…

YUM在线升级功能

文章目录 YUM在线升级功能利用YUM进行查询、安装、升级与删除功能查询功能使用案例 安装/升级功能删除功能 YUM的配置文件修改软件源产生的问题与解决之道使用案例 YUM的软件群组功能使用案例 全系统自动升级 管理的抉择&#xff1a;RPM还是Tarball基础服务案例&#xff1a;以A…

学生成绩管理系统

基于springboot vue实现的学生成绩管理系统 主要模块&#xff1a; 1&#xff09;学生模块&#xff1a;我的成绩、成绩统计、申述管理、修改密码 2&#xff09;教师模块&#xff1a;任务管理、对学生班级任务安排、班级学生的成绩查看、申述管理 3&#xff09;管理员模块&…

应用运维的三个项目

应用运维 目录概述需求&#xff1a; 设计思路实现思路分析1.开发和运维2.比重3.历史项目4.工作内容5.历程 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,…

南山城市更新--向南村(一期,二期)项目详情

向南村&#xff08;一期&#xff09;城市更新单元项目简介 项目于2010年被列入《深圳城市更新单元规划制定计划第一批计划》中&#xff0c;申报主体为向南实业股份有限公司&#xff0c;后与恒大合作开发。 项目位于南山区桂庙路南侧&#xff0c;毗邻前海、衔接后海&am…

javaWeb ssh小提琴管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh小提琴管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S 模式开发。开发环境为TOMCAT7.0,…

TypeScript实现贪吃蛇游戏

TS实现贪吃蛇游戏 文章目录 TS实现贪吃蛇游戏[toc]1.项目效果2.项目梳理3.项目准备4.主体页面结构5.CSS样式6.TS逻辑6.1 食物逻辑6.2 蛇逻辑6.3 记分板逻辑6.4 游戏控制器逻辑6.5 程序入口ts 1.项目效果 项目体验 2.项目梳理 这个小游戏主要包括积分面板&#xff0c;食物&…