Vue2复习2事件处理，事件修饰符，键盘事件，computed，watch

最新推荐文章于 2024-01-30 15:26:01 发布
最新推荐文章于 2024-01-30 15:26:01 发布
阅读量189 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40746230/article/details/125357243
版权

事件处理的基本使用 

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 lang="en">
<head>
    <meta charset="UTF-8">
	<script type="text/javascript" src="../js/vue.js"></script>
    <title>事件处理</title>
</head>
<body>
    <div id="root">
        <h2>{{name}}在学习</h2>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <button @click="showInfo2(66,$event)">点我提示信息2</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false
        new Vue({
            el:'#root',
            data:{
                name:'zt'
            },
            methods: {
                showInfo1(event){
                 alert('showInfo1你好')
                },
                showInfo2(number,event){
                 console.log(number)
                 console.log(event)
                }
            }
        })
    </script>
</body>
</html>

 2，事件修饰符

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

 2.stop：阻止事件冒泡（常用）；

 3.once：事件只触发一次（常用）；

 4.capture：使用事件的捕获模式；

  5.self：只有event.target是当前操作的元素时才触发事件；

  6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!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>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.baidu.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:'zt'
			},
			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>
</html>

 3.键盘事件

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.自定义键名 = 键码，可以去定制按键别名

<!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="按下回车提示输入" @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:'zt'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

 计算属性与监视

1.定义：要用的属性不存在，要通过已有属性计算得来。
 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
 3.get函数什么时候执行？
  (1).初次读取时会执行一次。
  (2).当依赖的数据发生改变时会被再次调用。
 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
 5.备注：
   1.计算属性最终会出现在vm上，直接读取使用即可。
   2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<!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">
            <p> 插值语法的实现firstName.slice(0,3)</p>
            姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
            <p>methods实现 return this.firstName.slice(0,3)+this.lastName  </p>
            全名：<span>{{fullName()}}</span>
            <p>computed实现 </p>
            全名：<span>{{fullNames}}</span>

		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
                firstName:'z',
				lastName:'t'
			},
            methods: {
                fullName(){
                    return this.firstName.slice(0,3)+this.lastName
                }
            },
           computed:{
            //完整写法
              /*
              fullNames:{
                //有什么作用 有人读取fullNames,get就会被调用，切返回值最为fullNames的值  
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                //vm上fullNames放入的是get的返回值
                //
              
                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]
					}
                   
              

              } */
                   //简写 只考虑读 不考虑 修改 只用简写形式
				fullNames(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
           }
		})
	</script>
</html>

 监视属性

<!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>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>

监视属性watch
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
 1).new Vue时传入watch配置
 2).通过vm.$watch监视

<!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>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

