2019-8-27 seo達(dá)人
1.Method與計(jì)算屬性computed的區(qū)別
區(qū)別在于method每次都執(zhí)行函數(shù)，而computed基于依賴緩存，只要相關(guān)值不變，那么就不必再執(zhí)行函數(shù)。
下面，注意Date不是響應(yīng)式依賴：
computed: {
now: function () {
return Date.now()
}
}
所以使用計(jì)算屬性
2.v-if與v-show
v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯會(huì)被緩存起來(lái)）。
相比之下， v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。
一般來(lái)說(shuō)， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好。
令，v-show不支持template語(yǔ)法。
3.v-for
可以v-for="item in items"也可以of
還有可選第二參數(shù)作為前項(xiàng)的索引：
<li v-for="(item, index) in items">
也可以用模板渲染父節(jié)點(diǎn)或模板，來(lái)渲染多個(gè)子塊。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: [
{FirstName: 'John'},
{LastName: 'Doe'},
{Age: 30}
]
}
})
寫成這樣，輸出：
{ "FirstName": "John" }
{ "LastName": "Doe" }
{ "Age": 30 }
將object從數(shù)組變?yōu)槿缦拢?br />
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
那么輸出：
John
Doe
30
此時(shí)直接指向的是值了。
還有三參數(shù)：v-for="(value, key, index) in object"
還可以用整數(shù)，輸出10個(gè)數(shù)字：
<div id="haha">
<span v-for="n in 10">{{ n }}</span>
</div>
var t=1,n=0;
new Vue({
el: '#haha',
data: {
object: {
n:n+t
}
}
})
很好的例子
4.一些數(shù)組方法
push()：在末尾添加一個(gè)或多個(gè)元素，并返回新長(zhǎng)度
pop()：刪除并返回最后一個(gè)元素
shift()：刪除并返回第一個(gè)元素
unshift()：數(shù)組開(kāi)頭添加一個(gè)或多個(gè)元素，并返回新長(zhǎng)度
splice()：刪除或替換元素，返回被刪除元素。splice（index，number，new ele），用new ele 替換index開(kāi)始的number個(gè)元素
sort()
reverse()
5.類似v-on:click(含參)的注意點(diǎn)
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象
if (event) event.preventDefault()
alert(message)
}
}
如上，可以傳入原生DOM對(duì)象。
阻止冒泡還有其他方法，即在v-on上使用事件修飾符。常見(jiàn)事件修飾符有：
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- 只會(huì)觸發(fā)一次點(diǎn)擊 -->
<a v-on:click.once="doThis"></a>
有事件修飾符，還有鍵盤修飾符。
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
又新增了按鍵修飾符，和組合鍵修飾：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
6.神奇的v-model
神奇之處在于會(huì)根據(jù)控件形式自動(dòng)選取方法更新元素。
例子
<div id="che">
<select v-model="sele" multiple>
<option v-for="op in ops" v-bind:value="op.index">{{op.va}}</option>
</select>
<span>{{sele}}</span>
</div>
new Vue({
el: '#che',
data: {
sele: [],
ops:[
{index:1,va:"s"},
{index:2,va:"ss"},
{index:3,va:"ssr"}
]
}
})
若option里綁定value，則會(huì)將value值按所選中的放在數(shù)組sele開(kāi)頭。
若沒(méi)有綁定value，會(huì)將{{op.va}}當(dāng)做value。若寫為{{op.index}}則將index當(dāng)做value。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com