六、Vue指令v-on事件监听指令基础用法
Vue提供了开发中所需要的事件监听事件，如用户点击事件、键盘事件等。
<!DOCTYPE html>
<html>
<head>
<title>v-on</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="count++">clike me</button>
<p>你点击按钮 {{ count }} 次了</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
count:0
}
});
</script>
</body>
</html>
这个栗子中，实现了一个简单的点击事件，当点击 clike me时，就会触发click事件去调用count，从而实现每点击一次，在此基础上，数值就会加1。关于更多的事件如下图：
| 属性 | 事件触发时间 |
|---|---|
| click | 用户点击某个对象时被调用 |
| dbclick | 用户双击某个对象时被调用 |
| change | 内容发生改变时被调用 |
| blur | 元素失去焦点时被调用 |
| focus | 元素获得焦点时被调用 |
| keydown | 按下键盘某个按键时被调用 |
| keypress | 松开键盘按键时被调用 |
| mousedown | 鼠标按下时被调用 |
| mouseover | 鼠标移动到元素上时被调用 |
| mouseout | 鼠标离开元素时被调用 |
| mousemove | 鼠标在指定元素中移动时被调用 |
| mouseup | 鼠标在指定元素中松开鼠标左键时被调用 |
| reset | 点击重置按钮时被调用 |
| resize | 窗口或光加被重新调整大小时被调用 |
| submit | 点击提交按钮时被调用 |
| error | 加载文档发生错误时被调用 |
2020-12-1
请登录后再评论