【Vue】Vue2（2）

ops/2024/10/8 22:37:03/

文章目录

  • 1 数据代理
    • 1.1 回顾Object.defineproperty方法
    • 1.2 何为数据代理
    • 1.3 Vue中的数据代理
  • 2 事件处理
    • 2.1 事件的基本使用
    • 2.2 事件修饰符
    • 2.3 键盘事件

1 数据代理

1.1 回顾Object.defineproperty方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>回顾Object.defineproperty方法</title></head><body><script type="text/javascript" >javascript">let number = 18let person = {name:'张三',sex:'男',//age: 18 直接写可以随意修改和删除//age: number，number变化age不变}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)) /*for(let key in person){console.log(person[key]);}*/console.log(person)</script></body>
</html>

1.2 何为数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>何为数据代理</title></head><body><!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--><script type="text/javascript" >javascript">let obj = {x: 100}let obj2 = {y: 200}Object.defineProperty(obj2,'x',{ // obj2也能访问和操作xget(){return obj.x },set(value){obj.x = value}})</script></body>
</html>

1.3 Vue中的数据代理

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue中的数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。--><!-- 准备好一个容器--><div id="root"><h2>学校名称：{{name}}</h2> <!-- 若没有数据代理：{{_data.name}}麻烦 --><h2>学校地址：{{address}}</h2></div></body><script type="text/javascript">javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// vm身上没有name和address，但有_data// vm._data === data// vm.name => setter => dataconst vm = new Vue({ // 配置对象el:'#root',data:{name:'尚硅谷',address:'宏福科技园'}})</script>
</html>

2 事件处理

2.1 事件的基本使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件的基本使用</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 事件的基本使用：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></body><script type="text/javascript">javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{name:'尚硅谷',},methods:{ // 方法没有数据代理showInfo1(event){// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert('同学你好！')},showInfo2(event, number){console.log(event, number)// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert('同学你好！！')}}})</script>
</html>

2.2 事件修饰符

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件修饰符</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style></head><body><!-- Vue中的事件修饰符：1.prevent：阻止默认事件（常用）；2.stop：阻止事件冒泡（常用）；3.once：事件只触发一次（常用）；4.capture：使用事件的捕获模式；5.self：只有event.target是当前操作的元素时才触发事件；6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；--><!-- 准备好一个容器--><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.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获(捕获--由外向内，冒泡--由内向外)模式，在捕获阶段就处理事件(正常是在冒泡阶段处理事件) --><div class="box1" @click.capture="showMsg(1)">div1 输出: 1<div class="box2" @click="showMsg(2)"><!-- 若box1没有.capture，输出：2 1 -->div2 输出: 1 2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><!-- 若不加.self，点击按钮时就冒泡了，弹出两次框 --><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul @wheel.passive="demo" class="list"> <!-- .passive对scroll没有影响，scroll本身就是先移动滚动条 --><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'},methods:{showInfo(e){alert('同学你好！')console.log(e.target)},showMsg(msg){console.log(msg)},demo(){ // 正常情况下：滑动滚轮 => demo回调函数执行 => 滚动条移动，加.passive后先移动滚动条for (let i = 0; i < 100000; i++) {console.log('#')}console.log('累坏了')}}})</script>
</html>

2.3 键盘事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>键盘事件</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)(tab能把焦点从当前元素上切走，keyup就切走了)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名，例如CapsLock是两个单词，要转换为caps-lock）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win)(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键(@keydown.13)（不推荐），不同键盘编码不统一5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不太推荐）--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> <!-- @keyup.ctrl.y，ctrl + y时触发 --></div></body><script type="text/javascript">javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche = 13 //定义了一个别名按键new Vue({el:'#root',data:{name:'尚硅谷'},methods: {showInfo(e){// console.log(e.key, e.keyCode) //按键的名字(Enter)，按键的编码(13)console.log(e.target.value)}},})</script>
</html>

http://www.ppmy.cn/ops/122836.html

相关文章

Linux运维01：VMware创建虚拟机

Linux运维01：VMware创建虚拟机

视频链接&#xff1a;05.新建VM虚拟机_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1nW411L7xm/?p14&spm_id_from333.880.my_history.page.click&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.点击“创建虚拟机” 2.选择“自定义&#xff08;高级&#xff0…
阅读更多...
主流反爬虫手段

主流反爬虫手段

这题我会&#xff0c;主流反爬虫手段 ①检测浏览器环境动态生成cookie(瑞数) ②验证码(极验&#xff0c;顶象) ③js混淆或加密&#xff0c;obfuscator的js混淆&#xff0c;wasm加密&#xff0c;jsvmp(js虚拟机) ④字体反爬&#xff0c;CSS反爬&#xff0c;雪碧图 ⑤tls指纹…
阅读更多...
static 函数默认链接不可见

static 函数默认链接不可见

目录 发现验证 发现 起初是在看编译器学习仓库的第一章 README 和代码的时候发现的&#xff0c;头文件中的有一些函数被声明为 static 的&#xff0c;有一些不是。我依稀记得以前看八股文的时候&#xff0c;带 static 声明的函数其可见性仅限于当前的编译翻译单元&#xff0c;…
阅读更多...
Hive优化操作（二）

Hive优化操作（二）

Hive 数据倾斜优化 在使用 Hive 进行大数据处理时&#xff0c;数据倾斜是一个常见的问题。本文将详细介绍数据倾斜的概念、表现、常见场景及其解决方案。 1. 什么是数据倾斜&#xff1f; 数据倾斜是指由于数据分布不均匀&#xff0c;导致大量数据集中到某个节点或任务中&…
阅读更多...
鸿蒙跨端实践-JS虚拟机架构实现

鸿蒙跨端实践-JS虚拟机架构实现

作者&#xff1a;京东科技 杜强强 前言 在Roma跨端方案中&#xff0c;JS虚拟机是框架的核心&#xff0c;负责执行动态化的JS代码。在Android平台采用了基于V8的J2V8&#xff0c;iOS平台则使用了系统自带的JSCore&#xff0c;而在HarmonyOS中&#xff0c;由于业界无类似的框架&a…
阅读更多...
费曼学习法没有输出对象怎么办？

费曼学习法没有输出对象怎么办？

‌费曼学习法并不需要输出对象。‌费曼学习法的核心在于通过将所学知识以简明易懂的方式解释给自己听&#xff0c;从而加深对知识的理解和记忆。这种方法强调的是理解和反思的过程&#xff0c;而不是简单地通过输出&#xff08;如向他人解释&#xff09;来检验学习效果。费曼学…
阅读更多...
StarRocks 中如何做到查询超时(QueryTimeout)

StarRocks 中如何做到查询超时(QueryTimeout)

背景 本文基于 StarRocks 3.1.7 主要是分析以下两种超时设置的方式: SESSION 级别 SET query_timeout 10;SELECT sleep(20);SQL 级别 select /* SET_VAR(query_timeout10) */ sleep(20); 通过本文的分析大致可以了解到在Starrocks的FE端是如何进行Command的交互以及数据流走…
阅读更多...
C++版iwanna1

C++版iwanna1

第一篇目录 开头程序Game.cpp源文件Player.h头文件Player.cpp源文件trigger.h头文件trigger.cpp源文件Cmp.h头文件Cmp.cpp源文件 开头 大家好&#xff0c;我叫这是我58。 程序 Game.cpp源文件 #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include <c…
阅读更多...
最新文章

Copyright @ 2022~2023