Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the commonly used api in vue", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn the article "what is commonly used api in vue".

The api of vue are: 1, nextTick;2, mixin;3, "$forceUpdate"; 4, set and delete;5, filter;6, directive;7, "$root"; 8, "$el"; 9, "$data"; 10, "$props" and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

NextTick

Function: add a delayed callback after the end of the next Dom update cycle. After modifying the data, you can get the updated Dom.

Usage:

Vue.nextTick ([callback, context]) vm.$nextTick ([callback]) / / usage 2 Promise / use as a Promise (added since 2.1.0) Vue.nextTick () .then (function () {/ / DOM updated})

Description:

Callback: delay callback function

Context: optional object

Added from ps:2.1.0: if no callback is provided and in an environment that supports Promise, a Promise is returned. Please note that Vue doesn't come with Promise's polyfill, so if your target browser doesn't support Promise natively (IE: why are you all looking at me), you have to provide your own polyfill.

Extension: with regard to the execution mechanism and usage scenarios of nextTick, we must also master similar requestAnimationFrame () and process.nextTick (), the former is the monitoring that comes with the browser (executed before the next redraw), and the latter is the node environment, which is executed at the point in time of the next event polling.

Mixin

Function: register a mix that affects every Vue instance created after registration. Plug-in authors can use blending to inject custom behavior into components.

Usage:

/ / inject a processor for the custom option 'myOption'. Vue.mixin ({created: function () {var myOption = this.$options.myOption if (myOption) {console.log (myOption)}) new Vue ({myOption: 'hellograms'}) / / = > "hello!"

Description:

Object: an attribute or method of a vm

Ps: use global blending with caution, as it affects each separately created Vue instance (including third-party components). In most cases, it should only be applied to custom options, as in the example above. It is recommended to release it as a plug-in to avoid mixing with repeated applications.

$forceUpdate

Function: forces the Vue instance to re-render.

Usage:

Vm.$forceUpdate ()

Note: note that it only affects the instance itself and the sub-components inserted into the slot contents, not all the sub-components.

Set 、 delete

Function: set and delete the properties of responsive data, and trigger view update at the same time.

Usage:

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

Description:

Target: target object

Key: name of the attribute to add

Value: attribute value to add

Ps: mainly use scenarios to avoid the restriction that Vue cannot detect the deletion of property

Filter

Function: for some common text formatting and some canonical data mapping.

Usage:

{{message | capitalize}} / / Register filters: {capitalize: function (value) {if (! value) return''value = value.toString () return value.charAt (0). ToUpperCase () + value.slice (1)} / / globally register Vue.filter (' capitalize') Function (value) {if (! value) return''value = value.toString () return value.charAt (0). ToUpperCase () + value.slice (1)}) new Vue ({/ /...})

Description:

The filter function always takes the value of the expression (the result of the previous chain of operations) as the first parameter.

The filter should be added at the end of the JavaScript expression, indicated by the "pipe" symbol.

Ps: a filter can accept multiple parameters, such as {{message | filterA ('arg1', arg2)}}, where filterA is defined as a filter function that receives three parameters. Where the value of message is the first parameter, the normal string 'arg1' is the second parameter, and the value of the expression arg2 is the third parameter.

Directive

Function: used to register custom instructions.

Usage:

/ / register a global custom directive `v-focus`Vue.directive ('focus', {/ / when the bound element is inserted into the DOM. Inserted: function (el) {/ / focus element el.focus ()}) / / registers a local instruction, and the component also accepts an option for directives directives: {focus: {/ / definition of instruction inserted: function (el) {el.focus ()}

Description:

Inserted is just one of the interpolation functions of the registration instruction, and the complete registration properties can also include:

Bind: called only once, when the instruction is first bound to an element, where you can make an one-time initialization setting.

Inserted: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

Update: called when the VNode of the component in which it is located is updated, but may occur before its child VNode update. The value of the directive may or may not have changed, but unnecessary template updates can be ignored by comparing the values before and after the update.

ComponentUpdated: called after the VNode and its child VNode of the component to which the instruction belongs are all updated.

Unbind: called only once, when the instruction is unbound from the element.

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

V-model is often used for two-way data binding on form elements, such as. In addition to native elements, it can also be used in custom components.

V-model is a grammatical sugar that can be broken down into props: value and events: input. That is, the component must provide a prop named value and a custom event named input. If these two conditions are met, consumers can use v-model on the custom component. For example, the following example implements a number selector:

Minus 1 {currentValue}} plus 1 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);}

Props generally cannot be modified within the component, it is modified through the parent, so the implementation of v-model generally has an internal data of currentValue. The initial value is obtained from value, and when the value is modified, it is monitored and updated in time through watch; the component does not modify the value of value, but modifies currentValue. At the same time, the modified value is sent to the parent component through a custom event input. After the parent component receives it, the parent component modifies the value. Therefore, the above number selector component can be used in the following two ways:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}

Or:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}}, methods: {handleChange (val) {this.value = val;}

If you don't want to use the names value and input, starting with version 2.2.0 of Vue.js, there is an option for model to specify their names, so the number selector component can also write:

Minus 1 {{currentValue}} plus 1 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);}

