Vue入门---事件与方法详解
一、 vue方法实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue方法与事件</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
8 </head>
9 <body>
10 <div id="test">
11 <button @click="sayHi">点击我</button> <!--这里使用@-->
12 </div>
13 <script type="text/javascript">
14 var myVue = new Vue({
15 el: '#test',
16 methods: { //这里使用methods
17 sayHi: function () {
18 alert('我被点击了')
19 }
20 }
21 })
22 </script>
23 </body>
24 </html>二、 方法传参
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue方法与事件</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
8 </head>
9 <body>
10 <div id="test">
11 <button @click="sayHi('你好')">说你好</button> <!--这里使用@-->
12 <button @click="sayHi('我被点击了')">说我被点击了</button> <!--这里使用@-->
13 </div>
14 <script type="text/javascript">
15 var myVue = new Vue({
16 el: '#test',
17 methods: { //这里使用methods
18 sayHi: function (message) {
19 alert(message)
20 }
21 }
22 })
23 </script>
24 </body>
25 </html>三 、vue访问原生 DOM 事件
注意用$event获取
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Vue方法与事件</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
8 </head>
9 <body>
10 <div id="test">
11 <button @click="changeColor('你好',$event)">点击我</button> <!--这里使用@-->
12 <div style="height: 100px;width: 100px;background-color: red;" @mouseover="over('鼠标从我上面滑过',$event)">
13 鼠标从我上面滑过试试
14 </div>
15 </div>
16 <script type="text/javascript">
17 var myVue = new Vue({
18 el: '#test',
19 methods: { //这里使用methods
20 changeColor: function (message, event) {
21 alert(message+event); //弹出我被点击了,事件是[object MouseEvent]
22 },
23 over :function (message, event) {
24 alert(message+event); //弹出鼠标从我上面滑过,事件是[object MouseEvent]
25 }
26 }
27 })
28 </script>
29 </body>
30 </html>四、 事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue方法与事件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="test">
<button @click.stop="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡 -->
<button @click.prevent="sayHi('你好')">说你好</button> <!-- 提交事件不再重载页面 -->
<button @click.stop.prevent="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡和提交事件不再重载页面 -->
<button @click.capture="sayHi('你好')">说你好</button> <!-- 添加事件侦听器时使用 capture 模式 -->
<button @click.self="sayHi('你好')">说你好</button> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @keyup.13="sayHi('你好')">说你好</div> <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
</div>
<script type="text/javascript">
var myVue = new Vue({
el: '#test',
methods: { //这里使用methods
sayHi: function (message) {
alert(message)
}
}
})
</script>
</body>
</html>五、常用事件
v-on:click/mouseover...... 简写的: @click="" 推荐
1、事件对象: @click="show($event)" 2、事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐 3、默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐 4、键盘: @keydown $event ev.keyCode @keyup
常用键: 回车 a). @keyup.13 b). @keyup.enter 上、下、左、右 @keyup/keydown.left // 左 @keyup/keydown.right // 右 @keyup/keydown.up // 上 @keyup/keydown.down // 下
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录