深度监视deep

 深度监视：

   (1).Vue中的watch默认不监测对象内部值的改变（一层）。

   (2).配置deep:true可以监测对象内部值改变（多层）。

   备注：

    (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

   (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

监视简写

<!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>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
			//  isHot(newValue,oldValue){
			// 		console.log('isHot被修改了',newValue,oldValue,this)
			// 	} 
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

	
	vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) 

	</script>
</html>

计算属性computed和监视属性watch的区别

 1.computed能完成的功能，watch都可以完成。
 2.watch能完成的功能，computed不一定能完成，

例如：watch可以进行异步操作。
两个重要的小原则：
 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
 这样this的指向才是vm 或 组件实例对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>

长沙xtt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端框架Vue期末复习资料
11-13
4. 事件修饰符 * .prevent: 阻止事件的默认行为 * .stop: 停止事件冒泡 * .once: 事件只触发一次 * .self: 只有 event.target 是当前操作的元素才触发事件 * .capture: 使用事件的捕获模式 * .passive: 事件的默认...
Vue(二)
qq_60587956的博客
04-20 857
事件处理 事件的基本使用 事件的基本使用： 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> &...
vue--watch监听器、修饰符、计算属性、自定义指令、生命周期
qq_58982380的博客
04-14 2115
一、watch监听器 watch是vue实例的一个属性 主要作用是监听data中的数据 当data中的数据改变的时候 watch就会触发 语法： 写在el data methods 的同级 watch:{ ​ 你要监听的数据（newval,oldval）{ ​ 你要完成的逻辑 ​ } } 二、创建脚手架 1.在全局下载vue脚手架（除非你重装系统了 或者重装node了）否则不需要再次下载 npm install -g @vue/cli@4 2.查看版本 vue --version 3.把cmd
Vue2键盘事件
weixin_64770583的博客
07-13 839
键盘绑定事件
将Vue2中的console.log调试信息移除
01-30 414
介绍怎么使用 'babel-plugin-transform-remove-console' 移除前端项目中所有的console.log
vue项目打包清除console.log的4种方法
小木木的博客
01-10 8266
4种打包清除console.log的方法
Python全栈（六）项目前导之8.Vue事件绑定、计算属性、表单输入绑定和自定义组件
01-08
修饰符.lazy.number.trim四、自定义组件的基本使用 一、事件绑定 1.HTML元素事件绑定 事件绑定就是在HTML元素中，通过v-on或者 @ 绑定事件。 事件代码可以直接放到v-on后面，也可以写成一个函数。 测试如下： Vue...
Vue 2.x教程之基础API
11-27
本文主要介绍的是关于Vue 2.x之基础API的相关内容，主要内容如下 ... 事件处理 (监听、修饰符、key修饰符) 表单输入绑定（text、checkbox、radio、select） 一、模板语法 文本插值 - 使用 `{{ }} / <s
Vue.js面试题.pdf
最新发布
05-01
10. Vue.js中的事件修饰符有哪些？请说明常用的事件修饰符及其作用。 11. Vue.js中如何实现表单输入数据的双向绑定？请描述v-model指令的使用。 12. Vue.js中的Vuex是用来做什么的？它如何帮助管理Vue
Vue面试题整合.txt
07-12
Vue面试题整合，1、Vue 解决了什么问题。2、Vue 的生命周期(11 个钩子函数)。3、watch、computed 和 methods 的区别。4、Vue.js 的特点。5、插槽的理解。6、vue-router 有哪几种导航钩子。...22、Vue 修饰符有哪些
vue-打包上线之后去除console.log（）
路虽远行则将至，事虽难做则必成。
06-07 1599
在开发阶段我们经常为了调试代码会打印一些数据，方便查看和修改数据但是这些打印如果在生产环境下展示的话就不太有好了，可以借助插件和代码写法来解决不建议使用插件，可以在main.js（入口文件）和vue.config.js(环境文件)来解决。
Vue2.0开发之——Vue基础用法-事件绑定-按键修饰符(21)
我的博客
11-17 556
什么是@keyup@keyup.esc示例@keyup.enter示例more@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件事件代码事件描述回车按键松开左键按键松开右键按键松开@keyup.up上键按键松开下键按键松开删除键松开@keyup.escesc键松开。
【vue】 将Vue2中的console.log()调试信息移除
amoureux555的博客
02-16 683
将Vue2中的console.log()调试信息移除 | 如何将控制台log移除
将Vue2中的console.log()调试信息移除
beeworkshop的博客
04-17 1198
1. 安装babel-plugin-transform-remove-console插件 cnpm install babel-plugin-transform-remove-console --save-dev 2. 在babel.config.js配置文件中加入配置 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ // 加入以下内容，引入插件。 'transform-rem
vue2去除控制台console
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
01-05 595
vue2去除控制台console。
vue 打包关闭console.log
weixin_35755823的博客
01-03 1133
在 Vue 项目的 webpack 配置文件中，你可以使用一个插件来移除 console.log 语句。 首先，安装这个插件： npm install --save-dev babel-plugin-transform-remove-console 然后，在 webpack 配置文件中的 module.rules 数组中的 babel-loader 配置中添加一个 plugins 选项： mod...
如何在vue项目打包时清除console.log()
m0_60692814的博客
09-02 4783
需求：vue项目打包时清除console.log() 代码： 在vue.config.js中，添加如下配置： chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) } 说明：实际上这个配置会...
vue2 生命周期详解
KID963931445的博客
03-05 1828
beforeCreate：创建之前（el、data和message都还是undefined,不可用的） created：创建完毕（能读取到数据data的值,但是DOM还没生成） beforeMount：挂载之前（生成DOM,但此时{{ message }}还没有挂载data中的数据） mounted：挂载完毕（{{ message }}已经成功挂载渲染data的值） beforeUpdate：更新之前 updated：更新完毕 beforeDestroy：销毁之前 destroyed：销毁完毕（实例与视..
【精讲】vue 比较watch侦听方法、v-on(基本使用、修饰符、传参）
m0_59505309的博客
07-28 568
【精讲】vue 比较watch方法、v-on(基本使用、修饰符、传参）
vue键盘事件修饰符
09-14
下面是一个示例代码，用于演示如何在 Vue.js 中使用键盘事件修饰符： ```html export default { methods: { handleEnter() { console.log('Enter key pressed'); }, handleTab() { console.log...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值