[vue]vue v-on事件綁定(原生修飾符+vue自帶事件修飾符)
阿新 • • 發佈：2018-05-11
w3cschool char 用戶 inside img ins app parent pan
preventDefault阻止默認行為和stopPropagation終止傳遞
event.preventDefault()
鏈接本來點了可以跳轉, 如果註冊preventDefault事件,則點了不能跳轉
<body> <a href="http://w3cschool.cc/">Go to W3Cschool.cc</a> <p>The preventDefault() method will prevent the link above from following the URL.</p> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(function () { $("a").click(function (event) { event.preventDefault(); }); }); </script> </body>
event.stopPropagation()
html元素嵌套, 父元素的事件會傳播給子元素. 如果子元素不想要父元素的事件,則可以註冊stopPropagation事件.
<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;"> This is a div element. <p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span> </p></div> <p><b>Note:</b> Click on each of the elements above. When clicking on the <b>div</b> element, it will alert that the div element was clicked. When clicking on the <b>p</b> element, it will return both the p and the div element, since the p element is inside the div element. But when clicking on the <b>span</b> element, it will only return itself, and not the p and the div element (even though its inside these elements). The event.stopPropagation() stops the click event from bubbling to the parent elements. </p> <p><b>Tip:</b> Try to remove the event.stopPropagation() line, and click on the span element again (the click event will now bubble up to parent elements).</p> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function () { $("span").click(function (event) { event.stopPropagation(); alert("The span element was clicked."); }); $("p").click(function (event) { alert("The p element was clicked."); }); $("div").click(function () { alert("The div element was clicked."); }); }); </script>
vue事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> </head> <body> <div id="app"> <h1>事件: 集成</h1> <button @click="counter+=1">add1</button> {{counter}} <h1>事件: methods</h1> <button @click="greet">greet</button> <button @click="greet2($event)">greet2-event</button> <a href="https://www.baidu.com/" @click="greet3($event)">greet3-event.preventDefault</a> <a href="https://www.baidu.com/" @click.prevent="greet3">[email protected]</a> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { counter: 0, }, methods: { //最簡單的事件註冊 greet() { alert("greet maomao!") }, // 查看事件 greet2(event) { alert(event); }, //使用原生js阻止默認行為,需傳遞事件進來 greet3(event) { event.preventDefault(); alert('preventDefault'); }, //使用vue修飾符阻止默認行為 greet4() { alert('@click.prevent'); } } }) </script> </body> </html>
- vue提供的事件修飾符有:
.stop
.prevent
.capture
.self
.once
@click.keyup.13
@click.enter.a註意區分v-model的修飾符
v-model.lazy
v-model.number
如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符
這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。
v-model.trim[vue]vue v-on事件綁定(原生修飾符+vue自帶事件修飾符)