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="btn2Click">按钮5</button> <!-- 打印 event 对象 -->
	<!-- 在事件定义时，写方法时省略了小括号，但是方法本身需要一个参数，这个时候 Vue 会默认将
			 浏览器生产的 event 事件对象作为参数传入到方法 -->
	
	<!-- 方法定义时，我们需要 event 对象，同时有需要其他参数	-->
	<button @click="btn3Click">按钮6</button> <!-- 先打印 event 再打印 undefined -->
	<button @click="btn3Click(123,event)">按钮7</button> <!-- 打印 123 和 undefined ，同时 Vue 报错 -->
	<!-- Vue 会把 event 看成 data 里面的属性，没有找到所以报错	-->
	<!-- 再调用方法时，需要 event 使用 $event -->
	<button @click="btn3Click(123,$event)">按钮8</button> <!-- 正确让第二个参数为 event  -->
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		methods: {
			btn1Click() { // 无参函数
				console.log('btn1Click');
			},
			btn2Click(param) { // 需要一个参数
				console.log(param);
			},
			btn3Click(param, event) {
				console.log(param, event);
			}
		}
	});
	
	// 如果函数需要参数，但是也没有传入，也不会报错，函数的形参为 undefined
	function func(name) {
		console.log(name);
	}
	
	func(); // 控制台显示 undefined
</script>

v-on 修饰符

再某些情况下，拿到 event 的目的可能是进行一些事件处理
Vue 提供了修饰符来帮助我们方便的处理一些事件

• .stop - 调用 event.stopPropagation()
• .prevent - 调用 event.preventDefault()
• .{ keyCode | keyAlias } - 只当事件是从特定的键触发时才触发回调
• .native - 监听组件根元素的原生事件
• .once - 只触发一次回调

<div id="app">
	<div @click="divClick">
		<button @click="btnClick">按钮1</button>
		<!-- 点击按钮，父元素的事件也会被触发，即事件冒泡 -->
	</div>
	
	<div @click="divClick">
		<!-- 1. 阻止事件冒泡 .stop	-->
		<button @click。stop="btnClick">按钮2</button>
	</div>
	
	<!-- 2. .prevent 修饰符的使用	-->
	<form action="baidu">
		<!-- 我们点击提交 input，会自动提交，如果我们需要我们自己点击以后，通过特定的操作再提交，就要阻止默认的提交行为 -->
		<input type="submit" value="提交1" @click="submitClick"> <!-- 有打印 submitClick，也有提交 -->
		<input type="submit" value="提交2" @click.prevent="submitClick"> <!-- .prevent 阻止了默认事件，只调用了方法，没有提交跳转 -->
	</form>
	
	<!-- 3. 监听某个键盘键的点击	-->
	<input type="text" @keyup="keyUp"> <!-- 我们在这个文本框中每按下抬起一次键盘，就会打印信息 -->
	<input type="text" @keyup.enter="keyUp"> <!-- .enter 只有抬起的键是 Enter 才会打印信息 -->
	
	<!-- 4. .once 修饰符的使用	-->
	<button @click.once="onceClick">once</button> <!-- 只有第一次点击会打印信息，之后就不会打印 -->
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		methods: {
			btnClick() {
				console.log('btnClick');
			},
			divClick() {
				console.log('divClick')
			},
			submitClick() {
				console.log('submitClick');
			},
			keyUp() {
				console.log('KeyUp');
			},
			onceClick() {
				console.log('onceClick');
			}
		}
	});
</script>

---

v-if、v-else-if、v-else 的基本使用

v-if

<div id="app">
	<!-- 在某些情况下。我们希望这个 message 在满足某些情况下再渲染出来，这个时候就可以使用 v-if	-->
	<h2 v-if="false">{{message}}1</h2> <!-- 不显示 -->
	<h2 v-if="isShow">{{message}}2</h2> <!-- 显示 -->
	<!-- v-if="" 里面可以写布尔值，或布尔类型的变量	-->
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			isShow: true
		}
	});
</script>

我们可以通过控制台，修改 isShow 的值，观察变化

v-else

<div id="app">
	<h1 v-if="isShow">isShow为true时，显示我</h1>
	<h1 v-else>否则，isShow为false时，显示我</h1>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello",
			isShow: true
		}
	});
</script>

我们可以通过控制台，修改 isShow 的值，观察变化

v-else-if

<div id="app">
	<h2 v-if="score>=90">优秀</h2>
	<h2 v-else-if="score>=80">良好</h2>
	<h2 v-else-if="score>=60">及格</h2>
	<h2 v-else>不及格</h2>
</div>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			score: 99
		},
		computed: {
			result() {
				let showMessage = '';
				if (this.score >= 90) {
					showMessage = '优秀';
				} else if (this.score) {
					
				}
			}
		}
	});
</script>

但是一般情况我们不推荐这样使用，当逻辑复杂的时候，我们可以使用到之前学过的 computed 计算属性，这样可以让我们前端页面看起来简洁而不复杂。

// 在 computed 添加如下代码
computed: {
	result() {
		let showMessage = '';
		if (this.score >= 90) {
			showMessage = '优秀';
		} else if (this.score >= 80) {
			showMessage = '良好';
		} else if (this.score >= 60) {
			showMessage = '及格';
		} else {
			showMessage = '不及格';
		}
		return showMessage;
	}
}
// 在 html 中使用 {{result}} 展示