vue基础教学（4）

最新推荐文章于 2024-01-24 18:51:04 发布

I`ivresse

最新推荐文章于 2024-01-24 18:51:04 发布

阅读量368

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Taojia9958/article/details/124953823

版权

本文详细介绍了Vue.js中的v-on事件绑定，包括基本使用、参数传递、事件修饰词和按键修饰符。同时，讨论了v-if和v-show的用法及区别，以及在实际开发中如何解决回车与失去焦点事件的处理问题。

摘要由CSDN通过智能技术生成

一、 v-on的基本使用

1. v-on 的作用

用来给元素注册点击事件的

2.v-on 的语法

(1).v_on:事件名 ="事件函数"

(2).v-on:click 可以简写 @click

(3).v-on:mouseenter 可以简写 @mouseenter

3.v-on的注意点

(1).注册事件需要一个事件的函数

(2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法

<body>
		<div id="app">
			<h2>{
  {count}}</h2>
			<button type="button" @click="sub">-</button>
			<button type="button" @click="add">+</button>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data() {
					return {
						count:0
					}
				},
				methods:{
					add(){
						this.count++
					},
					sub(){
						this.count--
					}
				},
				computed:{
					
				}
			})
		</script>
	</body>

二、 v-on的参数传递

1.如需要传参在页面中传的是实参在methods中写的是形参.
2.如果在页面中没有写实参但是留有括号在在methods中写了形参会打印undefined
3.如果在页面中没有写实参也没有留有括号在在methods中写了形参会打印event
4.如果你想同时传事件和参数在页面中那就要第一参数写$event,第二个是参数
5.如果你只传事件那么在页面中可以完全不写括号或者btn2($event)

	<body>
		<div id="app">
			<button type="button" @click="btn('123')">按钮</button>
			<button type="button" @click="btn()">按钮</button>
			<button type="button" @click="btn">按钮</button>
			<button type="button" @click="btn1($event,'123')">按钮</button>
			<button type="button" @click="btn2($event)">按钮</button>
		</div>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data() {
					return {
						
					}
				},
				met