Vue（9）v-on 事件绑定+$set()页面数据动态更新

v-on可以绑定很多种类事件，例如click、dbclick、mouseover、change等，通常写为 v-on:click="a()" 也可以简写为 @click="a()"

下面使用v-on事件绑定实现每次点击按钮都使得数组中的数值都加上1，并实时动态更新在html上

<template>
	<div id="testa">
		{{name}}
		<br />
		<button id="a" @click="add()">数组值加1</button>
		<br />
		
	</div>
</template>

<script>
	export default {
		name: 'test',
		data() {
			return {
				name: [2,3,56,87,45,21,35,12]
			};
		},
		methods:{
			add(){
				for(var i in this.name){
					this.$set(this.name,i,this.name[i]+1);//obj，index，val  //修改对象 索引 修改后的值
				}
			}
		}
	};
</script>
<style>
	#a{
		width: 100px;
		height: 50px;
	}
</style>

结果：

注意 this.$set只对数组或者对象数组有效，若只是一个值，vue会直接进行动态更新，不需要用$set,

<template>
	<div id="testa">
		{{name}}
		<br />
		<button id="a" @click="add()">数组值加1,点击次数{{clicknum}}</button>
		<br />
		
	</div>
</template>

<script>
	export default {
		name: 'test',
		data() {
			return {
				name: [2,3,56,87,45,21,35,12],
				clicknum:0
			};
		},
		methods:{
			add(){
				for(var i in this.name){
					this.$set(this.name,i,this.name[i]+1);
				}
				this.clicknum++;//新增
			}
		}
	};
</script>
<style>
	#a{
		width: 100px;
		height: 50px;
	}
</style>

同时v-on也可以添加事件对象$event
code：

/template
<button id="a" @click="change($event)">{{btnText}}</button>

//script
change(e){
				console.log(e);
			}

来看看console的结果：

其中target最为常用，里面包含了按钮的所有信息

v-on还有很多修饰符
.stop - 调用 event.stopPropagation()。 阻止冒泡，例如button及其父节点div都有点击事件，若不阻止冒泡，则点击button都会响应
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法为 @click.修饰符="a()" 其中还包含按键的响应，详情见官方文档：
https://cn.vuejs.org/v2/api/#v-on