8 - Vue 学习笔记 - v-on的使用、v-if、v-else-if、v-else

v-on

在前端开发中，我们经常要和用户交互
这个时候，就必须监听用户所做的事件，比如点击，拖拽，键盘事件等等
在 Vue 中，我们使用 v-on 指令来监听事件

v-on介绍

作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event

基本使用

<div id="app">
	<h2>{
  {counter}}</h2>
	<!-- 可以直接写表达式 -->
	<!-- <button v-on:click="counter++">+</button> -->
	<button v-on:click="increment">+</button>
	<!-- 语法糖，简写 v-on: -> @	-->
	<button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
     
		el: "#app",
		data: {
     
			counter: 0
		},
		methods: {
     
			increment() {
     
				this.counter++;
			},
			decrement() {
     
				this.counter--;
			}
		}
	});
</script>

v-on 参数

当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：

• 情况一：在事件监听中，如果该方法不需要额外参数，那么方法后面的 () 可以不添加，也就是只写函数名。但是要注意：如果方法中本身需要一个参数，那么这种做法会默认把原生事件 event 参数传递进去。
• 情况二：如果同时传入某个参数时，需要 event ，可以通过 $event 传入事件。

<div id="app">
	<!-- 事件调用的方法没有参数	-->
	<button v-on:click="btn1Click()">按钮1</button>
	<button v-on:click="btn1Click">按钮2</button> <!-- 两种方式都可以正常调用 -->
	
	<button @click="btn2Click(123)">按钮3</button> <!-- 控制台打印 123 -->
	<button @click="btn2Click()">按钮4</button> <!-- 打印 undefined -->
	<button @click