【Vue】基础系列（二）数据代理(Object.defineProperty) - 事件处理

最新推荐文章于 2024-05-16 19:06:13 发布
最新推荐文章于 2024-05-16 19:06:13 发布
阅读量205 收藏
点赞数
分类专栏： 前端框架Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43322436/article/details/123191812
版权

1.Object.defineProperty

特点：不可枚举（说白了，就是不可遍历）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>06_回顾Object.defineProperty方法</title>
</head>
<body>

    <script type="text/javascript">
      let person ={
          name:'张三',
          sex:'男',
          
      }

      Object.defineProperty(person,'age',{
          value:18
      })
// console.log(person)
console.log(Object.keys(person))
    </script>
    
</body>
</html>

如下图，没有发现 age
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>06_回顾Object.defineProperty方法</title>
</head>
<body>

    <script type="text/javascript">
      let person ={
          name:'张三',
          sex:'男',
          
      }

      Object.defineProperty(person,'age',{
          value:18
      })

      for (let key in person) {
        console.log('@',person[key])
      }
// console.log(person)
console.log(Object.keys(person))
    </script>
    
</body>
</html>

如下图，age 没有遍历出来
在这里插入图片描述

想要实现可遍历，可以修改 enumerable为true，如下所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<script type="text/javascript" >
			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)
		</script>
	</body>
</html>

1.1.console.log(Object.keys(person))

Object.keys(person) 方法，传入一个对象，获取该对象的所有属性名 作为 数组中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      <title>06_回顾Object.defineProperty方法</title>
</head>
<body>

    <script type="text/javascript">
      let person ={
          name:'张三',
          sex:'男',
          age:18,
      }

console.log(Object.keys(person))
    </script>
    
</body>
</html>

如下图，通过Object.keys(person) 获取到了name，sex，age

在这里插入图片描述

1.2.何为数据代理？

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
例如：下面的代码，通过obj2 代理 obj1 中的x属性，对 x 进行读写操作
对象1---------》拥有 x属性
对象2---------》拥有 y属性
对象2 代理 对象1 中的 x 属性，对 x 进行读写操作（数据代理）

<!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',{   //此x为，给obj2 定义变量名为x
				get(){
					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>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			}
		})
	</script>
</html>

如下图，看到adress:(…) 和 name:(…) 就是进行了数据代理。
在这里插入图片描述

总结

1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：更加方便的操作data中的数据

3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。

					为每一个添加到vm上的属性，都指定一个getter/setter。
					
					在getter/setter内部去操作（读/写）data中对应的属性。

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)” 效果一致，但后者可以传参；

例子演示：

<!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> -->
			<!--  v-on:click 的简写是  @click -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<!--  showInfo2(66)只传一个参数，就无法使用event 的了，应该像下面这样写才对，$event是占位符 -->
			<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)//点我提示信息1（不传参）
					// 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>
</html>

2.2. 事件修饰符

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

1.阻止默认事件

何为默认事件？ 看下面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
		
		</style>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click="showInfo">点我提示信息</a>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				}
			}
		})
	</script>
</html>

在这里插入图片描述

a 标签的默认跳转事件，提示弹完后，点击确定 会进行链接跳转

阻止默认事件 方式一：

methods:{
			showInfo(e){
			    e.preventDefault()  //加上这个就可以阻止默认行为
				alert('同学你好！')
			}
		}

阻止默认事件 方式二：

使用vue 提供的事件修饰符，@click.prevent

<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

2.阻止事件冒泡

何为事件冒泡？ 看下面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
		
		</style>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
				}
			}
		})
	</script>
</html>

在这里插入图片描述

<div class="demo1" @click="showInfo">
   <button @click="showInfo">点我提示信息</button>
</div>

点击的是button 按钮，但是 又冒泡了一层到 div 中

阻止事件冒泡 方式一：

methods:{
			showInfo(e){
			   e.stopPropagation()  //加上这个就可以阻止事件冒泡
				alert('同学你好！')
			}
		}

阻止事件冒泡 方式二：

使用vue 提供的事件修饰符，@click.stop

<!-- 阻止事件冒泡（常用） -->
<div class="demo1" @click="showInfo">
	<button @click.stop="showInfo">点我提示信息</button>
</div>

3.事件只触发一次

@click.once 如下，只会触发一次弹窗，之后都不会弹出来

<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

4.事件捕获

事件先经过捕获，再进行冒泡 ，如下代码中，div1 套了div2 ，事件先进行捕获，是外往内（div1 是外，div2 是内），再进行冒泡（内往外）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
		   .box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}

		</style>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
                showMsg(msg){
					console.log(msg)
				}
			}
		})
	</script>
</html>

在这里插入图片描述

