vm.$data

• 類型：Object

• 詳細(xì)：

  Vue 實例觀察的數(shù)據(jù)對象。Vue 實例代理了對其 data 對象屬性的訪問。

• 參考：選項 / 數(shù)據(jù) - data

vm.$props

2.2.0 新增

• 類型：Object

• 詳細(xì)：

  當(dāng)前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。

vm.$el

• 類型：HTMLElement

• 只讀

• 詳細(xì)：

  Vue 實例使用的根 DOM 元素。

vm.$options

• 類型：Object

• 只讀

• 詳細(xì)：

  用于當(dāng)前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處：

  new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // => 'foo' } })

vm.$parent

• 類型：Vue instance

• 只讀

• 詳細(xì)：

  父實例，如果當(dāng)前實例有的話。

vm.$root

• 類型：Vue instance

• 只讀

• 詳細(xì)：

  當(dāng)前組件樹的根 Vue 實例。如果當(dāng)前實例沒有父實例，此實例將會是其自己。

vm.$children

• 類型：Array<Vue instance>

• 只讀

• 詳細(xì)：

  當(dāng)前實例的直接子組件。需要注意?$children?并不保證順序，也不是響應(yīng)式的。如果你發(fā)現(xiàn)自己正在嘗試使用?$children?來進(jìn)行數(shù)據(jù)綁定，考慮使用一個數(shù)組配合?v-for來生成子組件，并且使用 Array 作為真正的來源。

vm.$slots

• 類型：{ [name: string]: ?Array<VNode> }

• 只讀

• 詳細(xì)：

  用來訪問被插槽分發(fā)的內(nèi)容。每個具名插槽?有其相應(yīng)的屬性 (例如：slot="foo"?中的內(nèi)容將會在?vm.$slots.foo?中被找到)。default?屬性包括了所有沒有被包含在具名插槽中的節(jié)點。

  在使用渲染函數(shù)書寫一個組件時，訪問?vm.$slots?最有幫助。

• 示例：

  <blog-post> <h1 slot="header"> About Me </h1> <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p> <p slot="footer"> Copyright 2016 Evan You </p> <p>If I have some content down here, it will also be included in vm.$slots.default.</p>. </blog-post>

  Vue.component('blog-post', { render: function (createElement) { var header = this.$slots.header var body = this.$slots.default var footer = this.$slots.footer return createElement('div', [ createElement('header', header), createElement('main', body), createElement('footer', footer) ]) } })

• 參考：

  • <slot>?組件
  • 使用插槽分發(fā)內(nèi)容
  • 渲染函數(shù) - 插槽

?

vm.$scopedSlots

2.1.0 新增

• 類型：{ [name: string]: props => VNode | Array<VNode> }

• 只讀

• 詳細(xì)：

  用來訪問作用域插槽。對于包括?默認(rèn) slot?在內(nèi)的每一個插槽，該對象都包含一個返回相應(yīng) VNode 的函數(shù)。

  vm.$scopedSlots?在使用渲染函數(shù)開發(fā)一個組件時特別有用。

• 參考：

  • <slot>?組件
  • 作用域插槽
  • 渲染函數(shù) - 插槽

vm.$refs

• 類型：Object

• 只讀

• 詳細(xì)：

  一個對象，持有注冊過?ref?特性?的所有 DOM 元素和組件實例。

• 參考：

  • 子組件引用
  • 特殊特性 - ref

vm.$isServer

• 類型：boolean

• 只讀

• 詳細(xì)：

  當(dāng)前 Vue 實例是否運行于服務(wù)器。

• 參考：服務(wù)端渲染

?

vm.$attrs

• 類型：{ [key: string]: string }

• 只讀

• 詳細(xì)：

  包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class?和?style?除外)。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class?和?style除外)，并且可以通過?v-bind="$attrs"?傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。

vm.$listeners

• 類型：{ [key: string]: Function | Array<Function> }

• 只讀

• 詳細(xì)：

  包含了父作用域中的 (不含?.native?修飾器的)?v-on?事件監(jiān)聽器。它可以通過?v-on="$listeners"?傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用。

實例方法 / 數(shù)據(jù)

vm.$watch( expOrFn, callback, [options] )

• 參數(shù)：

  • {string | Function} expOrFn
  • {Function | Object} callback
  • {Object} [options]
    • {boolean} deep
    • {boolean} immediate

• 返回值：{Function} unwatch

• 用法：

  觀察 Vue 實例變化的一個表達(dá)式或計算屬性函數(shù)。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對于更復(fù)雜的表達(dá)式，用一個函數(shù)取代。

  注意：在變異 (不是替換) 對象或數(shù)組時，舊值將與新值相同，因為它們的引用指向同一個對象/數(shù)組。Vue 不會保留變異之前值的副本。

