Vue中v-on的一些应用

前言#

学习v-on的时候，本来想把v-on绑定到下拉框上，选择什么弹出对应选择的值；实现的时候发现v-on只能绑定select标签的change，而绑定不到onChange

点击查看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框</title>
</head>
<body>

<div id="select">
    下拉框:
    <select v-model="message" v-on:change="sayHello">
        <option value="" disabled>---请选择---</option>
        <option value="button">按钮</option>
        <option value="diora">单选框</option>
        <option value="checked">多选框</option>
        <option value="select">下拉框</option>
    </select>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#select",
        data: {
            message:'',
        },
        methods:{
            sayHello:function () {
                alert("1111");
                alert(this.message);
            },
        }
    });

    function sayHello1(){
        alert("222");
    }
</script>
</body>
</html>

所以本文就讲下自己对v-on的理解，顺便在后文记录下v-on的常用事件

个人理解#

v-on在最开始介绍的时候，就是监听事件的，那么这个【v-on:change】就可以理解为监听change事件，而select标签的onChange本身也可以理解为【监听change事件】
那么v-on:onchange就可以理解为【监听监听change事件】，自然不会起效果

v-on监听事件时传参问题#

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

点击查看代码

<div id="app">
    <button v-on:click='doThis'>直接绑定函数名称</button>
    <button v-on:click='doThat("myData", $event)'>带参数传入</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {
            doThis: function(event) {
                console.log(event.target.innerHTML);
            },
            doThat: function(val, event) {
                console.log(val)
                console.log(event.target.innerHTML);
            }
        }
    });
</script>