当前位置： 首页 > news >正文

【Vue】Vue2（2）

news 2025/5/3 4:06:57

文章目录

  • 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" >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" >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">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">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">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">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.mrgr.cn/news/45521.html

相关文章：

  • 【LeetCode刷题】：双指针篇（移动零、复写零）
  • SEO（搜索引擎优化）指南
  • 红队老子养成记2 - 不想渗透pc？我们来远控安卓！（全网最详细）
  • 要实现无限极评论
  • 计算机毕业设计-自主完成指南
  • MySql复习知识及扩展内容
  • C语言从头学65—学习头文件 ＜stdio.h＞（一）
  • 碧桂园服务携手安徽砀山，以购代捐助力乡村振兴
  • scaling 的作用
  • Python Kivy 完整应用开发：待办事项列表
  • 【RTCP】Interarrival Jitter: 到达间隔抖动的举例说明
  • 【Transformer 模型中的投影层,lora_projection是否需要？】
  • 点餐小程序实战教程17角色管理
  • OpenHarmony（鸿蒙南向开发）——轻量系统内核（LiteOS-M）【内存调测】
  • Ngx+Lua+Redis 快速存储POST数据
  • 如何使用PSTools工具集中的PSExec修改注册表信息，解决某些注册表项无法删除的问题
  • 以下是一些数据看板的常见使用场景：
  • 招个测试员，我又面试了100+人，未果…
  • 如何在VScode中加入系统安装好的python环境
  • Unity 从零开始的框架搭建1-1 unity中对象调用的三种方式的优缺点分析【干货】