_003_Vue_事件监听及处理_vue 修改event监听方法-优快云博客

1. 绑定监听:

v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参: event
隐含属性对象: $event

2. 事件修饰符:

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

3. 按键修饰符

.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键

<body>
<div id="component">
    <h2>绑定监听</h2>
    <button @click="test">不传入参数值</button>
    <button @click="test1">不传入参数值（函数包含事件参数）</button>
    <button @click="test2('msg')">传入自定义参数值</button>
    <button @click="test3($event)">传入事件参数值</button>
    <button @click="test4('msg',$event)">传入自定义参数值及事件参数值</button>

    <h2>事件修饰符</h2>
    <div style="width:100px;heigh:100px;background: #0accff;" @click="test5">
        <div style="width:30px;heigh:30px;background: red;" @click.stop="test6"></div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="test7">(阻止事件的默认行为)--百度一下</a>

    <h2>按键修饰符</h2>
    <input type="text" @keyup.13="test8">
    <input type="text" @keyup.enter="test8">
</div>

<script type="text/javascript" src="../../lib_001_vue/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#component',
        data: {},
        methods: {
            test() {
                alert('无参数');
            },
            test1(event) {
                alert(event.target.innerHTML);
            },
            test2(msg) {
                alert('自定义参数'+msg);
            },
            test3(event) {
                alert(event.target.innerHTML);
            },
            test4(msg,event) {
                alert(msg+'---'+event.target.innerHTML);
            },
            test5(){
                alert("outter");
            },
            test6(){
                alert('inner');
            },
            test7(event){
                alert(event.target.innerHTML);
            },
            test8(event){
                alert(event.keyCode+'  '+event.target.value);
            }

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