• 示例：

  // 鍵路徑 vm.$watch('a.b.c', function (newVal, oldVal) { // 做點什么 }) // 函數(shù) vm.$watch( function () { return this.a + this.b }, function (newVal, oldVal) { // 做點什么 } )

  vm.$watch?返回一個取消觀察函數(shù)，用來停止觸發(fā)回調(diào)：

  var unwatch = vm.$watch('a', cb) // 之后取消觀察 unwatch()

• 選項：deep

  為了發(fā)現(xiàn)對象內(nèi)部值的變化，可以在選項參數(shù)中指定?deep: true?。注意監(jiān)聽數(shù)組的變動不需要這么做。

  vm.$watch('someObject', callback, { deep: true }) vm.someObject.nestedValue = 123 // callback is fired

• 選項：immediate

  在選項參數(shù)中指定?immediate: true?將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)：

  vm.$watch('a', callback, { immediate: true }) // 立即以 `a` 的當(dāng)前值觸發(fā)回調(diào)

vm.$set( target, key, value )

• 參數(shù)：

  • {Object | Array} target
  • {string | number} key
  • {any} value

• 返回值：設(shè)置的值。

• 用法：

  這是全局?Vue.set?的別名。

• 參考：Vue.set

vm.$delete( target, key )

• 參數(shù)：

  • {Object | Array} target
  • {string | number} key

• 用法：

  這是全局?Vue.delete?的別名。

• 參考：Vue.delete

?

vm.$on( event, callback )

• 參數(shù)：

  • {string | Array<string>} event?(數(shù)組只在 2.2.0+ 中支持)
  • {Function} callback

• 用法：

  監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由vm.$emit觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

• 示例：

  vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi')

vm.$once( event, callback )

• 參數(shù)：

  • {string} event
  • {Function} callback

• 用法：

  監(jiān)聽一個自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。

vm.$off( [event, callback] )

• 參數(shù)：

  • {string | Array<string>} event?(只在 2.2.2+ 支持?jǐn)?shù)組)
  • {Function} [callback]

• 用法：

  移除自定義事件監(jiān)聽器。

  • 如果沒有提供參數(shù)，則移除所有的事件監(jiān)聽器；

  • 如果只提供了事件，則移除該事件所有的監(jiān)聽器；

  • 如果同時提供了事件與回調(diào)，則只移除這個回調(diào)的監(jiān)聽器。

vm.$emit( eventName, […args] )

• 參數(shù)：

  • {string} eventName
  • [...args]

  觸發(fā)當(dāng)前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。

• 示例：

  只配合一個事件名使用?$emit：

  Vue.component('welcome-button', { template: ` <button v-on:click="$emit('welcome')"> Click me to be welcomed </button> ` })

  <div id="emit-example-simple"> <welcome-button v-on:welcome="sayHi"></welcome-button> </div>

  new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Hi!') } } })

  Click me to be welcomed

  配合額外的參數(shù)使用?$emit：

  Vue.component('magic-eight-ball', { data: function () { return { possibleAdvice: ['Yes', 'No', 'Maybe'] } }, methods: { giveAdvice: function () { var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length) this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex]) } }, template: ` <button v-on:click="giveAdvice"> Click me for advice </button> ` })

  <div id="emit-example-argument"> <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball> </div>

  new Vue({ el: '#emit-example-argument', methods: { showAdvice: function (advice) { alert(advice) } } })

實例方法 / 生命周期

vm.$mount( [elementOrSelector] )

• 參數(shù)：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm?- 實例自身

