学习vue之函数

通过这几日对于实际编写vue代码，发现vue对于格式的要求十分严格，而在javascript中相对没有那么严格。以下代码简单的实现了一些鼠标操作的方法。

<div id="app">
            {{msg}} <br /><br />
            <button v-on:click="fun1()">点我一下</button><br /><br />

//此处@为v-on的语法糖；：则是v-bind的语法糖
            <button @click="fun2()">不要轻易点我</button><br /><br />
            <button @click="fun3()">点我获取msg</button><br /><br />
            <!--传一个事件对象-->
            <button @click="fun4($event)">点不点你说了算</button>
            <button @click="fun5()">改变后的msg</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    msg:"hello vue"
                },
                methods:{

//fun1()和fun2分别是两种定义函数的写法，并没有什么不同。
                    fun1:function(){
                    alert("让你点你就点");
                    },
                    fun2(){
                        alert("叫你不要点");
                    },
//                    获取msg的数据
                    fun3(){
                        alert(this.msg);
                    },
//                    方法的传参
                    fun4(e){
//                        e.srcElement表示DOM节点
                        e.srcElement.style.backgroundColor='red'
                    },
                    fun5(){
                        this.msg = "你好啊，是我。";
                        alert(this.msg);
                    }
                }
            })
        </script>