關於vuejs-templates webpack-simple代碼片段的困惑

通過閱讀示例開始學習Vue.js。

但我對vuejs-templates/webpack-simple的代碼片斷感到困惑。

data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }

我很奇怪，爲什麼代碼不能這樣寫

data:() => { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    }

我曾經嘗試都代碼，相同的結果。

我看不懂Vue.js文檔。

請幫我理解這段代碼片段。

感謝您花時間閱讀我的問題。

兩者都是同樣的事情，第一個實際上是第二的簡寫。 – abhishekkannojia

@abhishekkannojia謝謝。 – bananaappletw

問題是不是爲什麼不，但更多何必呢。

在這兩種情況下，您都在定義一個函數，它是對象文字的成員。在es6中有method properties的功能，用作簡寫符號。另見MDN。

2017-03-24 07:16:18

對不起，我對'es6'語法不熟悉。現在我明白了，謝謝。 – bananaappletw

我建議你小心，當你想使用方法屬性的箭頭函數。

箭頭功能提供了詞彙this所以有時你會發現自己的情況下this並非指正確的上下文（應該是Vue的對象本身，但它pointent父對象，你的情況可能是窗口）。

VueJS Google文檔提供了相當同樣的警告：

不要在實例屬性或回調（如 VM $腕錶（ 'A'，的newval => this.myMethod（））使用箭頭功能。）。由於綁定到父上下文的箭頭函數是，所以這不會是您期望的的Vue實例，並且this.myMethod將是未定義的。

2017-03-24 08:48:05

感謝您的提醒。我還在文件上看到了這一點。 – bananaappletw

回答