萌新VueDay3——绑定监听（@click.stop、@click.prevent、@keyup）

萌新VueDay3——绑定监听（@click.stop、@click.prevent、@keyup）

事件处理

绑定监听

为按钮绑定事件监听
简单分为以下情况：

<div id="test">
    <button @click="btn1">不带参数函数</button>
    <button @click="btn2('我是带参数函数')">带参数函数</button>
    <button @click="btn3">输出按钮文本</button>
    <button @click="btn4('我是带参还能',$event)">输出按钮文本</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{

        },methods:{
        //可以把以下方法放入data中，也可以实现目的
            btn1(){
                alert('不带参数函数')
            },
            btn2(msg){
                alert(msg)
            },
            btn3(event){
                alert(event.target.innerHTML)
            },
            btn4(msg,event){
                alert(msg+event.target.innerHTML)
            }
        }
    })
</script>

事件修饰符

1. @click.stop == event.stopPropagation()
2. @click.prevent == event.preventDefault()

<div id="test">
    <div style="background: black;width: 400px;height: 400px;" @click="div1">
    <div style="background: red;width: 200px;height: 200px;" @click.stop="div2"></div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="a1">百度链接(阻止默认行为——跳转)</a>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{

        },methods:{
            div1(){
                alert('外面的div')
            },
            div2(event){
                //防止事件冒泡
                // event.stopPropagation()
                alert('里面的div')

            },
            a1(event){
                //阻止默认行为
                // event.preventDefault()
                alert('准备跳转百度')
            }
        }
    })
</script>

按钮修饰符

text输入完成，按下enter回车键，才能应用方法
只需要在@keyup加上“ . 13”和“. enter ”
@keyup.13或者@keyup.enter

	<input type="text" @keyup.13="inp1">
    <input type="text" @keyup.enter="inp1">

inp1(event){
                //13对应键盘上的回车键
                //if(event.keyCode === 13)
                //经过上述约束，只有按回车健才能实现下列
                alert(event.target.value)
            }