VUE学习之v-on指令基础自用

最新推荐文章于 2023-08-18 16:57:00 发布

就这样征服你11

最新推荐文章于 2023-08-18 16:57:00 发布

阅读量232

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45882113/article/details/108622629

版权

v-on基础和简单实例

v-on的作用是用来事件监听的，是用来绑定一些事件的。绑定的一些事件就在自己的方法里面定义，定义完之后调用函数就行了。
有三种常用事件和两种调用方法：
单击，鼠标移入，双击
调用v-on： v-on:click:“method” 和@click:“method” 一般使用@

Vue首先要导入官方js

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

v-on方法为事件绑定元素

<div id="v_on">
	<input type="button" value="事件绑定"  v-on:click="方法"><!-- 单击事件 -->
	<input type="button" value="事件绑定"  v-on:click="方法"><!-- 鼠标移入事件 -->
	<input type="button" value="事件绑定"  v-on:click="方法"><!-- 双击事件 -->
	<input type="button" value="事件绑定"  @click="方法"><!-- 单击事件 -->
</div>

实例：

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-on指令</title>
	</head>
<body>
<div id="test">
	<input type="button" value="v-on指令" v-on:click="doIt" /><!--点击-->
	<input type="button" value="v-on简写"  @click="doIt" /><!--v-on 简写-->
	<input type="button" value="双击事件"  @dblclick="doIt" /><!-- 双击事件 -->
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
		var ap=new Vue({
			el:"#test",
			methods:{
				doIt:function(){
					alert("弹出一个测试内容");
				}
			},
		})
</script>
</body>
</html>

使用v-on指令更改页面元素

使用this获取当前对象
this.变量来获取当前变量
例：

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>v-on指令</title>
	</head>
<body>
<div id="test">
	<h2 @click="changFood">{{food}}</h2><!--显示文字，并添加单击事件-->
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
		var ap=new Vue({
			el:"#test",
			data:{
				food:"西蓝花炒蛋"
			},
			methods:{
				changFood:function(){
					console.log(this.food);
					this.food+="好好吃"//this调用对象
				}
			},
		})
</script>
</body>
</html>

自定义传参和事件修饰符

可以自定义函数参数，在调用时进行传参
事件修饰符可以在 @keyup.键盘符号将命令改为自定义提交
一般的事件修饰符为 @keyup.enter 即回车确定。

<div id="app">
	<input type="button" value="点击" @click="doIt(666)" /><!--自定义传参-->
	<input type="text" @keyup.enter="sayHi" />
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
	var app=new Vue({
		el:"#app",
		methods:{
			doIt:function(p1,p2){
				console.log("555");
				console.log(p1);
				console.log(p2);
			}
			sayHi:function(){
				alert("你吃饭了没");
			}
		}
	
	})
</script>

下面是个简单的计数器实例：

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" >
		<title>计数器</title>
	</head>
<body>
<div id="test">
	<div class="input_num">
		<button @click="sub">
			-
		</button>
		<span>{{num}}</span>
		<button @click="add">
			+
		</button>
	</div>
	
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	//创建Vue实例
	var app=new Vue({
		el:"#test",
		data:{
			num:1
		},
		methods:{
			add:function(){
				if(this.num<10){
					this.num+=1;
				}
				else{
					alert("最大别点了！");
				}
				
			},
			sub:function(){
				if(this.num>0){
					this.num-=1;
				}
				else{
					alert("最小了！别点了！");
				}
				
			}
		},
	})
</script>
</body>
</html>

在这里插入图片描述

就这样征服你11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习之v-on指令基础自用

v-on基础和简单实例Vue首先要导入官方js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>v-on方法为事件绑定元素有三种常用事件和两种调用方法：单击，鼠标移入，双击调用v-on： v-on:click:“method” 和@click:“method”<div id="v_on"> <input type="button" value="事件绑定"
复制链接

扫一扫