[vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

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">greet4-@click.prevent</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