1.只有當vue實例被創建時data中存在的屬性才是響應式的：

如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那么你僅需要設置一些初始值。

2.不要在選項屬性或回調上使用箭頭函數：

比如：

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之類的錯誤。

3.計算屬性：computed

計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。下面的計算屬性將不再更新，因為Date.now()不是響應式依賴：

computed: {

now: function () {

return Date.now()

}

}

注：計算屬性默認只有getter,需要時可以提供一個setter.

computed: {

fullName: {

get: function () {

return this.firstName + ' ' + this.lastName

},

set: function (newValue) {

var names = newValue.split(' ')

this.firstName = names[0]

this.lastName = names[names.length - 1]

}

}

}

// ...

現在再運行vm.fullName = 'John Doe'時，setter 會被調用，vm.firstName和vm.lastName也會相應地被更新。

4.偵聽屬性：watch

當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的watch回調。

// 使用watch

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar',

fullName: 'Foo Bar'

},

watch: {

firstName: function (val) {

this.fullName = val + ' ' + this.lastName

},

lastName: function (val) {

this.fullName = this.firstName + ' ' + val

}

}

})

// 使用computed

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar'

},

computed: {

fullName: function () {

return this.firstName + ' ' + this.lastName

}

}

})

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過watch選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

Ask a yes/no question:

{{ answer }}

var watchExampleVM = new Vue({

el: '#watch-example',

data: {

question: '',

answer: 'I cannot give you an answer until you ask a question!'

},

watch: {

// 如果 `question` 發生改變，這個函數就會運行

question: function (newQuestion, oldQuestion) {

this.answer = 'Waiting for you to stop typing...'

this.getAnswer()

}

},

methods: {

// `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。

// 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率

// AJAX 請求直到用戶輸入完畢才會發出。想要了解更多關于

// `_.debounce` 函數 (及其近親 `_.throttle`) 的知識

getAnswer: _.debounce(

function () {

if (this.question.indexOf('?') === -1) {

this.answer = 'Questions usually contain a question mark. ;-)'

return

}

this.answer = 'Thinking...'

var vm = this

axios.get('https://yesno.wtf/api')

.then(function (response) {

vm.answer = _.capitalize(response.data.answer)

})

.catch(function (error) {

vm.answer = 'Error! Could not reach the API. ' + error

})

},

// 這是我們為判定用戶停止輸入等待的毫秒數

500

)

}

})

5.v-bind:class和v-bind:style的數組語法：

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染為：

------------------------------------------------------------------------------------

data: {

baseStyles:{color:'red'},

overridingStyles:{font-size:'16px'}

}

渲染為：

注：當v-bind:style使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如transform，Vue.js 會自動偵測并添加相應的前綴。

6.v-if VS v-show

條件渲染v-if:

在template元素上使用v-if可以條件渲染(切換)多個元素。

注：v-else元素必須緊跟在帶v-if或者v-else-if的元素的后面，否則它將不會被識別。

條件展示v-show:

v-show的元素始終會被渲染并保留在 DOM 中。v-show只是簡單地切換元素的 CSS 屬性display。

注：v-show不支持元素，也不支持v-else。

對比：v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

7.key

在v-if中的使用：

vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。例如，如果你允許用戶在不同的登錄方式之間切換：

Username

Email

在上面的代碼中切換loginType將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，不會被替換掉——僅僅是替換了它的placeholder。

Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的key屬性即可：

Username

Email

現在，每次切換時，輸入框都將被重新渲染。元素仍然會被高效地復用，因為它們沒有添加key屬性。

在v-for中的使用：

當 Vue.js 用v-for正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一key屬性。理想的key值是每項都有的且唯一的 id。這個特殊的屬性相當于 Vue 1.x 的track-by，但它的工作方式類似于一個屬性，所以你需要用v-bind來綁定動態值 (在這里使用簡寫)：

建議盡可能在使用v-for時提供key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

8.數組的更新檢測：

變異方法：

會改變原始數組，Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。

非變異方法：

不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

example1.items = example1.items.filter(function (item) {

return item.message.match(/Foo/)

})

注：由于 JavaScript 的限制，Vue 不能檢測以下變動的數組：當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue

當你修改數組的長度時，例如：vm.items.length = newLength

var vm = new Vue({

data: {

items: ['a', 'b', 'c']

}

})

vm.items[1] = 'x' // 不是響應性的

vm.items.length = 2 // 不是響應性的

解決問題1：

Vue.set(vm.items, indexOfItem, newValue)

vm.$set(vm.items, indexOfItem, newValue) // vm.$set是Vue.set方法的一個別名

vm.items.splice(indexOfItem, 1, newValue)

解決問題2：

vm.items.splice(newLength)

注：由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

var vm = new Vue({

data: {

a: 1

}

})

// `vm.a` 現在是響應式的

vm.b = 2

// `vm.b` 不是響應式的

