理论知识
- 双向数据绑定中，数据有多个来源，包括后台业务数据，用户网页操作数据等。对于用户网页操作，vue提供了事件机制，对用户操作做出反应。
- 使用方式 v-on:标准事件='事件处理逻辑'。 标准实践包括点击（click）、焦点（focus）等。在标签中使用时有四种方式,以点击事件为例
- < button v-on:click='msg++'>按钮 //直接将代码逻辑分配给点击事件
- < button v-on:click='add'>按钮//将方法名赋值给事件
- < button @click='add'>按钮//vue语法缩写
- < button v-on:click='add()'>按钮1//将带括号的方法名赋值给事件
- 简单处理逻辑可以直接使用代码，此时可以直接访问data属性中的变量。对于复杂的处理逻辑，需要在methods（包含多个函数，因此是复数形式）属性中定义方法，在方法中访问data属性要使用this关键字，这说明vue中存在作用域。在data中声明的变量是全局变量，需要使用this（指向当前vue实例）。在methods中声明的变量属于局部变量，只能在方法内部使用。
- methods属性中方法
声明
方法名：function(){ 代码逻辑 }- 调用
使用方法给事件赋值时，有两种方式- 直接方法名称，不带括号，即 @click='add'。此时方法会内置event事件对象（dom）作为方法的参数，在方法的代码逻辑中可以直接使用，event.target.tagName 【注意写法，是属性不是方法，无括号】
- 使用带括号的方法，即@click='add(var1,var2)'.此时如果要传递event事件对象，需要在方法的形参列表中，最后一个位置添加$event,即 @click='add(var1,var2,$event)',之后才可以被方法中的代码逻辑使用event对象。
- 在使用事件时，可通过vue提供的事件修饰符，对事件的行为进行限制。比如利用使用@cllick.stop阻止dom事件冒泡，@click.prevent阻止元素默认事件。vue的事件修饰符都可以使用原生的js来完成，不过vue更简便。
- 按键事件修饰符，v-on:keyup.enter='事件处理方法'，其用法和作用类似事件修饰符。
- 自定义按键修饰符。vue提供一些常用的类似enter、delete等修饰符，用户也可以自定义。
- 定义 在script标签中声明 Vue.config.keyCodes.xxxx= 数值。 其中xxxx是该按键的别名。数值必须可以通过event.keyCodes获取，不能凭空创造。这类似java中声明全局变量。
- 使用 同一般修饰符方式一样。v-on:keyup.xxxx='事件处理函数'
- 事件修饰符具体参看 官网事件修饰符1 官网事件修饰符2
实践
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div>{{ msg }}</div>
<button v-on:click='msg++'>按钮</button> //直接将代码逻辑分配给点击事件
<button v-on:click='add'>按钮</button>//将方法名赋值给事件
<button @click='add'>按钮</button>//vue语法缩写
<button v-on:click='add()'>按钮1</button>//将带括号的方法名赋值给事件
<div>
<form >
{{ usrname}} ++ {{ psd }}
<input type="text" name="" v-model='usrname'>
<input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'> //使用自定义按键修饰符
<button @click='sub' >提交</button>
</form>
</div>
</div>
<script type="text/javascript">
Vue.config.keyCodes.aaa= 65 //自定义按键修饰符
var app = new Vue({
el: '#app',
data:{
msg:'123'
},
methods:{
add:function(){
var msg='456';
console.log(msg);//方法内部的局部变量，输出456
this.msg++; //this代表vue实例
}，
sub:function(){
alert(this.psd);
}
}
})
</script>
</body>
</html>