这是我学习vue的第二天，今天主要学习了如何利用vue阻止事件冒泡，阻止事件的默认行为，键盘事件以及如何添加class、style这些属性，以及如何利用vue来进行数据交互，利用百度的一个API来写一个百度下拉列表，今天学习完之后，感触最深的就是vue主要是逻辑上的应用，减少了DOM的操作，并且vue还用到了原生的方法，所以学好js高程很有必要。
一、如何利用vue阻止事件冒泡以及阻止事件的默认行为和了解什么是事件对象
在介绍事件冒泡之前，我们来了解一下事件，在上篇博客中我们知道事件的一般形式为v-on:click/mouseover，但是在vue中我们更加推荐@click/mouseover这种简写的方式
1、事件对象：@click="show($event)"
事件对象
2、阻止事件冒泡：
方法有两种
a). ev.cancelBubble=true; 来自于原生的方法
b). @click.stop 推荐
方法一：利用ev.cancelBubble=true阻止事件冒泡，当我们点击按钮只会弹出1，而不会弹出2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(ev){ alert(1); ev.cancelBubble=true; //阻止事件冒泡 }, show2:function(){ alert(2); } } }); }; </script></head><body> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show($event)"> </div> </div></body></html>
方法二：利用@click.stop阻止事件冒泡，只会弹出1，不会弹出2
<head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(){ alert(1); }, show2:function(){ alert(2); } } }); }; </script></head><body> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click.stop="show()"> //阻止事件冒泡 </div> </div></body></html>
3、阻止事件的默认行为
方法有两种：
a). ev.preventDefault(); //来自原生
b). @contextmenu.prevent 推荐
方法一：利用ev.preventDefault()阻止事件的默认行为
右键点击按钮只会弹出1，不会出现其他的默认行为
<head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(ev){ alert(1); ev.preventDefault(); } } }); }; </script></head><body> <div id="box"> <input type="button" value="按钮" @contextmenu="show($event)"> </div></body></html>
方法二：利用@事件.prevent阻止默认行为
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ show:function(){ alert(1); } } }); }; </script></head><body> <div id="box"> <input type="button" value="按钮" @contextmenu.prevent="show()"> </div></body></html>
4、键盘事件
键盘:
@keydown $event ev.keyCode
@keyup
常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件深入</title> <script src="2016-9-13/vue.js"></script> <script> window.onload=function () { new Vue({ el:"#box", data:{ }, methods:{ show:function (ev) { alert(ev.keyCode); }, show2:function () { alert(2)注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。