Vue2.0学习笔记（二）

最新推荐文章于 2023-03-13 13:00:18 发布

Senor2

最新推荐文章于 2023-03-13 13:00:18 发布

阅读量697

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Senor2/article/details/121303108

版权

1.前言

jQuery逐渐落后，但是我还是学习了jQuery（没必要花大力气学，认识会用即可，其实重点是要学习原生的js）。我的这次个人项目基本都是用jQuery写的，以后会逐渐使用vue，毕竟这样才能让我实切体会到两种开发模式的区别。所以现在我继续学习vue2.0，来看看新的开发模式给我们带来什么好处。留下此记。

2.MVVM模型

M：模型（model）：为data数据

V：视图（view）：html模板代码

VM：视图模型（Viewmodel）：可以理解为vue实例

跟MVC相比，其实就是多了一个VM，如果使用传统的MVC的话，Controller维护起来就比较困难，控制模型数据的改变，更改视图行为，就比较麻烦，所以我们使用VM用来数据绑定，更改视图行为，这样处理起来就比较敏捷。

3.数据代理

什么是Object.defineProperty

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

			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>

Object.defineProperty就是js中控制一个对象的某个属性，或定义一个新属性

vue中的数据代理其实就是利用了Object.defineProperty方法来给new出来的一个vue对象添加一个和vue中data里相同属性名的属性，所以vue中访问data里的属性，不需要this.data.name只需要this.name 就可以访问到，这是因为，我们在创建这个vue实例的时候，就已经把data中的数据代理给了vm也就是vue这个对象本身所以相当于vue里面也有了name这个属性。

	<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>
			<h2>学校地址：{{address}}</h2>
			<h2>{{age}}</h2>
		</div>
	</body>

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

4.事件处理

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<body>

		<!-- 准备好一个容器-->
		<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是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>

5.事件修饰符

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

<body>
		<!-- 准备好一个容器-->
		<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
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

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

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<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:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>

不演示。

主要讲一下冒泡和捕获。

简单理解冒泡就是：从里到外，从子到父

捕获就是：从外到里，从父到子

6.键盘事件

1.Vue中常用的按键别名：
                           回车 => enter
                           删除 => delete (捕获“删除”和“退格”键)
                           退出 => esc
                           空格 => space
                           换行 => tab (特殊，必须配合keydown去使用)
                           上 => up
                           下 => down
                           左 => left
                           右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2).配合keydown使用：正常触发事件。

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

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

<body>
	
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</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)
					console.log(e.target.value)
				}
			},
		})
	</script>

我使用了尚硅谷的例子附上它的视频

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

Senor2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0学习笔记（二）

1.前言jQuery逐渐落后，但是我还是学习了jQuery（没必要花大力气学，认识会用即可，其实重点是要学习原生的js）。我的这次个人项目基本都是用jQuery写的，以后会逐渐使用vue，毕竟这样才能让我实切体会到两种开发模式的区别。所以现在我继续学习vue2.0，来看看新的开发模式给我们带来什么好处。留下此记。2.MVVM模型M：模型（model）：为data数据V：视图（view）：html模板代码VM：视图模型（Viewmodel）：可以理解为vue实例跟MVC相比，.
复制链接

扫一扫