事件绑定
要想做一个功能复杂的前端应用,肯定离不开与用户的交互,用户交互最相关的就是事件处理,双向数据绑定中v-model指令它的底层用到的就是事件,所以vue专门提供了一种事件处理的语法结构,其实用到的还是指令,我们称之为事件绑定,之前有一种说法叫做数据绑定(把数据填充到页面中的标签里面)其实它们之间所做的工作是类似的,就是把数据model和模版view关联起来,只不过是对于事件处理来说绑定的是具体的操作。
vue中如何处理事件?
- v-on指令用法
<input type = 'button' v-on:click = 'num ++'/>
v-on后面跟着冒号:+标准事件名称(如:click/focus/blur)=再跟具体的事件处理逻辑(如‘num++’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按钮控制num值发生变化的时候,页面的内容肯定也是跟着变的因为数据是响应式的 -->
<button v-on:click = 'num++'>点击</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
}
});
</script>
</body>
</html>
- v-on 简写形式
<input type = 'button' @click = 'num++'/>
就是把v-on:
改成@
,vue的设计者还是非常替程序员考虑的,尽量把编程模式做的简答化,相对比v-on的简写模式要写的字符减少了,敲代码的时候更方便。实际开发中也是用v-on:的简写模式@
<button @click = 'num++'>点击2</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按钮控制num值发生变化的时候,页面的内容肯定也是跟着变的因为数据是响应式的 -->
<button v-on:click = 'num++'>点击</button>
<button @click = 'num++'>点击2</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
}
});
</script>
</body>
</html>
如果把数据的处理逻辑全部写在v-on:click = ‘XX’中合理吗?
明显是不合理的,因为随着业务量的复杂,逻辑代码比较多的话,可读性明显是不好的,应该要能想到 逻辑代码得抽取到一个方法代码里面,Vue方法 定义在哪个位置呢?在vue当中专门提供了一个属性来定义我们需要的一个方法,叫methods,它的值是一个对象,在对象当中可以定义很多的方法,比如说起个名handle:function(){},
里面可以实现控制逻辑,比如‘num++’
逻辑应该写在handle方法里。
事件函数的调用方式
- 直接绑定函数名称
<button v-on:click = 'say'> Hello</button>
- 调用函数
<button v-on:click = 'say()'>Say hi </button>
事件函数的调用方式–直接绑定函数名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按钮控制num值发生变化的时候,页面的内容肯定也是跟着变的因为数据是响应式的 -->
<button v-on:click = 'num++'>点击</button>
<button @click = 'num++'>点击2</button>
<button @click = 'handle'>点击3</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods: {
handle:function() {
// 在方法里面num无法直接访问,要通过this才能得到num的值
// this指的是谁呢?通过vm可以访问到data中的属性
// this就是vm也就是vue实例对象
console.log(this === vm)
this.num++;
}
},
});
</script>
</body>
</html>
console.log(this === vm)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<div>{{num}}</div>
<div>
<!-- 按钮控制num值发生变化的时候,页面的内容肯定也是跟着变的因为数据是响应式的 -->
<button v-on:click = 'num++'>点击</button>
<button @click = 'num++'>点击2</button>
<button @click = 'handle'>点击3</button>
<button @click = 'handle()'>点击4</button>
</div>
</div>
<script type = 'text/javascript' src="vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
methods: {
handle:function() {
// 在方法里面num无法直接访问,要通过this才能得到num的值
// this指的是谁呢?通过vm可以访问到data中的属性
// this就是vm也就是vue实例对象
console.log(this === vm)
this.num++;
}
},
});
</script>
</body>
</html>
事件函数的调用方式–调用函数
<button @click = 'handle()'>点击4</button>
事件绑定的格式v-on
只是指令,冒号:
后面跟标准事件名称,并且可以将v-on:
简写成@
;事件函数的调用方式有两种一种是直接绑定函数名,一种是调用函数;函数必须定义在methods的属性当中,还要知道函数中的this是什么含义,指的是vue的实例对象。