Vue的事件处理v-on:click

Vue中有一个指令（指令都是v-开头的）
V-on:click就是 部署点击指令 ，v-on:click=“myfunc”，这样就绑定了一个函数，那么是不是我们直接写一个函数就可以呢？如下

    <div id="app">
            {{ message }}
            <button type="button" v-on:click="myfunc"></button>
        </div>
        <script >
            function myfunc(){
                document.write("hello world")
            }
            var vm = new Vue ({
                data : {
                    message: "我是data里面的message",
                },
            });
            vm.$mount("#app")
        </script>

运行以上代码我们发现报错
vue.js:634 [Vue warn]: Property or method “myfunc” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

报错说我没有在instance里定义myfunc这个函数，这个instance就是vm
那么如何在vm中定义函数呢？就需要methods（注意s）

完整例子如下：

        <div id="app">
            {{ message }}
            <button type="button" v-on:click="myfunc">点我</button>
        </div>

        <script >

            var vm = new Vue ({
                // // 实例和容器通过el关联
                // el:"#app",
                data : {
                    message: "我是data里面的message",
                },
                methods: {
                    myfunc(){
                        document.write("hello world")
                    }
                }
            });
            vm.$mount("#app")
        </script>

另外v-on:click 可以简写为 @click
我们通过以上认识到methods下面我们可以写函数，那么这个函数可以传变量嘛？
按照道理是应该的：比如我的页面上有一个删除按钮，点击删除，实际上就应该删除指定元素，所以必须能传参数

Methods下面的所有函数，都是有一个默认参数的叫做event，这个叫做事件对象

        <script >

            var vm = new Vue ({
                // // 实例和容器通过el关联
                // el:"#app",
                data : {
                    message: "我是data里面的message",
                },
                                         //默认参数
                methods: {
                    myfunc(event){
                        console.log(event)
                    }
                }
            });
            vm.$mount("#app")
        </script>

我们看一下console结果
可以看到一个事件对象

我们可以使用event.target.innerText得到按钮的Text

methods: {
                    myfunc(event){
                        console.log(event.target.innerText)
                    }
                }

结论：method下面的函数是可以传参数的，默认参数是event,如果我们需要传参数呢？

<div id="app">
            {{ message }}
            <button type="button" v-on:click="myfunc(100)">点我</button>
        </div>

        <script >

            var vm = new Vue ({
                data : {
                    message: "我是data里面的message",
                },
                methods: {
                    myfunc(x){
                        console.log(x*x)
                    }
                }
            });
            vm.$mount("#app")
        </script>

但是这样会有一个问题，我们是不是把默认的event事件对象给弄丢了
所以我们需要在模版中传递一个参数 $event

<div id="app">
            {{ message }}
            <button type="button" v-on:click="myfunc($event,100)">点我</button>
        </div>

        <script >
            var vm = new Vue ({
                data : {
                    message: "我是data里面的message",
                },
                methods: {
                    //这样event的值就是$event
                    //这样x的值就是100
                    myfunc(event,x){
                        console.log(x*x)
                        console.log(event)
                    }
              }
            });
            vm.$mount("#app")
        </script>