Vue.js備忘單

日常Vue.js編碼會話中將使用的常見命令和說明

指令

指令是由v-字首。

指示 描述
v-text 使用屬性作為元素的文本值
v-html 使用屬性作為元素的文本值,解釋HTML
v-if 僅在條件為true時顯示元素
v-else 如果前面的內容顯示一個替代元素v-if是假的
v-else-if 添加else if塊v-if構造
v-show 如同v-if,但即使是偽造的元素也會將其添加到DOM中。只需將其設置為display: none
v-for 遍歷數組或可迭代對象
v-on 監聽DOM事件
v-bind 反應性地更新HTML屬性
v-model 為表單輸入設置雙向綁定。用於表單元素中,當用戶更改表單字段值時更新模型
v-once 僅一次應用該屬性,即使傳遞的數據發生更改也永遠不會刷新該屬性

v-bindv-on具有簡寫格式:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

例子v-if/v-else/v-else-if

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

有條件的

您可以使用三元運算符將條件嵌入表達式中:

{{ isTrue ? 'yes' : 'no' }}

使用表單元素

要在發生更改事件時(而不是在用戶每次按鍵時)進行模型更新,可以使用v-model.lazy而不只是v.model

使用輸入字段,v-model.trim很有用,因為它會自動刪除空格。

如果您接受的是數字而不是字符串,請確保使用v-model.number

修改事件

我用click作為示例,但適用於所有可能的事件

  • v-on:click.native觸發本地DOM事件而不是Vue事件
  • v-on:click.stop停止點擊事件的傳播
  • v-on:click.passive利用addEventListener的被動選項
  • v-on:click.capture使用事件捕獲而不是事件冒泡
  • v-on:click.self確保click事件沒有從子事件中冒出,而是直接發生在該元素上
  • v-on:click.once該事件只會被觸發一次
  • v-on:submit.prevent: 稱呼event.preventDefault()在觸發的Submit事件上,用於避免表單提交以重新加載頁面

有關傳播,冒泡/捕捉的更多信息,請參閱我的JavaScript事件指南

鼠標事件修改器

  • v-on:click .left僅在鼠標左鍵單擊時觸發
  • v-on:click .right僅在單擊鼠標右鍵時觸發
  • v-on:click .middle僅在鼠標中鍵單擊時觸發

僅在按下特定鍵時才提交事件

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

鍵盤事件修飾符

僅當還按下特定的鍵盤鍵時才觸發事件:

  • .ctrl
  • .alt
  • .shift
  • .meta(在Mac上為cmd,在Win上為Windows鍵)

綁定

  • v-bind .prop綁定道具而不是屬性
  • v-bind .camel使用camelCase作為屬性名稱
  • v-bind .sync一種語法糖,可以擴展為v-on用於更新綁定值的處理程序。看

生命週期掛鉤

  • beforeCreate在創建應用之前調用
  • created應用創建後調用
  • beforeMount在將應用程序安裝到DOM之前調用
  • mounted在將應用程序安裝到DOM後調用
  • beforeDestroy在應用程序銷毀之前調用
  • destroyed應用銷毀後調用
  • beforeUpdate在屬性更新之前調用
  • updated屬性更新後調用
  • activated激活保持活動的組件時調用
  • deactivated停用保持活動的組件時調用

內置組件

Vue提供了5個內置組件:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

Vue對象的全局配置

Vue.config對象具有以下屬性,您可以在創建實例時對其進行修改:

財產 描述
silent 默認為false,如果為true,則禁止顯示日誌和警告
optionMergeStrategies 允許定義一個定制合併策略選擇
devtools 在開發中默認為true,在生產中默認為false。您可以覆蓋這些值。
errorHandler 允許設置錯誤處理程序功能。有助於鉤住哨兵和其他類似服務
warnHandler 允許設置警告處理程序功能,類似於errorHandler,但用於警告而不是錯誤
ignoredElements 用於讓Vue忽略在其外部定義的自定義元素,例如Web組件
keyCodes 讓您為以下項定義自定義鍵別名v-on
performance 默認為false。如果設置為true,則在瀏覽器DevTools中跟踪Vue組件的性能。
productionTip 默認為true。設置為false可在控制台中的開發過程中禁用警告“您處於開發模式”。

