首頁 > web前端 > js教程 > Vue中一些重要的知識點

Vue中一些重要的知識點

小云云
發布: 2018-02-11 11:14:23
原創
2185 人瀏覽過

本文主要和大家分享Vue中一些重要的知識點,希望能幫助大家。

不要在選項屬性或回呼上使用箭頭函數

例如

  • #created: () => console.log(this.a)

  • vm.$watch('a', newValue => this.myMethod())
    因為箭頭函數是和父級上下文綁定在一起的,this 不會是如你所預期的Vue 實例,經常導致Uncaught TypeError: Cannot read property of undefined 或Uncaught TypeError: this.myMethod is not a function 之類的錯誤

#具體見:這裡

#v-html

雙大括號會將資料解釋為普通文本,而非HTML 程式碼。為了輸出真正的HTML,你需要使用v-html 指令:

<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p>
登入後複製

具體見:這裡

##計算屬性快取vs 方法

我們可以將相同函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而,不同的是

計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有改變,多次存取 reversedMessage 計算屬性會立即傳回先前的計算結果,而不必再執行函數。 這個 計算屬性是基於它們的依賴進行快取的 是什麼意思呢?

computed: {  now: function () {    return Date.now()
  }
}
登入後複製
這裡雖然

Date.now()的值一直在變,但是他沒有被watch,因為他不是響應式依賴。

具體見:這裡

CSS樣式自動加入前綴

v-bind:style 使用需要新增瀏覽器引擎前綴的CSS 屬性時,如transform,Vue.js 會自動偵測並加入對應的前綴。

具體見: 這裡