Vue——03-01v-on的基本使用、参数传递、以及v-on的修饰词

最新推荐文章于 2024-01-27 10:23:40 发布

Southern Wind

最新推荐文章于 2024-01-27 10:23:40 发布

阅读量378

点赞数

分类专栏： Vue 文章标签： html javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/120864956

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

1、v-on的基本使用

比如设置点击事件就使用v-on:"事件"对应的写法为

<button type="button" v-on:click="btn1">按钮一</button>

语法糖写法为：

<button type="button" @click="btn1">按钮一</button>

打印结果：

这里举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{count}}</h2>
			      <button v-on:click="count++">加</button>
			      <button v-on:click="count--">减</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					count :0
				},
			})
		</script>
	</body>
</html>

打印结果：

第二种写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<h2>{{count}}</h2>
				  <button @click="increment" type="button">加</button>
				  <button @click="decrement()" type="button">减</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					count :0
				},
				methods:{
					increment(){
						this.count ++;
					},
					decrement(){
						this.count --;
					}
				}
			})
		</script>
	</body>
</html>

效果一致

2.参数传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<button @click="btnClick">点击1</button>
			<button @click="btnClick2()">点击2</button>
			<button @click="btnClick3(123)">点击3</button>
			<button @click="btnClick4()">点击4</button>
			<button @click="btnClick5">点击5</button> <!-- 事件调用方法传参，写函数时候省略小括号，但是函数本身需要传递一个参数 -->
			<button @click="btnClick6($event,123)">点击6</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					btnClick() {
						console.log('点击了***');
					},
					btnClick2() {
						console.log('点击了2***');
					},
					btnClick3(value) {
						console.log(value);
					},
					btnClick4(value) {
						console.log(value);
					},
					btnClick5(e) {
						console.log(e);
					},
					btnClick6(e, value) {
						console.log(e);
						console.log(value);
					},
				},
			})
		</script>
	</body>
</html>

打印效果如下：

事件没传参，可以省略()
事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去
如果同时需要传入某个参数，同时需要event是，可以通过$event传入事件。

3、vue的修饰词

.stop的使用，阻止冒泡
prevent 阻止默认行为。
.enter监听键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on的参数传递</title>

	</head>
	<body>
		<div id="app">
			<div @click="divClick">
				<button @click.stop="btnClick">阻止事件冒泡</button>
			</div>
			<form action="www.baidu.com" method="post">
				<button type="submit" @click.prevent="submitClick">提交</button>
			</form>
			<form @submit.prevent=''>
				账号<input type="text" name="user" @input="qqq"/>
				密码<input type="text" name="password" @keyup.enter="submit" />
				<input type="submit" value="登录" />
			</form>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {

				},
				methods: {
					btnClick() {
						console.log('点击了btn');
					},
					divClick() {
						console.log('点击了div');
					},
					submitClick() {
						console.log("提交被阻止了")
					},
					submit() {
						console.log("keyup点击")
					},
					qqq(){
						console.log('input被监听');
					}
				},
				created(){
					document.onkeydown=((e)=>{
						e = window.event || e
						console.log(e);
						if(e.keyCode===13){
							this.submit()
						}
					})
				}
			})
		</script>
	</body>
</html>

Southern Wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue——03-01v-on的基本使用、参数传递、以及v-on的修饰词

1、v-on的基本使用比如设置点击事件就使用v-on:"事件"对应的写法为<button type="button" v-on:click="btn1">按钮一</button>语法糖写法为：<button type="button" @click="btn1">按钮一</button>打印结果：这里举个例子：<!DOCTYPE html><html> <head> &lt...
复制链接

扫一扫