• 用法：

  如果 Vue 實例在實例化時沒有收到 el 選項，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的 DOM 元素。可以使用?vm.$mount()?手動地掛載一個未掛載的實例。

  如果沒有提供?elementOrSelector?參數(shù)，模板將被渲染為文檔之外的的元素，并且你必須使用原生 DOM API 把它插入文檔中。

  這個方法返回實例自身，因而可以鏈?zhǔn)秸{(diào)用其它實例方法。

• 示例：

  var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 創(chuàng)建并掛載到 #app (會替換 #app) new MyComponent().$mount('#app') // 同上 new MyComponent({ el: '#app' }) // 或者，在文檔之外渲染并且隨后掛載 var component = new MyComponent().$mount() document.getElementById('app').appendChild(component.$el)

• 參考：

  • 生命周期圖示
  • 服務(wù)端渲染

?

vm.$forceUpdate()

• 示例：

  迫使 Vue 實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

vm.$nextTick( [callback] )

• 參數(shù)：

  • {Function} [callback]

• 用法：

  將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法?Vue.nextTick?一樣，不同的是回調(diào)的?this?自動綁定到調(diào)用它的實例上。

  2.1.0 起新增：如果沒有提供回調(diào)且在支持 Promise 的環(huán)境中，則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill，所以如果你的目標(biāo)瀏覽器不是原生支持 Promise (IE：你們都看我干嘛)，你得自行 polyfill。

• 示例：

  new Vue({ // ... methods: { // ... example: function () { // 修改數(shù)據(jù) this.message = 'changed' // DOM 還沒有更新 this.$nextTick(function () { // DOM 現(xiàn)在更新了 // `this` 綁定到當(dāng)前實例 this.doSomethingElse() }) } } })

• 參考：Vue.nextTick

vm.$destroy()

• 用法：

  完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器。

  觸發(fā)?beforeDestroy?和?destroyed?的鉤子。

  在大多數(shù)場景中你不應(yīng)該調(diào)用這個方法。最好使用?v-if?和?v-for?指令以數(shù)據(jù)驅(qū)動的方式控制子組件的生命周期。

• 參考：生命周期圖示

指令

v-text

• 預(yù)期：string

• 詳細(xì)：

  更新元素的?textContent。如果要更新部分的?textContent?，需要使用?{{ Mustache }}?插值。

• 示例：

  <span v-text="msg"></span> <!-- 和下面的一樣 --> <span>{{msg}}</span>

• 參考：數(shù)據(jù)綁定語法 - 插值

v-html

• 預(yù)期：string

• 詳細(xì)：

  更新元素的?innerHTML?。注意：內(nèi)容按普通 HTML 插入 - 不會作為 Vue 模板進(jìn)行編譯。如果試圖使用?v-html?組合模板，可以重新考慮是否通過使用組件來替代。

  在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導(dǎo)致?XSS 攻擊。只在可信內(nèi)容上使用?v-html，永不用在用戶提交的內(nèi)容上。

  在單文件組件里，scoped?的樣式不會應(yīng)用在?v-html?內(nèi)部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對?v-html?的內(nèi)容設(shè)置帶作用域的 CSS，你可以替換為?CSS Modules?或用一個額外的全局?<style>?元素手動設(shè)置類似 BEM 的作用域策略。

• 示例：

  <div v-html="html"></div>

• 參考：數(shù)據(jù)綁定語法 - 插值

v-show

• 預(yù)期：any

• 用法：

  根據(jù)表達(dá)式之真假值，切換元素的?display?CSS 屬性。

  當(dāng)條件變化時該指令觸發(fā)過渡效果。

• 參考：條件渲染 - v-show

v-if

• 預(yù)期：any

• 用法：

  根據(jù)表達(dá)式的值的真假條件渲染元素。在切換時元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建。如果元素是?<template>?，將提出它的內(nèi)容作為條件塊。

  當(dāng)條件變化時該指令觸發(fā)過渡效果。

  當(dāng)和?v-if?一起使用時，v-for?的優(yōu)先級比?v-if?更高。詳見列表渲染教程

• 參考：條件渲染 - v-if

v-else

• 不需要表達(dá)式

• 限制：前一兄弟元素必須有?v-if?或?v-else-if。

• 用法：

  為?v-if?或者?v-else-if?添加“else 塊”。

  <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>

• 參考：條件渲染 - v-else

v-else-if

2.1.0 新增

• 類型：any

• 限制：前一兄弟元素必須有?v-if?或?v-else-if。

• 用法：

  表示?v-if?的 “else if 塊”。可以鏈?zhǔn)秸{(diào)用。

  <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>

• 參考：條件渲染 - v-else-if

v-for

• 預(yù)期：Array | Object | number | string

• 用法：

  基于源數(shù)據(jù)多次渲染元素或模板塊。此指令之值，必須使用特定語法?alias in expression?，為當(dāng)前遍歷的元素提供別名：

  <div v-for="item in items"> {{ item.text }} </div>

  另外也可以為數(shù)組索引指定別名 (或者用于對象的鍵)：

  <div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div>

  v-for?默認(rèn)行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個?key?的特殊屬性：

  <div v-for="item in items" :key="item.id"> {{ item.text }} </div>

  v-for?的詳細(xì)用法可以通過以下鏈接查看教程詳細(xì)說明。

• 參考：

  • 列表渲染
  • key

v-on

• 縮寫：@

• 預(yù)期：Function | Inline Statement | Object

• 參數(shù)：event

• 修飾符：

  • .stop?- 調(diào)用?event.stopPropagation()。
  • .prevent?- 調(diào)用?event.preventDefault()。
  • .capture?- 添加事件偵聽器時使用 capture 模式。
  • .self?- 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。
  • .{keyCode | keyAlias}?- 只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)。
  • .native?- 監(jiān)聽組件根元素的原生事件。
  • .once?- 只觸發(fā)一次回調(diào)。
  • .left?- (2.2.0) 只當(dāng)點擊鼠標(biāo)左鍵時觸發(fā)。
  • .right?- (2.2.0) 只當(dāng)點擊鼠標(biāo)右鍵時觸發(fā)。
  • .middle?- (2.2.0) 只當(dāng)點擊鼠標(biāo)中鍵時觸發(fā)。
  • .passive?- (2.3.0) 以?{ passive: true }?模式添加偵聽器

• 用法：

  綁定事件監(jiān)聽器。事件類型由參數(shù)指定。表達(dá)式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。

  用在普通元素上時，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

  在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個?$event?屬性：v-on:click="handle('ok', $event)"。

  從?2.4.0?開始，v-on?同樣支持不帶參數(shù)綁定一個事件/監(jiān)聽器鍵值對的對象。注意當(dāng)使用對象語法時，是不支持任何修飾器的。

• 示例：

  <!-- 方法處理器 --> <button v-on:click="doThis"></button> <!-- 內(nèi)聯(lián)語句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 縮寫 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默認(rèn)行為 --> <button @click.prevent="doThis"></button> <!-- 阻止默認(rèn)行為，沒有表達(dá)式 --> <form @submit.prevent></form> <!-- 串聯(lián)修飾符 --> <button @click.stop.prevent="doThis"></button> <!-- 鍵修飾符，鍵別名 --> <input @keyup.enter="onEnter"> <!-- 鍵修飾符，鍵代碼 --> <input @keyup.13="onEnter"> <!-- 點擊回調(diào)只會觸發(fā)一次 --> <button v-on:click.once="doThis"></button> <!-- 對象語法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

  在子組件上監(jiān)聽自定義事件 (當(dāng)子組件觸發(fā)“my-event”時將調(diào)用事件處理器)：

  <my-component @my-event="handleThis"></my-component> <!-- 內(nèi)聯(lián)語句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 組件中的原生事件 --> <my-component @click.native="onClick"></my-component>

• 參考：

  • 事件處理器
  • 組件 - 自定義事件

?

v-bind

• 縮寫：:

• 預(yù)期：any (with argument) | Object (without argument)

• 參數(shù)：attrOrProp (optional)

• 修飾符：

  • .prop?- 被用于綁定 DOM 屬性 (property)。(差別在哪里？)
  • .camel?- (2.1.0+) 將 kebab-case 特性名轉(zhuǎn)換為 camelCase. (從 2.1.0 開始支持)
  • .sync?(2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的?v-on?偵聽器。

• 用法：

  動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達(dá)式。

  在綁定?class?或?style?特性時，支持其它類型的值，如數(shù)組或?qū)ο蟆？梢酝ㄟ^下面的教程鏈接查看詳情。

  在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。

  沒有參數(shù)時，可以綁定到一個包含鍵值對的對象。注意此時?class?和?style?綁定不支持?jǐn)?shù)組和對象。