Vue對象的方法

方法 描述
Vue.extend 允許子類化Vue對象,以創建自定義配置文件
Vue.nextTick 推遲下一個DOM更新周期後執行的回調
Vue.set 向對象添加屬性
Vue.delete 從對像中刪除屬性
Vue.directive 設置(或獲取)全局指令
Vue.filter 設置(或獲取)全局過濾器
Vue.component 設置(或獲取)全局組件
Vue.use 安裝一個Vue.js插件
Vue.mixin 設置全局混合
Vue.compile 將模板字符串編譯成渲染函數
Vue.version 返回當前安裝的Vue版本

傳遞給Vue對象的選項

初始化Vue對象時,您傳入一個對象:

const vm = new Vue({

})

該對象接受許多屬性。

財產 描述
data 允許傳遞一組將由Vue應用程序使用的反應性數據。所有反應性屬性必須在初始化時添加,以後不能添加新的。
props 它是一組屬性,作為輸入數據公開給父組件。
propsData 道具的默認數據。僅在測試期間有用
methods 在Vue實例上定義的一組方法
computed 相似的方法,但在內部緩存
watch 允許觀看屬性,並在屬性更改時調用函數

定義數據,方法和計算屬性的示例:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • el設置實例安裝所在的DOM元素。它可以是CSS選擇器,也可以是HTMLElement
  • template是一個模板,以字符串表示,它將替換已安裝的元素
  • render或者定義模板,您可以使用渲染功能定義模板
  • renderError附加功能時設置替代輸出render失敗了

Vue實例資產

  • directives與Vue實例關聯的指令集
  • filters與Vue實例關聯的一組過濾器
  • components與Vue實例關聯的組件集

Vue組成選項

  • parent指定父實例
  • mixins設置一個混合對像數組
  • extends擴展另一個組件

其他Vue對象選項

  • name為組件設置名稱可以調用它,這在調試時或需要在其模板中遞歸添加組件時很有用
  • functional如果為true,則將組件設置為無狀態(否data)和無實例(否this),使其更輕巧
  • model允許自定義事件中使用的屬性,例如在與表單交互時很有用
  • comments默認為false。如果設置為true,則保留模板中的HTML註釋

實例屬性

給定Vue的實例,將其存儲到變量中const vm = new Vue(/*...*/),您可以對其進行檢查並進行交互。

Vue實例的屬性

  • vm.$data與實例關聯的數據對象
  • vm.$props實例收到的道具
  • vm.$el實例綁定到的DOM元素
  • vm.$options用於實例化Vue實例的對象
  • vm.$parent父實例
  • vm.$root根實例(如果這是根實例,則指向自身)
  • vm.$children一系列子實例
  • vm.$slots模板中包含的相關插槽的數組
  • vm.$scopedSlots相關作用域插槽的數組
  • vm.$refs一個對象,該對象包含由a指向的每個元素的屬性ref模板中定義的屬性
  • vm.$isServer如果Vue實例正在服務器上運行,則為true(在服務器端呈現中很有用)
  • vm.$attrs提供給組件但未定義為prop的屬性的對象
  • vm.$listeners的對象v-on分配給組件的事件偵聽器

方法數據

  • vm.$watch為Vue數據中的屬性更改設置觀察程序。它也可以觀察對象內部的價值變化
  • vm.$set設置一個屬性
  • vm.$delete刪除屬性

大事記

  • vm.$emit在上觸發自定義事件vmVue實例
  • vm.$on監聽自定義事件vmVue實例
  • vm.$once喜歡$on,但只聽一次
  • vm.$off從Vue實例中刪除事件偵聽器

生命週期方法

  • vm.$mount在尚未安裝DOM元素的情況下將其安裝在DOM元素上
  • vm.$forceUpdate強迫vmVue實例重新渲染。不強制重新渲染子組件。
  • vm.$nextTick接受回調併計劃在下一個DOM更新周期進行
  • vm.$destroy銷毀應用程序並刪除所有子組件,觀察者和偵聽器

免費下載我的Vue手冊


更多vue教程: