vue的进阶v-on 事件

最新推荐文章于 2023-06-27 21:39:36 发布

嘟噜嘟噜123

最新推荐文章于 2023-06-27 21:39:36 发布

阅读量129

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62371223/article/details/125746884

版权

v-on事件

简写

v-onclick   => @click
简写@

响应函数


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="num--">{{num}}</button>
			<button v-on:click="num++">{{num}}</button>
			<hr/>
			<button @click="greet">问候</button>
			<hr/>
			<button @click="say('我喜欢你')">传参1</button>
			<button @click="say('我好中意你')">传参2</button>
			<button @click="say('我足贵你！')">传参3</button>
			<button @click="doit($event,'abc')">事件对象$event</button>
		</div>
		<script>
		var vm = new Vue({
			el:"#app",
			data(){
				return {num:1}
			},
			methods:{
				greet(e){
					alert("你好鸭"+this.num);
					// this返回了num值
					// this指的当前vue创建的实例
				},
				say(msg){
					alert("你再好,咱也不说:"+msg);
				},
				doit(e,s){
					console.log(e,s);
				}
			}
		})
		 // 函数执行返回对象,有局部作用域
		 console.log(vm)
		</script>
	</body>
</html>

@click=“greet”

methods:{
greet(e){} }

基本的按键修饰符

.enter
.esc
.up
.down
.left
.right
.delete (捕获“删除”和“退格”键)

通过vue事件实现选项卡


<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<script src="./js/vue.js"></script>
   	<style>
   	.active{color:#f70;}
   	</style>
   </head>
   <body>
   	<div id="app">
   		<button  @click="num=1" :class="num==1?'active':''">A</button> 
   		<button  @click="num=2" :class="num==2?'active':''">B</button> 
   		<button  @click="num=3" :class="num==3?'active':''">C</button> 
   		<div v-if="num==1">内容A</div>
   		<div v-if="num==2">内容B</div>
   		<div v-if="num==3">内容C</div>
   	</div>
   	<script>
   	var vm = new Vue({
   		el:"#app",
   		data(){
   			return {num:1}
   		},
   		 
   	})
   	 // 函数执行返回对象,有局部作用域
   	 console.log(vm)
   	</script>
   </body>
</html>

vue的选项

template 模板
el:指定模板
data 数据
methods 方法
components 组件
computed 计算
watch监听
filters 过滤
directives自定义指令
mounted dom挂载完毕

嘟噜嘟噜123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的进阶v-on 事件

响应函数基本的按键修饰符.enter.esc.up.down.left.right.delete (捕获“删除”和“退格”键)通过vue事件实现选项卡vue的选项template 模板el:指定模板data 数据methods 方法components 组件computed 计算watch监听filters 过滤directives自定义指令mounted dom挂载完毕...
复制链接

扫一扫