2019-8-27 seo達人
1.Method與計算屬性computed的區(qū)別
區(qū)別在于method每次都執(zhí)行函數(shù)，而computed基于依賴緩存，只要相關值不變，那么就不必再執(zhí)行函數(shù)。
下面，注意Date不是響應式依賴：
computed: {
now: function () {
return Date.now()
}
}
所以使用計算屬性
2.v-if與v-show
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）。
相比之下， v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
令，v-show不支持template語法。
3.v-for
可以v-for="item in items"也可以of
還有可選第二參數(shù)作為前項的索引：
<li v-for="(item, index) in items">
也可以用模板渲染父節(jié)點或模板，來渲染多個子塊。
<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ù)：v-for="(value, key, index) in object"
還可以用整數(shù)，輸出10個數(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()：在末尾添加一個或多個元素，并返回新長度
pop()：刪除并返回最后一個元素
shift()：刪除并返回第一個元素
unshift()：數(shù)組開頭添加一個或多個元素，并返回新長度
splice()：刪除或替換元素，返回被刪除元素。splice（index，number，new ele），用new ele 替換index開始的number個元素
sort()
reverse()
5.類似v-on:click(含參)的注意點
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 現(xiàn)在我們可以訪問原生事件對象
if (event) event.preventDefault()
alert(message)
}
}
如上，可以傳入原生DOM對象。
阻止冒泡還有其他方法，即在v-on上使用事件修飾符。常見事件修飾符有：
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發(fā)時觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- 只會觸發(fā)一次點擊 -->
<a v-on:click.once="doThis"></a>
有事件修飾符，還有鍵盤修飾符。
<!-- 只有在 keyCode 是 13 時調(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
神奇之處在于會根據(jù)控件形式自動選取方法更新元素。
例子
<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，則會將value值按所選中的放在數(shù)組sele開頭。
若沒有綁定value，會將{{op.va}}當做value。若寫為{{op.index}}則將index當做value。
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。