Vue事件监听

最新推荐文章于 2024-09-19 18:19:08 发布

北栀໊ღ

最新推荐文章于 2024-09-19 18:19:08 发布

阅读量1.6k

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端学习

本文链接：https://blog.csdn.net/whlovedlw/article/details/124948763

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.v-on的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

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

使用给button绑定监听事件以及回调函数，@是的语法糖，也就是简写也可以使用。方法一般是需要写方法名加上()，在中可以省掉，如上述的。

2.v-on的传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<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="btn($event,'333')">+</button>
			<button type="button" @click="btn2($event)">+2</button>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {}
				},
				methods: {
					/* btn(value) {
						console.log(value);
					} */
					
					btn(e,value) {
						console.log(e);
						console.log(value);
					},
					btn2(e) {
						console.log(e);
					}
					
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

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

3.v-on的事件修饰词

(1).stop 阻止事件继续传播
(2).prevent 阻止标签默认行为
(3).capture 使用事件捕获模式,元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
(4).self 只当在 event.target 是当前元素自身时触发处理函数
(5).once 事件将只会触发一次
(6).passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

4.v-on的按键修饰符

(1).stop

.stop用于调用 event.stop，阻止事件冒泡。

  <div id="app">
    <div @click="alert('div')">
      <button @click.stop="alert('button')">点击</button>
    </div>
  </div>

  const vm = new Vue({
    el: '#app',
    methods: {
      alert(str) { alert(str); }
    }
  })

什么叫事件冒泡，就是当一个元素接收到事件后，会沿着DOM结构将事件逐层传递到其父元素上。而.stop事件修饰符可以简单快捷方便的处理事件冒泡

(2).prevent

.prevent用于调用 event.preventDefault()，阻止默认事件

  <!-- 点击提交按钮后，页面不会重载 -->
  <div id="app">
    <form v-on:submit.prevent="onSubmit">
      <input type="submit">
    </form>
    <!-- 也可以只有修饰符 -->
    <form v-on:submit.prevent>
      <input type="submit">
    </form>
  </div>

  const vm = new Vue({
    el: '#app',
    methods: {
      onSubmit() { console.log('submit'); }
    }
  })

什么叫默认事件，例如a标签的href跳转，浏览器的F5刷新。这些都是属于默认事件。我们可以通过.prevent阻止默认事件

(3).once

.once表示事件只触发一次

<!-- 点击两次button按钮，只弹出一次button -->
<div id="app">
  <button @click.once="alert('button')">点击</button>
</div>

const vm = new Vue({
  el: '#app',
  methods: {
    alert(str) { alert(str) }
  }
})

(4).capture

.capture事件捕获模式，可以提前捕获事件。

<!-- 此时先弹出div再弹出button -->
<div id="app">
  <div @click.capture="alert('div')">
    <button @click="alert('button')">点击</button>
  </div>
</div>

const vm = new Vue({
  el: '#app',
  methods: {
    alert(str) { alert(str) }
  }
})

5.v-if,v-else-if,v-else

v-if用于条件判断，判断Dom元素是否显示。

单独使用v-if，变量为布尔值，为true才渲染Dom.

v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<div v-if="age<18">小于18岁未成年</div>
			<div v-else-if="age<60">大于18岁小于60岁正值青壮年</div>
			<div v-else>大于60岁,暮年</div>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						age: 6
					}
				}
			})
		</script>
	</body>
</html>

(1)v-if的实例

在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
		<label for="user">用户</label>
		<input type="text" name="user" id="user" value="" placeholder="请输入用户" key="usermane"/>
	</span>
	
	<span v-else>
		<label for="email">邮箱</label>
		<input type="text" name="email" id="email" value="" placeholder="请输入邮箱" key="useremail"/>
	</span>
	<button type="button" @click="changetype">切换类型</button>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data(){
        return {
			isUser:true
		}
      },
	  methods:{ 
		  changetype(){
			  this.isUser = !this.isUser
		  }
	  }
    })
  </script>
</body>
</html>

7.v-show

除了 v-if，v-show也是用来决定某一个元素是否在页面中显示出来。

当经常需要切换某个元素的显示与隐藏时，使用v-show会更加节省性能上的开销，当只需要一次显示或隐藏时，使用v-if更合理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
           <button type="button" v-show="isshow">吃饭</button>
		   <button type="button" v-if="isshow">干饭</button>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						isshow:true
					}
				},
				methods: {
                 
				},
				computed:{
					
				}
			})
			
		</script>
	</body>
</html>