Vue 學習筆記 - 基礎（下）
條件渲染
v-if
<p v-if="布爾表達式"> if </p>
<p v-else-if="布爾表達式"> else if </p>
<p v-else> else </p>
- 用
key管理可複用的元素
Vue會盡可能重用相同的元素。如果不想它讓重用，可以添加key="唯一身份標識"來區分。
v-show
<h1 v-show="布爾表達式"> 布爾表達式爲【真】時顯示</h1>
v-if vs v-show
v-if 爲假時不創建元素。
v-show 爲假時只是 style="display: none;"
v-if 與 v-for 一起使用 (在同一標籤上)
列表渲染
v-for 遍歷數組
v-for="item in arr" 或 v-for="(item, index ) of arr" :key="item"
| 關鍵字 | 解釋 |
|---|---|
arr |
數組 |
item |
當前遍歷到的對象 |
index |
可選的第二參數，當前元素索引 |
in 和 of |
兩種寫法，沒區別 |
:key |
可選。支持字符串和數字。建議始終加上 |
v-for 遍歷對象
v-for="(value, key, index) in obj"
只遍歷 value 可以省略括號。遍歷的結果來自Object.keys(obj)本質還是遍歷數組。
維護狀態
:key不是for專用的。支持字符串和數字。
數組更新檢測
變更方法
Vue封裝了這些 push() pop() shift() unshift() splice() sort() reverse()數組方法，所以它們也能觸發視圖更新。
替換數組
filter()、concat() 和 slice()一般用來替換原數組。Vue實現了一些智能方法，所以用含有相同元素的數組替換原來數組是非常高效的。
注意事項
由於 JavaScript 的限制，Vue 不能檢測數組和對象的變化。深入響應式原理中有相關的討論。
顯示過濾/排序後的結果
- 使用
計算屬性保護原始數據，返回要用的結果。 - 在
嵌套 v-for循環中計算屬性不合適，可以使用方法
在 v-for 裏使用值範圍
遍歷 1 到 10
<div>
<span v-for="(item, index) of 10">{{index}} - {{ item }}</span>
</div>
在 上使用 v-for
利用template可以渲染一組元素（template自己是不會出現的）
<ul>
<template v-for="n in 3">
<li>{{ n }}</li>
<li>--------</li>
</template>
</ul>
<ul>
<li>1</li>
<li>--------</li>
<li>2</li>
<li>--------</li>
<li>3</li>
<li>--------</li>
</ul>
v-for 與 v-if 一同使用
官方不推薦在同一元素上使用 v-if 和 v-for。更多細節可查閱風格指南。
在組件上使用 v-for
自定義組件和普通元素上v-for用法一樣。 但：
2.2.0+的版本里key是必須的。- 組件有自己的作用域，所以外面的數據要
v-bind:手動傳進去。
<div id="app">
<my_component v-for="item in arr" v-bind:npc="item"></my_component>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [{name:'張三'},{name:'李四'},{name:'王五'}],
},
components: {
'my_component': {
props: ['npc'],
template: '<div> {{npc.name}} </div>'
}
}
});
</script>
<div id="app">
<div> 張三 </div>
<div> 李四 </div>
<div> 王五 </div>
</div>
事件處理
監聽事件
v-on 簡寫 @
v-on:事件名="代碼 or 函數名"
| 參數描述 | 示例 (變量or函數都已Vue實例中定義) |
|---|---|
| 表達式 | v-on:click="i++" |
| 函數 | v-on:click="function foo(){i++}" |
| 事件處理方法 | v-on:click="foo" |
| 內聯處理器中的方法 | v-on:click="foo(2)" |
| 原始的 DOM 事件 | v-on:click="foo(2, $event)" |
事件修飾符
v-on:事件.修飾符1.修飾符2="事件處理方法"。修飾生效與順序有關，從左向右依次生效。
| 修飾符 | 說明 |
|---|---|
| v-on:click.stop | 阻止單擊事件繼續傳播 |
| v-on:submit.prevent | 提交事件不再重載頁面 |
| v-on:click.stop.prevent | 修飾符可以串聯：阻止單擊事件繼續傳播、提交事件不再重載頁面 |
| v-on:submit.prevent | 只有修飾符 |
| v-on:click.capture | 添加事件監聽器時使用事件捕獲模式 即外部元素觸發的事件先處理，然後才交由內部元素進行處理 |
| v-on:click.self | 只當在 event.target 是當前元素自身時觸發處理函數 |
| v-on:click.once | 2.1.4 新增：點擊事件將只會觸發一次 |
| v-on:scroll.passive | 2.3.0 新增：滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 而不會等待 onScroll 完成這其中包含 event.preventDefault() 的情況這個 .passive 修飾符尤其能夠提升移動端的性能。 .passive 和 .prevent 不要一起使用，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。 |
按鍵修飾符
在監聽鍵盤事件時可以使用：v-on:keyup.enter="myClick"
如上僅當$event.key 爲"Enter"時調用"myClick"方法。完整有效按鍵名見：MDN: Key Values
按鍵碼 keyCode
keyCode即將廢棄，爲兼容舊瀏覽器Vue定義了常用別名：
.enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right
你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系統修飾鍵 2.1.0 新增
.ctrl .alt .shift .meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
系統鍵要是按住的，如果想單擊觸發，請使用按鍵碼 keyCode
.exact 修飾符 2.5.0 新增
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button v-on:click.exact="onClick">A</button>
鼠標按鈕修飾符 2.2.0 新增
.left .right .middle
爲什麼在 HTML 中監聽事件？
Vue 只在標籤上用v-on綁定事件，不會在js裏綁事件，方便查找定位。視圖銷燬，Vue會自動清理事件。