vue学习-05-方法methods

methods

vue的options中的其中一个

使用v-on:xx在标签中绑定事件：v-on-xx可以缩写为@xx

<script>
		var app = new Vue({
			el:'#app',
			data:{
				param: '参数'
			},
			methods: {
				btn1Click() {
					console.log("btn1点击")
				},
				btn2Click(param) {
					console.log(param)
				},
				btn3Click(param) {
					console.log(param)
				},
				btn4Click(param ,event) {
					console.log(param,event)
				}
			}
		});
	</script>

<div id="app">
			<!-- 方法没有参数()可以省略 -->
			<button @click="btn1Click">btn1</button>
			<!-- 方法有一个参数但省略了()，会将event对象传入 -->
			<button @click="btn2Click">btn2</button>
			<!-- 方法有一个参数正常传入参数 -->
			<button @click="btn3Click(param)">btn3</button>
			<!-- 多个参数传入event对象：使用$envent -->
			<button @click="btn4Click(param,$event)">btn4</button>
		</div>

如果在一个方法中有一个参数，在调用时没有传参，默认会将event对象传过来。挥着显示的在标签使用函数通过$event作为参数传递

<button @click="btn1Click">btn1</button>
<button @click="btn1Click($event)">btn1</button>

methods: {
				btn1Click(e) {
					console.log(e)
				}
			}

方法修饰符

.stop

<div @click="divClick" style="border: #00FFFF solid;">
				div
				stop修饰阻止向上冒泡
				<button @click.stop="btnClick">按钮</button>
			</div>

结果：点击button不会向上传递执行div标签中的click方法

.capture

<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
			<div v-on:click.capture="out">
				外层div，先执行外层的监听事件
				<button @click="btnClick">内层</button>
			</div>

与.stop区别：外层使用.capture修饰的方法会先执行，然后才交由内部元素

.prevent

<form action="" method="post">
	<!-- 提交事件不再重载页面,取消默认的提交 -->
	<input type="submit" @click.prevent="submit" value="submit提交"/>
</form>

这样就不会默认执行表单的提交到action

.self

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
			<!-- 即事件不是从内部元素触发的 -->
			<div v-on:click.self="out">
				外层div本身才能触发，内层元素不能
				<button @click="btnClick">内层</button>
			</div>

只有点击div才会执行out方法，点击button不会触发out