Vue 自定义方法的两种形式(声明式定义、表达式定义)

引言
作为一个一个构建用户界面的框架，Vue 在定义其内置方法时有其特有的书写方式，这与典型的JavaScript书写方法有相通之处，但有其特点

JavaScript函数
典型的JavaScript定义函数方法有两种形式，一种为声明式定义，如下所示：

function functionName(value1...){
    //函数体
}

还有一种形式，为表达式定义，如下所示：

var functionName = function(value1...){
    //函数体
}

两者不同之处在于浏览器解析器对其的解析不同，声明式定义会先被解析再执行，而表达式定义则是不会先做解析，而是在执行到该语句时再做解析。

Method方法
Vue是基于ES6所开发的框架，其方法定义形式也是与JavaScript相关的，与JavaScript函数定义相似，在Vue对象的Methods定义也有两种形式:

一种类似声明式定义，如下所示：

methods:{
    functionname(value1...){
     }
}

其完整调用示例如下：

<div id="demo">
        <button @click="clickone">one click</button>        
    </div>
    <button onclick="app.outer()">outer btn</button>
 
    <script type="text/javascript">
 
        new Vue({
            el:"#demo",
            data:{
                num:1
            },
            methods:{
                clickone(event){
                    console.log(event.target.tagName);
 
                }
            }
        })
    </script>

另一种类似表达式定义，如下所示

methods:{
    functionname：function(value1...){
     }
}

其完整示例如下：

<div id="demo">
        <button @click="clickone">one click</button>        
    </div>
    <button onclick="app.outer()">outer btn</button>
 
    <script type="text/javascript">
 
        new Vue({
            el:"#demo",
            data:{
                num:1
            },
            methods:{
                clickone：function(event){
                    console.log(event.target.tagName);
 
                }
            }
        })