In the model option, you can specify the names of prop and event, rather than value and input, because these two names have other uses in some native form elements.

.sync modifier

If you have ever used Vue.js 1.x, you are no stranger to .sync. In 1.x, you can use .sync to bind data bidirectionally, that is, either the parent component or the child component can modify the data, which is bidirectional. This usage was abandoned in Vue.js 2.x in order to decouple the parent and child components as much as possible so that the child components do not inadvertently modify the state of the parent component.

However, in Vue.js 2.3.0, the .sync modifier has been added, but its usage is not exactly the same as 1.x. 2.x .sync is not a real two-way binding, but a syntactic sugar, and the modification of data is done in the parent component, not in the child component.

It is still an example of a number selector, this time using .sync instead of v-model, which can be rewritten like this:

Minus 1 {{value}} plus 1 export default {name: 'InputNumber', props: {value: {type: Number}}, methods: {increase (val) {this.$emit (' update:value', this.value + val);}

Use case:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}

It looks much simpler than the implementation of v-model, and the effect is the same. V-model can only have one in a component, but .sync can set many. .sync is good, but it also has limitations, such as:

Cannot be used with expressions (such as "doc.title +'!'" Is invalid)

Cannot be used on literal objects (for example, "{title: doc.title}" does not work properly).

Other simple commonly used attributes and methods / / console.log (vm.$root); vm.$root / instance object vm.$el / / root element (real DOM element) / / console.log (vm.$el); vm.$ el [XSS _ clean] / / get the content in the root element (real DOM element) / / console.log (vm.$ el [XSS _ clean]); data object / console.log (vm.$data) under vm.$data / / instance Add-on / / console.log (vm.$options) under vm.$options / / instance; data / / console.log (vm.$props) communicated between vm.$props / / components; vm.$parent / / in components, parent element / / console.log (vm.$parent); vm.$children / / in components, child elements / / console.log (vm.$children) Vm.$attrs / / to get all the properties passed by the parent component / / console.log (vm.$attrs); vm.$listeners / / to get all the methods passed by the parent component / / console.log (vm.$listeners); slots / / console.log (vm.$slots) in the vm.$slots / / component; vm.$scopedSlots / / to access the scope slot / / console.log (vm.$scopedSlots) Vm.$refs / / for locating DOM elements (tracking using ref) / / console.log (vm.$refs); vm.$watch / / for listening data (automatically destroyed when used in vue files) / / console.log (vm.$watch); vm.$emit / / for dispatching events (commonly used for data communications) / / console.log (vm.$emit); vm.$on / / for dispatching / / console.log (vm.$on) for listening events Vm.$once / / listen for events only once (not later) / / console.log (vm.$once); / / Lifecycle beforeCreate () {} created () {} beforeMount () {} mounted () {} beforeUpdate () {} updated () {} beforeDestroy () {} destroyed () {} above are all the contents of the article "what are the common api of vue"? thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.