v-on事件绑定与修饰符

v-on事件绑定

事件处理 — Vue.jshttps://cn.vuejs.org/v2/guide/events.html在Vue中可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on:指令可以使用简写方式用@来替代

v-on可以绑定的事件参考：事件参考 | MDN 

<div id="app">

    <h1>{{message}}</h1>

<!--    原生-->
    <h1>原生事件绑定</h1>
    <button onclick="alert(1+1)">点击</button>
    <button onclick="handleClick()">点击</button>
    <button onclick="handleClick('啥时候解封啊')">点击</button>


<!--    vue封装的-->
    <h1>Vue事件绑定</h1>
    <button v-on:click="alert(1+1)">点击事件</button>
    <button v-on:click="vueClick()">点击事件</button>
    <button v-on:click="getData()">点击事件获取数据</button>
    <button v-on:click="getData">点击事件获取数据</button>
    <button v-on:click="getData('众里寻他千百度')">点击事件获取数据</button>
    <button @click="getData('简写方式')">点击事件获取数据</button>
    <button @click="setData('那人却在灯火阑珊处')">设置数据</button>

</div>

<script>

    function handleClick(params) {
        alert(params)
    }

    function vueClick() {
        alert("vueClick")
    }


    let vm = new Vue({
        el:"#app",
        data:{
            message:"慕然回首"
        },
        methods:{
            /*getData:function (params) {
                alert(this.message)
                alert(params)
            }*/
            getData(params){
                alert(params)
            },
            setData(params){
                this.message = params;
            }
        }
    });


</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。事件修饰符是由点开头的指令后缀来表示的。

事件处理 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 阻止捕获
• .self - 只监听触发该元素的事件
• .once - 只触发一次
• .left - 左键事件
• .right - 右键事件
• .middle - 中间滚轮事件

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 

<div id="app">

<!--    禁用标签默认行为-->
    <a href="http://www.huya.com" @click.prevent="setClick">超链接</a>
<!--    禁用标签默认行为 + 阻止冒泡-->
    <a href="http://www.huya.com" @click.prevent.stop="setClick">超链接</a>


    <div style="width: 600px;height: 600px;background-color: red" @click.self="div1">
        <div style="width: 400px;height: 400px;background-color: pink" @click.stop="div2">
            <div style="width: 200px;height: 200px;background-color: green" @click.once="div3"></div>
        </div>
    </div>

</div>

<script>


    new Vue({
        el:"#app",
        methods:{
            setClick(){
               alert("禁用标签默认行为")
            },
            div1(){
                alert("div1")
            },
            div2(){
                alert("div2")
            },
            div3(){
                alert("div3")
            }
        }
    });

</script>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

按键修饰符类型：1、“.enter”，可捕获enter键；2、“.tab”，可捕获tab键；3、“.delete”，可捕获“删除”和“退格”按键；4、“.esc”，可捕获取消键；5、“.space”，可捕获空格键；6、“.up”等。

事件处理按键修饰符 — Vue.jshttps://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

<！--只有在key`是Enter、时调用vm.submit()`-->
<input v-on keyup.enter="submit">