• 示例：

  <!-- 綁定一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 內(nèi)聯(lián)字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 綁定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定一個有屬性的對象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通過 prop 修飾符綁定 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 綁定。“prop”必須在 my-component 中聲明。--> <my-component :prop="someThing"></my-component> <!-- 通過 $props 將父組件的 props 一起傳給子組件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>

  .camel?修飾符允許在使用 DOM 模板時將?v-bind?屬性名稱駝峰化，例如 SVG 的?viewBox?屬性：

  <svg :view-box.camel="viewBox"></svg>

  在使用字符串模板或通過?vue-loader/vueify?編譯時，無需使用?.camel。

• 參考：

  • Class 與 Style 綁定
  • 組件 - Props
  • 組件 -?.sync?修飾符

?

v-model

• 預(yù)期：隨表單控件類型不同而不同。

• 限制：

  • <input>
  • <select>
  • <textarea>
  • components

• 修飾符：

  • .lazy?- 取代?input?監(jiān)聽?change?事件
  • .number?- 輸入字符串轉(zhuǎn)為數(shù)字
  • .trim?- 輸入首尾空格過濾

• 用法：

  在表單控件或者組件上創(chuàng)建雙向綁定。細(xì)節(jié)請看下面的教程鏈接。

• 參考：

  • 表單控件綁定
  • 組件 - 在輸入組件上使用自定義事件

v-cloak

• 不需要表達(dá)式

• 用法：

  這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如?[v-cloak] { display: none }?一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。

• 示例：

  [v-cloak] { display: none; }

  <div v-cloak> {{ message }} </div>

  ?

  不會顯示，直到編譯結(jié)束。

  ?

v-once

• 不需要表達(dá)式

• 詳細(xì)：

  只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。

  <!-- 單個元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 組件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>

• 參考：

  • 數(shù)據(jù)綁定語法- 插值
  • 組件 - 對低開銷的靜態(tài)組件使用?v-once

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhouyideboke/p/9482893.html

總結(jié)

以上是生活随笔為你收集整理的对实例的研究的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。