vue的api有:1、nextTick;2、mixin;3、「$forceUpdate」;4、set和delete;5、filter;6、directive;7、「$root」;8、「 $el」;9、「$data」;10、「$props」等。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
功能: 新增在下次Dom更新循環結束之後的延遲回調,修改資料之後,可以取得更新後的Dom。
用法:
Vue.nextTick( [callback, context] ) vm.$nextTick( [callback] ) // 用法2 // 作为一个 Promise 使用 (2.1.0 起新增) Vue.nextTick() .then(function () { // DOM 更新了 })
說明:
ps:2.1.0 起新增:如果沒有提供回呼且在支援Promise 的環境中,則傳回一個Promise。請注意 Vue 不自備 Promise 的 polyfill,所以如果你的目標瀏覽器不原生支援 Promise (IE:你們都看我幹嘛),你得自己提供 polyfill。
擴充功能: 關於nextTick的執行機制和使用場景,我們也必須掌握類似的requestAnimationFrame() 和process.nextTick(), 前者是瀏覽器自帶的監聽(下次重繪之前執行),後者是node環境下,在下一個事件輪詢的時間點上執行。
功能: 註冊一個混入,影響註冊之後所有建立的每個 Vue 實例。插件作者可以使用混入,向元件注入自訂的行為。
用法:
// 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!"
說明:
ps:請謹慎使用全域混入,因為它會影響每個單獨建立的Vue 實例(包括第三方元件)。大多數情況下,只應應用於自訂選項,就像上面範例一樣。推薦將其作為插件發布,以避免重複應用程式混入。
功能: 迫使 Vue 實例重新渲染。
用法:
vm.$forceUpdate()
說明: 注意它只會影響實例本身和插入插槽內容的子元件,而不是所有子元件。
功能: 對響應式資料的屬性進行設定、刪除,同時觸發視圖更新。
用法:
// 用法1 Vue.set( target, key, value ) Vue.delete( target, key ) // 用法2 vm.$set( target, key, value ) vm.$delete( target, key )
說明:
ps:主要使用場景,可以避開Vue 不能偵測到property 被刪除的限制
功能: 用於一些常見的文字格式化和一些規範資料mapping。
用法:
<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
// 注册 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({ // ... })
說明:
ps:濾波器可以接受多個參數,如{{ message | filterA('arg1', arg2) }},這裡,filterA 被定義為接收三個參數的過濾器函數。其中 message 的值作為第一個參數,普通字串 'arg1' 作為第二個參數,表達式 arg2 的值作為第三個參數。
功能: 用於註冊自訂指令。
用法:
<!-- 当页面加载时,该元素将获得焦点 --> <input v-focus>
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
// 注册局部指令,组件中也接受一个 directives 的选项 directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
說明:
Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} })
v-model 常用於表單元素上進行資料的雙向綁定,例如 。除了原生的元素,它還能在自訂元件中使用。
v-model 是語法糖,可以拆解為 props: value 和 events: input。是說元件必須提供一個名為 value 的 prop,以及名為 input 的自訂事件,滿足這兩個條件,使用者就能在自訂元件上使用 v-model。例如下面的範例,實作了一個數字選擇器:
<template> <div> <button @click="increase(-1)">减 1</button> <span >{{ currentValue }}</span> <button @click="increase(1)">加 1</button> </div> </template> <script> export default { name: 'InputNumber', props: { value: { type: Number } }, data () { return { currentValue: this.value } }, watch: { value (val) { this.currentValue = val; } }, methods: { increase (val) { this.currentValue += val; this.$emit('input', this.currentValue); } } } </script>
props 一般不能在组件内修改,它是通过父级修改的,因此实现 v-model 一般都会有一个 currentValue 的内部 data,初始时从 value 获取一次值,当 value 修改时,也通过 watch 监听到及时更新;组件不会修改 value 的值,而是修改 currentValue,同时将修改的值通过自定义事件 input 派发给父组件,父组件接收到后,由父组件修改 value。所以,上面的数字选择器组件可以有下面两种使用方式:
<template> <InputNumber v-model="value" /> </template> <script> import InputNumber from '../components/input-number/input-number.vue'; export default { components: { InputNumber }, data () { return { value: 1 } } } </script>
或:
<template> <InputNumber :value="value" @input="handleChange" /> </template> <script> import InputNumber from '../components/input-number/input-number.vue'; export default { components: { InputNumber }, data () { return { value: 1 } }, methods: { handleChange (val) { this.value = val; } } } </script>
如果你不想用 value 和 input 这两个名字,从 Vue.js 2.2.0 版本开始,提供了一个 model 的选项,可以指定它们的名字,所以数字选择器组件也可以这样写:
<template> <div> <button @click="increase(-1)">减 1</button> <span >{{ currentValue }}</span> <button @click="increase(1)">加 1</button> </div> </template> <script> export default { name: 'InputNumber', props: { number: { type: Number } }, model: { prop: 'number', event: 'change' }, data () { return { currentValue: this.number } }, watch: { value (val) { this.currentValue = val; } }, methods: { increase (val) { this.currentValue += val; this.$emit('number', this.currentValue); } } } </script>
在 model 选项里,就可以指定 prop 和 event 的名字了,而不一定非要用 value 和 input,因为这两个名字在一些原生表单元素里,有其它用处。
如果你使用过 Vue.js 1.x,一定对 .sync 不陌生。在 1.x 里,可以使用 .sync 双向绑定数据,也就是父组件或子组件都能修改这个数据,是双向响应的。在 Vue.js 2.x 里废弃了这种用法,目的是尽可能将父子组件解耦,避免子组件无意中修改了父组件的状态。
不过在 Vue.js 2.3.0 版本,又增加了 .sync 修饰符,但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定,而是一个语法糖,修改数据还是在父组件完成的,并非在子组件。
仍然是数字选择器的示例,这次不用 v-model,而是用 .sync,可以这样改写:
<template> <div> <button @click="increase(-1)">减 1</button> <span >{{ value }}</span> <button @click="increase(1)">加 1</button> </div> </template> <script> export default { name: 'InputNumber', props: { value: { type: Number } }, methods: { increase (val) { this.$emit('update:value', this.value + val); } } } </script>
用例:
<template> <InputNumber :value.sync="value" /> </template> <script> import InputNumber from '../components/input-number/input-number.vue'; export default { components: { InputNumber }, data () { return { value: 1 } } } </script>
看起来要比 v-model 的实现简单多,实现的效果是一样的。v-model 在一个组件中只能有一个,但 .sync 可以设置很多个。.sync 虽好,但也有限制,比如:
不能和表达式一起使用(如 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元素)中的内容 // console.log(vm.$el.innerHTML); vm.$data //实例下的data对象 // console.log(vm.$data); vm.$options //实例下的挂载项 // console.log(vm.$options); vm.$props //组件之间通信的数据 // 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进行追踪) // console.log(vm.$refs); vm.$watch //用于监听数据(在vue文件中使用后会自动销毁) // console.log(vm.$watch); vm.$emit //用于派发事件(常用于数据通信) // console.log(vm.$emit); vm.$on //用于监听事件的派发 // console.log(vm.$on); vm.$once //只监听事件一次(之后不监听) // console.log(vm.$once); //生命周期 beforeCreate() { } created() { } beforeMount() { } mounted() { } beforeUpdate() { } updated() { } beforeDestroy() { } destroyed() { }
以上是vue有什麼常用api的詳細內容。更多資訊請關注PHP中文網其他相關文章!