vue事件处理

1. 绑定监视
2. 事件修饰符
3. 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<!--列表过滤与排序-->
<div id="demo">
    <h2>绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2(123)">test2</button>
    <button @click="test3">test3</button>  <!-- 无参函数，实际上是传了$event对象-->
    <button @click="test4(1234,$event)">test4</button>

    <h2>事件修饰符</h2>
    <!--存在事件冒泡的情况-->
    <h3>阻止事件冒泡</h3>
    <div style=" 200px; height: 200px; background: red" @click="test5">
        <!--@click.stop 停止事件冒泡 -->
        <div style=" 100px; height: 100px; background: blue" @click.stop="test6"></div>
    </div>

    <br>
    <h3>阻止事件的默认行为</h3>
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>


    <br>
    <h2>按键修饰符</h2>
    <!-- <input type="text" @keyup="test8">-->  <!--原始写法-->
    <!--<input type="text" @keyup.13="test8">-->  <!--13就是enter键的keyCode码-->
    <input type="text" @keyup.enter="test8"/>   <!--直接写名字-->

</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script>
    new Vue({
        el: "#demo",
        methods: {
            test1(){
                alert('test1');
            },
            test2(number){
                alert(number);
            },
            test3(event){
                alert(event.target.innerHTML);
            },
            test4(number, event){
                alert(number + '----' + event.target.innerHTML);
            },
            test5(){
                alert('out')
            },
            test6(){
                alert('inner')
            },
            test7(){
//                event.preventDefault()   //原生的方式阻止事件的默认行为
                alert('点击，但是通过@click.prevent阻止事件的默认行为，不会跳转到百度去了')
            },
            test8(event){
//                原始写法;
//                if (event.keyCode === 13){  // Enter键
//                    alert(event.target.value)
//                }
                alert(event.target.value)

            }

        }
    });
</script>
</body>
</html>