本文主要和大家分享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
之類的錯誤
#具體見:這裡
雙大括號會將資料解釋為普通文本,而非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,因為他不是響應式依賴。
v-bind:style 使用需要新增瀏覽器引擎前綴的CSS 屬性時,如
transform,Vue.js 會自動偵測並加入對應的前綴。
元素上使用v-if 條件渲染分組
元素。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>具體見:這裡
和
v-show 和
v-for
vm.items[indexOfItem] = newValue
vm.items.length = newLength
var vm = new Vue({ data: { a: 1 } })// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的但是我們可以透過
Vue.set(object, key, value)方法來向嵌套對象添加響應式屬性。
另外還有這個常用的方法
Object.assign(),當我們想要為某個物件賦予
多個新屬性 的時候,你應該要這樣玩
this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green'})具體見: 這裡在
中使用
methods 方法
<li v-for="n in even(numbers)">{{ n }}</li>具體見: 這裡元件使用
v- for。
<my-component v-for="item in items" :key="item.id"></my-component>具體見: 這裡
事件修飾符(2.1.4 新增)
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>
.once 也可以使用在
自訂元件 上。
特性
、
、