對于已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用Vue.set(object, key, value)方法向嵌套對象添加響應式屬性。

var vm = new Vue({

data: {

userProfile: {

name: 'Anika'

}

}

})

可以添加一個新的age屬性到嵌套的userProfile對象：

Vue.set(vm.userProfile, 'age', 27)或vm.$set(vm.userProfile, 'age', 27)

有時你可能需要為已有對象賦予多個新屬性，比如使用Object.assign()或_.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，如下：

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

其他：

可以利用帶有v-for的渲染多個元素。

當v-for和v-if處于同一節點，v-for的優先級比v-if更高，這意味著v-if將分別重復運行于每個v-for循環中。當你想為僅有的一些項渲染節點時，這種優先級的機制會十分有用。

如果你的目的是有條件地跳過循環的執行，那么可以將v-if置于外層元素 (或

9.事件處理：

v-on可以接收一個需要調用的方法名稱。

Greet

也可以在內聯 JavaScript 語句中調用方法，要在內聯語句處理器中訪問原始的 DOM 事件，可以用特殊變量$event把它傳入方法。

Submit

注：

像其它只能對原生的 DOM 事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件上。

不要把.passive和.prevent一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive會告訴瀏覽器你不想阻止事件的默認行為。

系統修飾鍵：.ctrl，.shift，.meta，.alt。修飾鍵與常規按鍵不同，在和keyup事件一起用時，事件觸發時修飾鍵必須處于按下狀態。

.exact修飾符允許你控制由精確的系統修飾符組合觸發的事件。

10.表單輸入綁定

復選框：

單個復選框綁定到布爾值，多個復選框綁定到數組。

單選按鈕：

綁定到被選中的按鈕的value。

下拉列表：

多選時綁定到數組。

11.組件：

組件是可復用的 Vue 實例，它們與new Vue接收相同的選項，例如data、computed、watch、methods以及生命周期鉤子等。僅有的例外是像el這樣根實例特有的選項。

1.注冊組件：

// 全局注冊，全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創建的 Vue 根實例，

// 也包括其組件樹中的所有子組件的模板中。

Vue.component('button-counter', {

data: function () {

return {

count: 0

}

},

template: 'You clicked me {{ count }} times.'

})

注：

一個組件的data選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝。

2.通過prop向子組件傳遞數據：

prop:Prop 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的

時候，它就變成了那個組件實例的一個屬性。

Vue.component('blog-post', {

props: ['title'],

template: '

{{ title }}

'

})

一個 prop 被注冊之后，你就可以像這樣把數據作為一個自定義特性傳遞進來：

我們可以使用v-bind來動態傳遞 prop:

new Vue({

el: '#blog-post-demo',

data: {

posts: [

{ id: 1, title: 'My journey with Vue' },

{ id: 2, title: 'Blogging with Vue' },

{ id: 3, title: 'Why Vue is so fun' },

]

}

})

v-for="post in posts"

v-bind:key="post.id"

v-bind:title="post.title"

>

3.單個根元素：每個組件必須只有一個根元素。

4.通過事件向父級組件發送消息：我們可以調用內建的ef="https://cn.vuejs.org/v2/api/#實例方法-事件">$emit方法并傳入事件的名字，來向父級組件觸發一個事件。

Enlarge text

然后我們可以用v-on在博文組件上監聽這個事件，就像監聽一個原生 DOM 事件一樣：

v-on:enlarge-text="postFontSize += $event"

>

有的時候用一個事件來拋出一個特定的值是非常有用的，可以使用$emit的第二個參數來提供這個值，在父級組件監聽這個事件的時候，我們可以通過$event訪問到被拋出的這個值，如上。

如果這個事件處理函數是一個方法，這個值會作為第一個參數傳入該方法。如下：

v-on:enlarge-text="onEnlargeText"

>

methods: {

onEnlargeText: function (enlargeAmount) {

this.postFontSize += enlargeAmount

}

}

5.在自定義組件上使用v-model:

首先,下面兩種寫法是等價的：

v-bind:value="searchText"

v-on:input="searchText = $event.target.value"

>

但用在自定義組件上時，v-model會是這樣：

v-bind:value="searchText"

v-on:input="searchText = $event"

>

為了使得該組件正常工作，該組件內的input必須：將其 value 特性綁定到一個名叫 value 的 prop 上

在其 input 事件被觸發時，將新的值通過自定義的 input 事件拋出

Vue.component('custom-input',{

props:['value'],

template:

`

v-bind:value="value"

v-on:input="$emit('input', $event.target.value)"

>

`

});

6.通過插槽分發內容：

Something bad happened.

Vue.component('alert-box', {

template: `

Error!

`

})

7.解析dom模板時的注意事項：

有些 HTML 元素，諸如

• 、

、

特殊的is特性給了我們一個變通的辦法：

需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：

總結

以上是生活随笔為你收集整理的key value vue 输出_vue注意事项总结（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。