加了 @click.capture 后 会 由 外（div1） 往 内（div2） 执行（div1 套 div2）

<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

在这里插入图片描述

5.self 修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
		 

		</style>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

		</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)
				}
			}
		})
	</script>
</html>

什么修饰符都没有加，正常走会弹出两次弹窗。修改showInfo，查看target

      methods:{
           showInfo(e){
			//alert('同学你好！')
		   console.log(e.target)
				}
			}

在这里插入图片描述

使用 self 修饰符

<!-- 只有event.target是当前操作的元素时才触发事件； -->
	<div class="demo1" @click.self="showInfo"><!--这里加上self表示只有当前操作的元素是div才会触发 -->
		<button @click="showInfo">点我提示信息</button>
	</div>

在这里插入图片描述

5.passive修饰符（做移动端和平板优化用到）

1.scroll 滚动条的滚动（滚动条滚动——》先显示滚动条的变化——》再执行触发事件）
<ul @scroll="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
</ul>

在这里插入图片描述

2.wheel 鼠标的滚轮的滚动（鼠标的滚动轮滚动——》先执行触发事件——》再显示滚动条的位置变化）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
		 
           .list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
				<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
                <ul @wheel.passive="demo" class="list">
                    <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:{
                demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

总结：而@wheel.passive 是 事件的默认行为立即执行，无需等待事件回调执行完毕
即，类似：scroll 滚动条的滚动（滚动条滚动——》先显示滚动条的变化——》再执行触发事件）

5.特殊要求（既要阻止冒泡，又要阻止默认行为）

<a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>

@click.stop.prevent先阻止冒泡，再阻止默认行为
@click.prevent.stop 先阻止默认行为，再阻止冒泡
两者效果一致，实际存在先后顺序问题

2.3. 键盘事件

1.keydown（按键按下去就触发）

2.keyup（按键按下去然后松掉才触发）

1.想要按键按下去后，按回车才触发事件

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

方式一：

if(e.keyCode != 13) return //只有按了回车键（keyCode==13）才往下走

showInfo(e){
   if(e.keyCode != 13) return //只有按了回车键（keyCode==13）才往下走
   console.log(e.target.value)
		}

方式二：

事件修饰符：@keyup.enter

<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
		</div>

总结:类似的还有
Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
注意：单词都是小写形式，那么真名怎么看呢？

查看按键的真名

console.log(e.key,e.keyCode)//e.key 查看真名，e.keyCode查看按键的键码
如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		

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

在这里插入图片描述在这里插入图片描述

2.想要按键按下去后，按Tab才触发事件（Tab 的作用是切换焦点，所以使用@keyup.tab是不合适的(按Tab键不会触发)，keyup要按键抬起来才生效，但是按了Tab键（一按就会切换焦点，根本不需要抬起来这个动作），所以使用@keydown.tab 就不会发生这种情况的）

类似Tab键的还有ctrl、alt、shift、meta(就是Win键) 共五个
系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta（Win键）
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。（例如ctrl+y,释放y后才触发）
(2).配合keydown使用：正常触发事件。

3.也可以使用keyCode去指定具体的按键（不推荐）

例如：下面两个是等价的（都表示按回车键才触发）

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo">

在这里插入图片描述

4.使用Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名为huiche的按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
                    console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>
5.只有使用ctrl+y 才触发，其他都不触发

这样写 ： @keyup.ctrl.y

墨苒孤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目优化之长列表性能优化(2)(Object.defineProperty)
jieweiwujie的博客
09-06 531
Object.freeze列表数据处理
vue项目优化之长列表性能优化(Object.defineProperty)
jieweiwujie的博客
12-30 531
vue项目优化之长列表性能优化(Object.defineProperty)
vue3 键盘事件 回车发送消息，ctrl+回车 内容换行
最新发布
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-16 604
【代码】vue3 键盘事件 回车发送消息，ctrl+回车 内容换行。
Object.defineProperty实现数据代理
qq_43102118的博客
11-21 711
数据代理 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） 实现数据代理可以使用Object.defineProperty如下： <script> let obj1={x:1} let obj2={y:2} Object.defineProperty(obj2,'x',{ get(){ return obj1.x } set(value){ obj1.x = value } }) </s
Vue响应式原理(defineProperty)
weixin_45785873的博客
11-10 2821
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持
小结Object.defineProperty / 啥是代理（设计模式） / vm=new Vue({data:myData})
weixin_53562163的博客
04-11 691
Object.defineProperty 可以给对象添加属性value 可以给对象添加getter/setting getter/setting用于对属性的读写进行监控 啥是代理（设计模式） 对myData对象的属性读写，全权由另一个对象vm负责 那么vm就是myData的代理（类比房东租房） 比如myData.n偏要vm.来操作myData.n vm=new Vue({data:myData}) 1、会让vm成为myData的代理（proxy） 2、会对myData的
vue源码学习之Object.defineProperty 对数组监听
08-27
Vue 源码学习之 Object.defineProperty 对数组监听 在 Vue 源码学习中，Object.defineProperty 对数组监听是一个非常重要的知识点。本文将详细介绍 Object.defineProperty 对数组监听的原理和实现方法。 Object....
vue源码学习之Object.defineProperty对象属性监听
01-21
vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上查看有关Object.defineProperty 的解释。 我们先从最简单的开始： let a = {'b': 1}; Object.defineProperty(a, 'b', { ...
vue用Object.defineProperty手写一个简单的双向绑定的示例
08-27
Vue 使用 Object.defineProperty 实现简单的双向绑定 Vue 中的双向绑定是指视图层（View）和模型层（Model）之间的同步更新。使用 Object.defineProperty 可以手写一个简单的双向绑定示例。 什么是双向绑定？ ...
Vue-Object.defineProperty:Vue源码解析之手写Vue源码-源码解析
03-24
现在前端面试Vue中都会问到响应式原理以及如何实现的，如果你还只是简单回答通过Object.defineProperty（）来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程实现手写一个简易的Vue原始码实现数据双向绑定...
vue3 键盘事件和禁止F5刷新
weixin_45208435的博客
06-15 991
键盘事件禁止需要在页面的生命周期函数created中调用方法。在vue3中setup()相当于created。
JavaScript：取消回车键的默认事件
ALLEN的博客
02-04 3983
back:function (event){ event = event || window.event; if(event.keyCode==13){ event.returnValue = false; return false; } },
【Vue教程三】点击事件、表单输入事件、键盘事件
qing_小诺的博客
07-09 5894
一、点击事件： 1、可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <body> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <p>{{name}}</p> <button v-on:c.........
Vue中的Object.defineProperty的理解
godkzz的博客
08-13 369
定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 一、直接添加 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ value:18, enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。 ...
Vue处理后台返回List集合带有Object对象的数据
热门推荐
Youning_Yim的博客
11-13 2万+
VueJSON数组，JSON对象，数组的区别 参考博客：JSON数组，JSON对象，数组的区别 在Vue接收到后台的List集合数据中含有对象想转成数据对象的形式（Array）如图一；而不是Object,如图二。虽然可以遍历 图一 ...
数据代理-Object.defineProperty -Vue中的数据代理
weixin_51351637的博客
08-28 348
值得一说的是，get函数和set函数不能与value、writable共同使用否则就会出现property descriptors must not specify a value or be writable when a getter or setter has been specified当指定了getter或setter时，属性描述符不能指定值或可写 二、数据代理 1.定义 数据代理：通过一个对象代理对另一个对象中属性的操作（读或写） 下面这个小案例就是通过obj2来操作ob
[vue] Vue中的数据代理 defineProperty
qq_14993591的博客
11-01 362
defineProperty： 参考之前的文章：[js] 数据劫持 let number = 18 let person = { name:'张三', sex:'男', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性
VUE全局监听键盘事件
蔡定努
03-26 8877
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.st...
vue组件object_vue源码系列一：Object.defineProperty
06-01
好的，让我来回答你的问题。 Vue 组件 object_vue 源码系列一是关于 Object.defineProperty 的。Object.defineProperty 是 JavaScript 中的一个方法，可以用来定义对象的属性。这个方法可以让我们定义一个新的属性或者修改一个已经存在的属性。这个方法的语法如下： ```javascript Object.defineProperty(obj, prop, descriptor) ``` 其中，obj 是要定义属性的对象，prop 是要定义或修改的属性名，descriptor 是属性的描述符，它是一个对象，可以包含以下属性： - value：属性的值，默认为 undefined。 - writable：属性是否可写，默认为 false。 - enumerable：属性是否可枚举，默认为 false。 - configurable：属性是否可配置，默认为 false。 使用 Object.defineProperty 方法，可以实现一些高级的对象操作，例如： 1. 将一个属性设置为只读，即无法修改。 2. 将一个属性设置为不可枚举，即无法通过 for...in 循环遍历到该属性。 3. 将一个属性设置为不可配置，即无法删除该属性或者修改该属性的描述符。 在 Vue 中，Object.defineProperty 方法被广泛地应用于组件的实现中，例如： 1. 监听数据变化，通过设置 getter 和 setter 方法，实现数据的响应式更新。 2. 实现 computed 计算属性，通过设置 getter 方法，实现计算属性的缓存和响应式更新。 3. 实现 watch 监听器，通过设置 getter 方法，监听数据的变化并触发回调函数。 以上就是我对你提出的问题的回答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值