Version: Next

3. 事件定义与使用 v-on

3.1 绑定事件

在要绑定事件的元素上，添加v-on属性，其中书写事件触发调用的函数名

  • v-on:onclick
  • v-on:onmouseover
  • v-on:onmove
  • v-on:onkeyup...

事件函数统一定义在vue的methods属性中

  • methods：用来定义vue中的事件

在Vue定义的事件中，this就表示当前Vue实例，日后可以在事件中通过使this获取Vue实例中的相关数据

绑定事件的简化写法@，可以代替v-on

事件方法的简化写法：省略:function直接方法名(){}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<div id="app">
<h2 v-text="msg"></h2>
<h2>年龄：{{age}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
msg: "hello Vue",
age: 23
}
})
</script>
</body>
</html>
  • 页面上显示了age值为23，希望在页面上放置一个按钮，点击一次age就+1

思路：

  1. 在页面上放置一个按钮
  2. 给按钮绑定单击事件
  3. 在单机事件中，获取age值，修改age的值，渲染页面
    1. 通过Vue对象的名称app（本代码中定义为app），或者this，获取当前Vue对象
    2. 从Vue对象中取出age，再加一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<div id="app">
<h2 v-text="msg"></h2>
<h2>年龄：{{age}}</h2>
<br>
<input type="button" value="点我增加年龄" v-on:click="changeAge" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
msg: "hello Vue",
age: 23
},
methods: {
changeAge: function() {
this.age++;
}
}
})
</script>
</body>
</html>

3.1.1 什么是双向绑定

单向绑定

例如在事件中改变age的值，标签内的值也相应改变，显示在了页面上

双向绑定

标签内的值发生了改变，Vue data中的值也随之发生改变

3.2 Vue事件的简化写法—— @绑定

@代替v-on

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<div id="app">
<h2>{{age}}</h2>
<input type="button" value="通过v-on事件修改年龄" v-on:click="changeAge" />
<input type="button" value="年龄-1" @click="editAge" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
age: 23
},
methods: {
changeAge: function() {
this.age++;
},
editAge: function() {
this.age--;
}
}
})
</script>
</body>
</html>

3.3 事件方法的简化写法——省略:function(){}

直接方法名(){}即可

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<div id="app">
<span id="">
{{count}}
</span>
<input type="button" value="改变count的值" @click="changeCount" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
count: 1
},
methods: {
changeCount() {
this.count++;
}
}
})
</script>
</body>
</html>

3.4 Vue事件中的参数传递

改变count为指定的值

在使用事件时，可以直接在事件调用出给事件进行参数传递，在事件定义处通过定义对应形参接受

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<div id="app">
<span id="">
{{count}}
</span>
<input type="button" value="改变count为指定值" @click="changeCount(25)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
count: 1
},
methods: {
changeCount(num) {
this.count = num;
}
}
})
</script>
</body>
</html>

3.5 事件小案例

页面上有两个按钮-和+，通过点击按钮可以改变购物数，购物数不能为复，每人限购10个，超出范围给用户提示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="-" @click="minus" />
<input type="button" value="+" @click="plus" />
<h2>{{count}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
count: 1
},
methods: {
minus() {
if (this.count > 1) {
this.count--;
} else {
alert("不能再小了");
}
},
plus() {
if (this.count < 10) {
this.count++;
} else {
alert("每人限购10件");
}
}
}
})
</script>
</body>
</html>