v-on(@)
事件绑定-基本使用
使用v-on给标签绑定事件。
web端网页应用程序开发，事件是一个不可或缺的技术。
在vue中给元素进行事件绑定，需要通过v-on:指令实现，也使用@符号，@是v-on:的简写，使用更方便。
事件类型：
- 鼠标事件：onclick ondblclick onmouseenter onmouseleave onmouseover onmousedown等等。
- 键盘事件：onkeyup onkeydown onkeypress 等等。
语法：
<tag v-on:事件类型="事件处理驱动"></tag>
<!-- @符号，简便用法，推荐使用-->
<tag @事件类型="事件处理驱动"></tag>
<div @click="事件处理驱动"></tag>
<script>
var vm new Vue({
el:xx
data:xx,
// 给当前vue实例声明方法，以供事件调用
methods:{
名称：function(){},
名称(){}
}
})
</script>注意：
- 事件处理驱动需要通过methods定义。
- 被绑定的事件类型可以是 click、dblclick、keyup、keydown等等，不需要设置on标志。
案例：
<div id="app">
<h2>事件操控</h2>
<button v-on:click="say()">说</button>
<!--@是 v-on: 的简写，推荐使用，记住-->
<button @click="say()">说</button>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
},
// 给Vue实例声明方法，该方法可以给事件使用
methods:{
say(){
console.log('hello,北京')
}
}
})
</script>事件绑定-传递参数
vue“单击”事件参数的3种类型：
- 有声明()，也有传递实参，形参就代表被传递的实参。
- 有声明(),但是没有传递实参，形参就是undefined。
- 没有声明()，第一个形参就是事件对象 [object MouseEvent/鼠标事件对象]。
- 由于事件类型不一样，参数所代表的事件对象也会不同。
案例：
<div id="app">
<h2>事件操控</h2>
<p><button @click="delA(301)">删除A</button></p>
<p><button @click="delB()">删除B</button></p>
<p><button @click="delC">删除C</button></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
methods:{
delA(id){
console.log('id为'+id+'的商品被删除了') // 301
},
delB(id){
console.log('id为'+id+'的商品被删除了') // undefined
},
delC(id){
console.log('id为'+id+'的商品被删除了') // [object MouseEvent/鼠标事件对象]
}
}
})
</script>事件绑定-访问data成员
根据业务需要，事件在执行过程中需要对Vue实例的data数据进行操作，通过this关键字实现。
this代表Vue实例对象，并且针对data或methods成员都可以直接进行调用。
案例：
给data声明address成员，值为“铁岭”。
设置按钮，使得单击后控制台可以输出“铁岭是一个大城市”。
<button @click="getInfo()" >获取数据</button>
<script>
var vm = new Vue({
el:'#app',
data:{
address:'铁岭'
},
methods:{
getInfo:function(){
// 通过 this关键字 获得 data区域的数据信息
console.log(this.address+'是一个大城市');
}
}
})
</script>事件绑定-this指向
在Vue实例内部包括不限于methods方法中，this关键字是Vue实例化对象，具体与 new Vue() 是一样的，并且其可以对 data 和 methods成员进行直接访问。
可以理解为this和vm是同一个对象的两个不同名字，this === vm。
<div id="app">
<h2>事件操控</h2>
<p><button @click="say()">说</button></p>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
city:'北京'
},
methods:{
say(){
console.log(this) // 是对象，具体是new Vue()的对象，构造器是Vue
// 外部的vm也是Vue实例化对象
// this 和 vm 是同一个Vue实例化对象的两个不同步名字而已，它们全等于
console.log(this === vm) // true
// (实例化对象的构造函数 new XXX,XXX就是当前实例化出来对象的构造器)
console.log(this.city)
console.log(this.say2())
},
say2(){return 1234}
}
})
</script>注意：
this 与 vm 的指引完全一致，它们可以通过===判断等于(是同一个实体对象的两个不同名字而已)。
一般this指向：
- this指向window对象
var age = 20
function getInfo(){
console.log(this) // window
console.log(this.age)
}
getInfo() // 20- this代表调用该方法的当前对象
const tiger = {
name:'东北虎',
act:'猛虎扑食',
say(){
console.log('我的名字是'+this.name+'，我的招牌动作是'+this.act)
// this代表tiger对象
}
}
tiger.say()- this代表元素节点对象
<button onclick="this.style.color='red'" />确定</button>注意：
this在不同情况下代表不同对象，通过console.log输出查看便知。
事件绑定-方法简易设置
对象中成员方法可以把 :function去除，做简易设置，是es6的标准规范。
具体设置：
根据es6标准，可以给methods各个方法做简易设置如下：
<script>
var vm = new Vue({
el:'#app',
methods:{
// 对象成员方法简易设置 方法名称:function(){} 简易设置为： 方法名称(){}
delA:function(id){
console.log('id为'+id+'的商品被删除了')
},
delA(id){
console.log('id为'+id+'的商品被删除了')
}
}
})
</script>原理：
es6标准里边规定，对象成员名称 与 值的变量名称 保持一致，就可以做简易设置：
- 对象属性简易设置如下：
var name = "xiaoqiang"
var height = 176
var run = function(){
console.log('在跑步')
}
var person = {name:name,height:height,run:run} // 正常创建对象
var person = {name, height, run} // 简便方式创建对象- 对象成员方法简易设置如下：
var obj = {
// walk:function(){
// console.log('走直线')
// }
// 变形
// walk:function walk(){
// console.log('走直线')
// }
// 简易设置为如下：
walk(){
console.log('走直线')
}
}给一个对象直接声明一个成员方法，也可以简写为如上形式，去除: function字。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
