Vue入门知识（day2）

最新推荐文章于 2025-08-04 19:10:34 发布

bug_killer@

最新推荐文章于 2025-08-04 19:10:34 发布

阅读量886

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41829060/article/details/123165330

web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue.js中的Object.defineProperty用于实现数据代理，通过修改number变量同步更新person对象的age属性。此外，讲解了Vue事件处理，包括@click事件监听和传递参数。还探讨了计算属性的概念，其优势在于缓存计算结果，减少不必要的计算。最后，展示了计算属性的简写形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Object.defineProperty方法

要求：通过修改number实现修改person中age的值
结果：通过Object.defineProperty将number中的number和age绑定在一起（即修改一个值，另一个值也会发生改变）

<body>
		<script type="text/javascript">
			//要求：通过修改number实现修改person中age的值
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
			Object.defineProperty(person,'age',{
				//功能1：defineProperty内部可以配置枚举、读写等属性
				//功能2：通过get，set修改属性值
				
				//当有人读取person的age属性时，get函数（getter）就会被调用，返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},
				//当有人修改person的age属性值时，set函数（setter）就会被调用，并且收到修改的具体值
				set(value){
					console.log('有人修改了age属性，并且值是',value)
					number = value
				}
			})
		</script>
	</body>

（1）点击age，调用get方法
在这里插入图片描述
（2）修改age属性，同时修改number值

应用：数据代理，下图例子中通过obj可以访问x，通过obj2也可以访问x，这就是数据代理。

通过下面两个红色箭头指向的内容表示数据代理的实现

2、事件处理

在这里插入图片描述
代码：

<body>
		<div id = "root">
			<h2>欢迎来到{{name}}学习</h2>
			<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)
				},
				showInfo2($event,number){
					console.log(event,number)
				}
			}
		})
	</script>

3、事件修饰符

（前三个常用）
在这里插入图片描述

4、计算属性

（1）属性：data中存放属性。
（2）计算属性：对已有属性进行加工计算，与data分开存放。
（3）计算属性的优势：计算属性具有缓存，不修改计算属性的前提下多次调用计算属性可以只创建一次而不创建多次。
（4）计算属性是返回值，不能写成函数的形式，比如{{fullName()}}这样写是不对的。
代码：

<body>
		<div id='root'>
			姓：<input type="text" v-model="firstName" /><br />
			名：<input type="text" v-model="lastName" /><br />
			姓名：<span>{{fullName}}</span>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止vue在启动时生成生产提示
			const vm = new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三',
					x:'你好'
				},
				computed:{
					fullName:{
						//get有什么用？当有人读取fullName时，get就会被调用，并且返回值就作为fullName的值
						//get什么时候被调用？1、初次读取fullName时。2、所依赖的数据发生变化时。
						get(){
							return this.firstName + '-' + this.lastName
						},
						//set什么时候被调用？当fullName被修改时
						set(value){
							console.log('set',value)
							const arr = value.split('-')
							this.firstName = arr[0]
							this.lastName = arr[1]
						}
					}
				}
			})
		</script>