VUE调用函数，以及event的讲解

Posted 2020-11-30 shenja

先看我们是如何定义函数的

var vm = new Vue({
　　　　//找到ID为APP的作用域
        el: "#app",
　　　　　　//数据
        data: {
            msg: "Hello Vue",
            num: 0
        },
　　　　　　//methods就是VUE中函数的定义处
        methods: {
　　　　　　　//函数名称   函数体  
            handle: function (event) {
　　　　　　　　　　//查看当前触发函数的内容
                console.log(event.target.value);
                this.num++;
            },
            handle1: function (event) {
　　　　　　　　　　//查看触发函数的标签
                console.log(event.target.tagName);
                console.log(event.target.value);
                //目前为止，innerhtml在MVC中好像不管用，获取不到值
                console.log(event.target.innerHTML)
                this.num++;
            }
        }
    })

@*$event传参，固定名称
        事件绑定--参数传递
            1、如果时间直接绑定函数名称如同v-on:click="handle"，那么默认会传递事件对象作为事件参数的第一个参数
            2、如果时间绑定函数调用如 v-on:click="handle1($event)"，那么事件对象必须作为最后一个参数显示传递，并且事件的名称必须是$event
        *@
        @*使用方法进行num自增，方法的定义是methods*@
        <input id="Button1" v-on:click="handle" type="button" value="事件绑定数值自增" />
        <input id="Button1" v-on:click="handle1($event)" type="button" value="事件绑定数值自增" />

以上的代码就是说明了函数的定义，以及调用，event的一个介绍