【Vue】Vue2(2)

news/2024/10/8 22:39:56 标签: vue.js, javascript, 前端

文章目录

  • 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 = 18
			let 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也能访问和操作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>
		<!-- 
				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 => data
		const 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是vm
					alert('同学你好!')
				},
				showInfo2(event, number){
					console.log(event, number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好!!')
				}
			}
		})
	</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
							右 => right

				2.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.niftyadmin.cn/n/5694892.html

相关文章

Crypto虐狗记---”你“和小鱼(五)

前言&#xff1a;剧情五 提示&#xff1a; 一种食物&#xff1f; 一种食物——培根&#xff1a;&#xff08;A B 也暗示是培根加密&#xff09; cyberpeace{attackanddefenceworldisinteresting} 密码学笔记——培根密码 - ILK - 博客园 (cnblogs.com)

当x趋于零时,零乘以无穷的极限等于多少

当x趋于零时&#xff0c;零乘以无穷的极限是未定义。‌ 在数学中&#xff0c;0乘以无穷大&#xff08;0 ∞&#xff09;是一个未定义的表达式&#xff0c;因为它涉及到两个相互矛盾的概念&#xff1a;0乘以任何有限数都等于0&#xff0c;而无穷大乘以任何非零数都应该是无穷大…

聊聊Mysql的MVCC

1 什么是MVCC&#xff1f; MVCC&#xff0c;是Multiversion Concurrency Control的缩写&#xff0c;翻译过来是多版本并发控制&#xff0c;和数据库锁一样&#xff0c;他也是一种并发控制的解决方案。 我们知道&#xff0c;在数据库中&#xff0c;对数据的操作主要有2种&#…

C++——STL简介

目录 一、什么是STL 二、STL的版本 三、STL的六大组件 没用的话..... 不知不觉两个月没写博客了&#xff0c;暑假后期因为学校的事情在忙&#xff0c;开学又在准备学校的java免修&#xff0c;再然后才继续开始学C&#xff0c;然后最近打算继续写博客沉淀一下最近学到的几周…

MFC工控项目实例二十三模拟量输入设置界面

承接专栏《MFC工控项目实例二十二主界面计数背景颜色改变》 1、在SenSet.h文件中添加代码 #include "BtnST.h" #include "ShadeButtonST.h"/ // SenSet dialogclass SenSet : public CDialog { // Construction public:SenSet(CWnd* pParent NULL); //…

【Docker】Docker 实践与应用举例

目录 1. Docker 基本概念2. Docker 安装2.1 安装步骤2.2 验证安装 3. Docker 实践3.1 创建第一个 Docker 容器3.2 管理容器3.3 创建 Dockerfile3.4 数据卷 4. 应用举例4.1 Web 应用部署4.2 数据库容器化4.3 多容器应用 总结参考文献 Docker 是一个开源平台&#xff0c;用于自动…

倪师学习笔记-天纪-01

一、概要 介绍课程内容&#xff0c;介绍部分概念 二、具体内容 1、天纪内容 天机道&#xff1a;看象&#xff0c;使用斗数等工具人间道&#xff1a;看卦&#xff0c;使用易经地脉道&#xff1a;看风水地理 2、神 神与形对应&#xff0c;形是神的实例&#xff0c;神是形的…

python解释器配置

python解释器配置 Python 解释器是一种程序&#xff0c;用于读取和执行 Python 代码。Python 是一种高级编程语言&#xff0c;广泛应用于各种领域&#xff0c;包括 web 开发、数据科学、人工智能、自动化、科学计算等。Python 解释器的核心作用是将 Python 代码转换成计算机可…