.prevent 用于阻止默认事件，点击a标签href可以打开相应的链接，那么给事件加 上此关键字，click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌套div3
<div id="app" v-on:click="show"> 1 <div id="app2" v-on:click.capture="show2"> 2 <div id="app3" v-on:click="show3"> 3 </div> </div> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ }, methods:{ show:function(){ console.log("这是app的方法") }, show2:function(){ console.log("这是app2的方法") }, show3:function(){ console.log("这是app3的方法") } } }) </script>此处的代码因为div2有capture关键字，所以此时冒泡的顺序发生了改变 正常情况下： 点击div3一层一层冒泡，先div3=》div2=》div1 使用了关键字： 点击div3时，先div2=》div3=》div1 1.先冒泡外层带有关键字的事件 2.外层执行结束之后，往里层执行事件 3.最后按照从里向外的事件开始执行 就是说只要存在一个capture关键字，就会影响整个嵌套的执行 例子 div1中嵌套div2中嵌套div3.capture中嵌套div4 此时点击div1 先执行带有capture的div3 然后执行div4 最后按照从里向外的顺序执行 顺序就是 div3=》div4=》div2=》div1 其他疑惑 此时嵌套为 div1中嵌套div2.capture中嵌套div3中嵌套div4 那么可以想一下点击最里层的div4会怎么触发呢 1.触发带有关键字的 div2 2.触发点击的div4 3.最后从里向外执行 那么顺序为 div2=》div4=》div3=》div1
（以监听click为例，其他如keyup，用法类似） v-on:click="fun" @click="fun" @click="fun(参数)"
<button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <button @click="test3('abcd', $event)">test3</button> methods: { test1(eve) {//test1函数没有参数，默认传递 $event alert(eve.target.innerHTML) //test1 }, test2 (msg) { //test1函数有参数，传递该参数 alert(msg) // abc }, test3 (msg, event) { //有参数，如果想获取到enevt，则函数中需要写 $event alert(msg+'---'+event.target.textContent) // abcd---test3 } }@click.stop 阻止事件冒泡
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script>//将会先弹出“noclick”,再弹出“dodo”。 <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, methods: { doThis: function () { alert("noclick"); }, dodo: function () { alert("dodo"); } } }); </script>//只弹出“noclick”@click.prevent 阻止事件的默认行为，
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转，仅执行函数test4 <form action="/xxx" @submit.prevent="test5"> //阻止表单提交，仅执行函数test5 <input type="submit" value="注册"> </form>@keyup.enter
//按下enter时，执行方法test7 <input type="text" @keyup.enter="test7"> methods: { test7 (event) { console.log(event.keyCode) alert(event.target.value) } }
