vue有哪些常用api

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作為一個 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

vm.$forceUpdate()

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

{{ message | capitalize }}

// 注冊
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

// 全局注冊
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

說明：

• 過濾器函數(shù)總接收表達(dá)式的值 (之前的操作鏈的結(jié)果) 作為第一個參數(shù)。

• 過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號指示。

ps：過濾器可以接受多個參數(shù)，如{{ message | filterA('arg1', arg2) }}，這里，filterA 被定義為接收三個參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個參數(shù)，普通字符串 'arg1' 作為第二個參數(shù)，表達(dá)式 arg2 的值作為第三個參數(shù)。

directive

功能：用于注冊自定義指令。
用法：

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 注冊局部指令，組件中也接受一個 directives 的選項
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

說明：

• inserted 只是注冊指令的其中一個插值函數(shù)，完整的注冊屬性還可以包括：

• bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用，在這里可以進(jìn)行一次性的初始化設(shè)置。

• inserted：被綁定元素插入父節(jié)點時調(diào)用（僅保證父節(jié)點存在，但不一定已被插入文檔中）。

• update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有，但是可以通過比較更新前后的值來忽略不必要的模板更新。

• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

v-model 語法糖

v-model 常用于表單元素上進(jìn)行數(shù)據(jù)的雙向綁定，比如 。除了原生的元素，它還能在自定義組件中使用。

v-model 是一個語法糖，可以拆解為 props: value 和 events: input。就是說組件必須提供一個名為 value 的 prop，以及名為 input 的自定義事件，滿足這兩個條件，使用者就能在自定義組件上使用 v-model。比如下面的示例，實現(xiàn)了一個數(shù)字選擇器：

props 一般不能在組件內(nèi)修改，它是通過父級修改的，因此實現(xiàn) v-model 一般都會有一個 currentValue 的內(nèi)部 data，初始時從 value 獲取一次值，當(dāng) value 修改時，也通過 watch 監(jiān)聽到及時更新；組件不會修改 value 的值，而是修改 currentValue，同時將修改的值通過自定義事件 input 派發(fā)給父組件，父組件接收到后，由父組件修改 value。所以，上面的數(shù)字選擇器組件可以有下面兩種使用方式：

或：

如果你不想用 value 和 input 這兩個名字，從 Vue.js 2.2.0 版本開始，提供了一個 model 的選項，可以指定它們的名字，所以數(shù)字選擇器組件也可以這樣寫：

在 model 選項里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因為這兩個名字在一些原生表單元素里，有其它用處。

.sync 修飾符

如果你使用過 Vue.js 1.x，一定對 .sync 不陌生。在 1.x 里，可以使用 .sync 雙向綁定數(shù)據(jù)，也就是父組件或子組件都能修改這個數(shù)據(jù)，是雙向響應(yīng)的。在 Vue.js 2.x 里廢棄了這種用法，目的是盡可能將父子組件解耦，避免子組件無意中修改了父組件的狀態(tài)。

不過在 Vue.js 2.3.0 版本，又增加了 .sync 修飾符，但它的用法與 1.x 的不完全相同。2.x 的 .sync 不是真正的雙向綁定，而是一個語法糖，修改數(shù)據(jù)還是在父組件完成的，并非在子組件。

仍然是數(shù)字選擇器的示例，這次不用 v-model，而是用 .sync，可以這樣改寫：

用例：

看起來要比 v-model 的實現(xiàn)簡單多，實現(xiàn)的效果是一樣的。v-model 在一個組件中只能有一個，但 .sync 可以設(shè)置很多個。.sync 雖好，但也有限制，比如：

• 不能和表達(dá)式一起使用（如 v-bind:title.sync="doc.title + '!'" 是無效的）；

• 不能用在字面量對象上（如 v-bind.sync="{ title: doc.title }" 是無法正常工作的）。

其它簡單的常用屬性和方法

// console.log(vm.$root); 
vm.$root    //實例對象

vm.$el  //根元素（真實的DOM元素）
// console.log(vm.$el);

vm.$el.innerHTML    //得到根元素（真實的DOM元素）中的內(nèi)容
// console.log(vm.$el.innerHTML);

vm.$data    //實例下的data對象
// console.log(vm.$data);

vm.$options     //實例下的掛載項
// console.log(vm.$options);

vm.$props   //組件之間通信的數(shù)據(jù)
// console.log(vm.$props);

vm.$parent      //在組件中，指父元素
// console.log(vm.$parent);

vm.$children    //在組件中，指子代元素
// console.log(vm.$children);

vm.$attrs   //用來獲取父組件傳遞過來的所有屬性
// console.log(vm.$attrs);

vm.$listeners   //用來獲取父組件傳遞過來的所有方法
// console.log(vm.$listeners);

vm.$slots   //組件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots     //用來訪問作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs    //用來定位DOM元素（使用ref進(jìn)行追蹤）
// console.log(vm.$refs);

vm.$watch   //用于監(jiān)聽數(shù)據(jù)（在vue文件中使用后會自動銷毀）
// console.log(vm.$watch);

vm.$emit    //用于派發(fā)事件（常用于數(shù)據(jù)通信）
// console.log(vm.$emit);

vm.$on  //用于監(jiān)聽事件的派發(fā)
// console.log(vm.$on);

vm.$once    //只監(jiān)聽事件一次（之后不監(jiān)聽）
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

以上是“vue有哪些常用api”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！