最近在看vue-element-admin
框架的源碼,發現其中還是有不少的語法糖。感覺對初次接觸Vue
的開發者還是會造成些困惑,雖然之前我有使用過React
,但是對比起來Vue
還是有不少從未見過的語法糖或簡寫,爲了以便時而查閱,這裏就將自己覺得比較重要的內容羅列在此。
常見簡寫
v-bind屬性綁定:
<div v-bind:class="actived"></div>
//等效於
<div :class="actived"></div>
v-on事件綁定@
<div v-on:click="actived"></div>
//等效於
<div @click="actived"></div>
事件修飾符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續向父組件傳播 -->
<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>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發,而不會等待onScroll完成 -->
<div v-on:scroll.passive="onScroll"></div>
按鍵修飾符
允許組件監聽具體的按鍵事件,例如:
<!-- 只有在 key是 Enter 時調用 submit()方法 -->
<input v-on:keyup.enter="submit">
常用按鍵修飾符
.enter
.tab
.delete
(捕獲“刪除”和“退格”鍵).esc
.space
.up
.down
.left
.right
系統按鍵修飾符
.ctrl
.alt
.shift
.meta
在
Mac
系統鍵盤上,meta
對應command
鍵(⌘)
。在Windows
系統鍵盤meta
對應Windows
徽標鍵(⊞)
鼠標按鍵修飾符
.left
.right
.middle
這些可以用於監聽特定的鼠標點擊按鍵,例如click到底是左鍵還是右鍵觸發等等。
自定義
自定義事件
注意事件名稱必須是轉小寫之後完全匹配的,例如:
<my-component @my-event="doSomething"></my-component>
//可以使用如下語句觸發my-event事件
this.$emit('my-Event')
//但是使用如下語句是不能觸發的,因爲事件是不會轉化命名格式的
this.$emit('myEvent')
//建議始終使用 kebab-case格式 的事件名
自定義命令
在開始自定義命令之前,我們還是先來看看Vue
官方爲我們提供了哪些命令:
v-if
:條件渲染命令,只有匹配的那一行標籤纔會被渲染
<!-- -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if="good">good</h1>
<h1 v-else>Oh no </h1>
v-show
:帶有v-show
的元素始終會被渲染並保留在DOM
中。v-show
只是簡單地切換元素的display
<h1 v-show="ok">Hello!</h1>
v-for
:遍歷指定列表,並將遍歷的子元素傳入子組件,注意v-for
的優先級比v-if
更高
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
v-bind:is
:用於切換當前顯示的組件
<!-- 當 `currentView` 改變時,組件也跟着改變 -->
<component v-bind:is="currentView"></component>
v-html
:將後面跟的值解釋爲html
<!-- rawhtml="<span style="color: red">This should be red.</span>" -->
<p>Using mustaches: {{ rawHtml }}</p>
<!-- 下面這段代碼將會渲染成紅色的內容 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
還有些沒涉及到的指令請查看官方API,然後我們來看如何自定義我們自己的命令:
// 註冊一個v-focus命令
Vue.directive('focus', {
// 指定一個鉤子函數,即什麼時候執行這個函數
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<input v-focus>
按照上面這麼配置之後,當頁面加載完畢之後,輸入框就會被聚焦。鉤子函數有如下幾個:
-
bind
:只調用一次,指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。 -
inserted
:被綁定元素插入父節點時調用 (僅保證父節點存在,但不一定已被插入文檔中)。 -
update
:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。 -
componentUpdated
:指令所在組件的 VNode 及其子 VNode 全部更新後調用。 -
unbind
:只調用一次,指令與元素解綁時調用
自定義的命令也是可以傳參數的,例如:
<div id="baseexample">
<p>Scroll down the page</p>
<p v-pin="200">Stick me 200px from the top of the page</p>
</div>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
//可以從binding參數中獲取到值
el.style.top = binding.value + 'px'
}
})