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