key value vue 输出_vue注意事项总结（一）
1.只有當vue實例被創(chuàng)建時data中存在的屬性才是響應式的：
如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那么你僅需要設置一些初始值。
2.不要在選項屬性或回調上使用箭頭函數(shù)：
比如：
created: () => console.log(this.a)或
vm.$watch('a', newValue => this.myMethod())。
因為箭頭函數(shù)是和父級上下文綁定在一起的，this不會是如你所預期的 Vue 實例，經(jīng)常導致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之類的錯誤。
3.計算屬性：computed
計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發(fā)生改變時才會重新求值。下面的計算屬性將不再更新，因為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]
}
}
}
// ...
現(xiàn)在再運行vm.fullName = 'John Doe'時，setter 會被調用，vm.firstName和vm.lastName也會相應地被更新。
4.偵聽屬性：watch
當你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用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
}
}
})
雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過watch選項提供了一個更通用的方法，來響應數(shù)據(jù)的變化。當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。
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` 發(fā)生改變，這個函數(shù)就會運行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一個通過 Lodash 限制操作頻率的函數(shù)。
// 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率
// AJAX 請求直到用戶輸入完畢才會發(fā)出。想要了解更多關于
// `_.debounce` 函數(shù) (及其近親 `_.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
})
},
// 這是我們?yōu)榕卸ㄓ脩敉Ｖ馆斎氲却暮撩霐?shù)
500
)
}
})
5.v-bind:class和v-bind:style的數(shù)組語法：
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 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。
v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
7.key
在v-if中的使用：
vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。例如，如果你允許用戶在不同的登錄方式之間切換：
Username
在上面的代碼中切換loginType將不會清除用戶已經(jīng)輸入的內容。因為兩個模板使用了相同的元素，不會被替換掉——僅僅是替換了它的placeholder。
Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的key屬性即可：
Username
現(xiàn)在，每次切換時，輸入框都將被重新渲染。元素仍然會被高效地復用，因為它們沒有添加key屬性。
在v-for中的使用：
當 Vue.js 用v-for正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。
這個默認的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一key屬性。理想的key值是每項都有的且唯一的 id。這個特殊的屬性相當于 Vue 1.x 的track-by，但它的工作方式類似于一個屬性，所以你需要用v-bind來綁定動態(tài)值 (在這里使用簡寫)：
建議盡可能在使用v-for時提供key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
8.數(shù)組的更新檢測：
變異方法：
會改變原始數(shù)組，Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。
非變異方法：
不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
注：由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
當你修改數(shù)組的長度時，例如：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` 現(xiàn)在是響應式的
vm.b = 2
// `vm.b` 不是響應式的
對于已經(jīng)創(chuàng)建的實例，Vue 不能動態(tài)添加根級別的響應式屬性。但是，可以使用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()。在這種情況下，你應該用兩個對象的屬性創(chuàng)建一個新的對象。所以，如果你想添加新的響應式屬性，如下：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
其他：
可以利用帶有v-for的渲染多個元素。
當v-for和v-if處于同一節(jié)點，v-for的優(yōu)先級比v-if更高，這意味著v-if將分別重復運行于每個v-for循環(huán)中。當你想為僅有的一些項渲染節(jié)點時，這種優(yōu)先級的機制會十分有用。
如果你的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將v-if置于外層元素 (或
9.事件處理：
v-on可以接收一個需要調用的方法名稱。
Greet
也可以在內聯(lián) JavaScript 語句中調用方法，要在內聯(lián)語句處理器中訪問原始的 DOM 事件，可以用特殊變量$event把它傳入方法。
Submit
注：
像其它只能對原生的 DOM 事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件上。
不要把.passive和.prevent一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive會告訴瀏覽器你不想阻止事件的默認行為。
系統(tǒng)修飾鍵：.ctrl，.shift，.meta，.alt。修飾鍵與常規(guī)按鍵不同，在和keyup事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。
.exact修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
10.表單輸入綁定
復選框：
單個復選框綁定到布爾值，多個復選框綁定到數(shù)組。
單選按鈕：
綁定到被選中的按鈕的value。
下拉列表：
多選時綁定到數(shù)組。
11.組件：
組件是可復用的 Vue 實例，它們與new Vue接收相同的選項，例如data、computed、watch、methods以及生命周期鉤子等。僅有的例外是像el這樣根實例特有的選項。
1.注冊組件：
// 全局注冊，全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實例，
// 也包括其組件樹中的所有子組件的模板中。
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: 'You clicked me {{ count }} times.'
})
注：
一個組件的data選項必須是一個函數(shù)，因此每個實例可以維護一份被返回對象的獨立的拷貝。
2.通過prop向子組件傳遞數(shù)據(jù)：
prop:Prop 是你可以在組件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的
時候，它就變成了那個組件實例的一個屬性。
Vue.component('blog-post', {
props: ['title'],
template: '
{{ title }}
'})
一個 prop 被注冊之后，你就可以像這樣把數(shù)據(jù)作為一個自定義特性傳遞進來：
我們可以使用v-bind來動態(tài)傳遞 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.通過事件向父級組件發(fā)送消息：我們可以調用內建的ef="https://cn.vuejs.org/v2/api/#實例方法-事件">$emit方法并傳入事件的名字，來向父級組件觸發(fā)一個事件。
Enlarge text
然后我們可以用v-on在博文組件上監(jiān)聽這個事件，就像監(jiān)聽一個原生 DOM 事件一樣：
v-on:enlarge-text="postFontSize += $event"
>
有的時候用一個事件來拋出一個特定的值是非常有用的，可以使用$emit的第二個參數(shù)來提供這個值，在父級組件監(jiān)聽這個事件的時候，我們可以通過$event訪問到被拋出的這個值，如上。
如果這個事件處理函數(shù)是一個方法，這個值會作為第一個參數(shù)傳入該方法。如下：
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 事件被觸發(fā)時，將新的值通過自定義的 input 事件拋出
Vue.component('custom-input',{
props:['value'],
template:
`
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
});
6.通過插槽分發(fā)內容：
Something bad happened.
Vue.component('alert-box', {
template: `
Error!
`
})
7.解析dom模板時的注意事項：
有些 HTML 元素，諸如
- 、
特殊的is特性給了我們一個變通的辦法：
需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：
總結
以上是生活随笔為你收集整理的key value vue 输出_vue注意事项总结（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 卸载 流程_一款适合于windows端的
- 下一篇： a标签 vue 动态点击_vue基础那点