English
# Global configuration
| Vue global configuration | description | H5 | App | Description |
|---|---|---|---|---|
| Vue.config.silent | Cancel all logging and warning Vue details (opens new window) | √ | √ | |
| Vue.config.optionMergeStrategies | Custom options into policy details (opens new window) | √ | √ | |
| Vue.config.devtools | Configure whether to allow vue-devtools inspection. details (opens new window) | √ | x | Only supported in the web environment. |
| Vue.config.errorHandler | Uncaught error handler specified component during rendering and viewing details (opens new window) | √ | √ | |
| Vue.config.warnHandler | Vue to run when a warning given to a custom handler details (opens new window) | √ | √ | |
| Vue.config.ignoredElements | Vue must ignore the custom elements outside the Vue's details (opens new window) | √ | √ | It is strongly not recommended. It will override the built-in components of the uni-app framework configuration |
| Vue.config.keyCodes | Define custom key alias(es) for v-on. details (opens new window) | √ | x | |
| Vue.config.performance | Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. details (opens new window) | √ | x | Only supported in the web environment. |
| Vue.config.productionTip | Set this to false to prevent the production tip on Vue startup. details (opens new window) | √ | √ | - |
# Global API
| Vue Global API | description | H5 | App | Description |
|---|---|---|---|---|
| Vue.extend | Use the basic Vue constructor to create a "subclass" details (opens new window) | √ | √ | Not available as a component |
| Vue.nextTick | Defer the callback to be executed after the next DOM update cycle. details (opens new window) | √ | x | |
| View.set | Add a property to the responsive object and ensure that the new property is also responsive, and trigger a view update details (opens new window) | √ | √ | |
| Vue.delete | Delete the property of the object. If the object is responsive to ensure delete trigger update view details (opens new window) | √ | √ | |
| View.directive | Register or obtain global directive details (opens new window) | √ | √ | |
| Vue.filter | Register or obtain global filters Details (opens new window) | √ | √ | |
| Vue.component | Register or get global components. Registration will automatically use the given name of the component's id details (opens new window) | √ | √ | |
| Vue.use | Vue.js plug-in installation details (opens new window) | √ | √ | |
| Vue.mixin | A mixed global registration, all created after the impact of every registered Vue instance details (opens new window) | √ | √ | |
| Vue.version | Provides the installed version of Vue as a string. details (opens new window) | √ | √ | |
| Vue.compile | Compiles a template string into a render function. Only available in the full build.details (opens new window) | √ | x | The Vue used by the uni-app is a runtime only version |
# Options
| Vue options | description | H5 | App | Description |
|---|---|---|---|---|
| data | Vue instance of a data object details (opens new window) | √ | √ | |
| props | props can be an array or an object, for receiving data from the parent component details (opens new window) | √ | √ | |
| propsData | Pass props when creating an instance. The main role is to facilitate the testing details (opens new window) | √ | √ | |
| computed | Calculated attribute will be mixed into the Vue in Example details (opens new window) | √ | √ | |
| methods | It will be incorporated into the methods in Example Vue details (opens new window) | √ | √ | |
| watch | An object key is an expression of the need to observe the value of the callback function corresponding details (opens new window) | √ | √ | |
| el | Provide the Vue instance an existing DOM element to mount on. details (opens new window) | √ | x | |
| template | A string template to be used as the markup for the Vue instance. details (opens new window) | √ | x | The Vue used by the uni-app is a runtime only version |
| render | An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. The render function receives a createElement method as it’s first argument used to create VNodes.details (opens new window) | √ | x | |
| renderError | Provide an alternative render output when the default render function encounters an error. details (opens new window) | √ | x | |
| directives | Examples of useful instructions comprising Vue hash table Details (opens new window) | √ | √ | |
| filters | Examples of useful filter comprising Vue hash table Details (opens new window) | √ | √ | |
| components | Examples of useful components comprising Vue hash table Details (opens new window) | √ | √ | |
| parent | Parent instance of the specified instance has been created to establish a parent-child relationship between the two details (opens new window) | √ | √ | |
| mixins | Option to receive a mixed array of objects details (opens new window) | √ | √ | |
| extends | Another component allows declaring an extension details (opens new window) | √ | √ | |
| provide/inject | A dependent component allows an ancestor to all future generations injection, no matter how deep the component level, and always take effect in its upstream and downstream relationships established time details (opens new window) | √ | √ | |
| name | Allow the component template calls itself recursively details (opens new window) | √ | √ | |
| delimiters | Change the plain text interpolation delimiters.details (opens new window) | √ | x | |
| functional | Causes a component to be stateless (no data) and instanceless (no this context). details (opens new window) | √ | x | |
| model | Allows a custom component to customize prop and event details (opens new window) when using v-model | √ | √ | |
| inheritAttrs | inheritAttrs attribute default value is true, indicating that allows components of the root node contains the properties inherited $ attrs details (opens new window) | √ | √ | |
| comments | When set to true, will preserve and render HTML comments found in templates. details (opens new window) | √ | x | - |
# Lifecycle Hooks
| Lifecycle Hooks | description | H5 | App |
|---|---|---|---|
| beforeCreate | Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup. details (opens new window) | √ | √ |
| created | Called synchronously after the instance is created. details (opens new window) | √ | √ |
| beforeMount | Called right before the mounting begins: the render function is about to be called for the first time. details (opens new window) | √ | √ |
| mounted | Called after the instance has been mounted. details (opens new window) Note: it is not certain that all the sub-components are mounted here. If you need to perform operations after subcomponents are fully mounted, you can use the $nextTick H5 side. details (opens new window) | √ | √ |
| beforeUpdate | CCalled when data changes, before the DOM is patched. details (opens new window) | √ | √ |
| updated | Called after a data change causes the virtual DOM to be re-rendered and patched. details (opens new window) | √ | √ |
| activated | Called when a kept-alive component is activated. details (opens new window) | √ | √ |
| deactivated | Called when a kept-alive component is deactivated. details (opens new window) | √ | √ |
| beforeDestroy | Called right before a Vue instance is destroyed. At this stage the instance is still fully functional. details (opens new window) | √ | √ |
| destroyed | Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed. details (opens new window) | √ | √ |
| errorCaptured | Called when an error from any descendent component is captured. details (opens new window) | √ | √ |
# Instance attributes
| Vue instance properties | description | H5 | App | Description |
|---|---|---|---|---|
| vm.$data | Examples of data objects viewed Vue details (opens new window) | √ | √ | |
| vm.$props | Current props object components received details (opens new window) | √ | √ | |
| vm.$el | The root DOM element that the Vue instance is managing. details (opens new window) | √ | x | |
| vm.$options | Vue initialization options for the current instance details (opens new window) | √ | √ | |
| vm.$parent | Parent instance, if the current instance of any details (opens new window) | √ | √ | Built-in tags such as view and text are implemented as Vue components. $parent will get these to the built-in components, but it will cause this.$parent to be inconsistent with other platforms. The solution is to use this.$parent.$parent to get the built-in components or customize the root node of the component from view to div. |
| vm.$root | Vue current component tree root instance details (opens new window) | √ | √ | |
| vm.$children | The immediate children of the current instance details (opens new window) | √ | √ | Built-in tags such as view and text are implemented as Vue components. $parent will get these to the built-in components, but it will cause this.$parent to be inconsistent with other platforms. The solution is to use this.$parent.$parent to get the built-in components or customize the root node of the component from view to div. |
| vm.$slots | Slot for accessing content is distributed details (opens new window) | √ | x | |
| vm.$scopedSlots | Scope slot for accessing details (opens new window) | √ | √ | |
| vm.$refs | An object that holds the details (opens new window) of all DOM elements and component instances that have registered ref attribute | √ | √ | Non-H5 sides can only be used to get custom components, and cannot be used to get built-in component instances (such as view, text) |
| vm.$isServer | Whether the current Vue instance is running on the server. details (opens new window) | √ | √ | |
| vm.$attrs | Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. details (opens new window) | √ | √ | |
| vm.$listeners | Contains parent-scope v-on event listeners (without .native modifiers). details (opens new window) | √ | √ | - |
# Instance method
| Instance method | description | H5 | App |
|---|---|---|---|
| vm.$watch() | A change in expression or function observed in the example of calculation result Vue details (opens new window) | √ | √ |
| vm.$set() | This is the alias of the global Vue.set details (opens new window) | √ | √ |
| vm.$delete() | This is the alias of the global Vue.delete details (opens new window) | √ | √ |
| vm.$on() | Custom event listeners on the current instance details (opens new window) | √ | √ |
| vm.$once() | Listening on a custom event, but only triggered once details (opens new window) | √ | √ |
| vm.$off() | Remove custom event listeners details (opens new window) | √ | √ |
| vm.$emit() | Examples of trigger events on the current details (opens new window) | √ | √ |
| vm.$mount() | Examples of a manually mount unmounted Details (opens new window) | √ | x |
| vm.$forceUpdate() | Examples of forced re-render Vue details (opens new window) | √ | √ |
| vm.$nextTick() | After the execution delayed until next update cycle callback DOM details (opens new window) | √ | √ |
| vm.$destroy() | An example of the complete destruction of details (opens new window) | √ | √ |
# Template directive
| Vue instructions | description | H5 | App |
|---|---|---|---|
| v-text | Update the textContent details of the (opens new window) element | √ | √ |
| v-html | Update the innerHTML details of the (opens new window) element | √ | √ |
| v-show | According truth value of the expression, display CSS attribute switching elements Details (opens new window) | √ | √ |
| v-if | According truthiness value of an expression to conditionally render elements Details (opens new window) | √ | √ |
| v-else | Add "else block" details (opens new window) for v-if or v-else-if | √ | √ |
| v-else-if | Represents the "else if block" of v-if. You can be chained call details (opens new window) | √ | √ |
| v-for | Render Elements or multiple template block data based on the source details (opens new window) | √ | √ |
| v-on | Bind event listeners details (opens new window) | √ | √ |
| v-bind | Dynamically bind one or more attribute, or a component to prop expressions details (opens new window) | √ | √ |
| v-model | Create a two-way binding controls on the form or component details (opens new window) | √ | √ |
| v-pre | Skip the compilation process this element and its child elements Details (opens new window) | √ | √ |
| v-once | Only render elements and components once details (opens new window) | √ | √ |
| v-cloak | This directive will remain on the element until the associated Vue instance finishes compilation. details (opens new window) | √ | x |
# Special attributes
| Special attributes | description | H5 | App | Description |
|---|---|---|---|---|
| key | Mainly used in Vue's virtual DOM algorithm to identify the details of (opens new window) VNodes when comparing new and old nodes | √ | √ | |
| ref | ref is used to reference the element or sub-component registration information details (opens new window) | √ | √ | Non-H5 sides can only be used to get custom components, and cannot be used to get built-in component instances (such as view, text) |
| is | For dynamic components and template-based restrictions in the DOM to work details (opens new window) | √ | √ | - |
# Built-in components
| Built-in components | description | H5 | App |
|---|---|---|---|
| component | Render a "meta component" as a dynamic component. According to the value is to determine which components are rendered details (opens new window) | √ | √ |
| transition | as transition effects for single element/component. details (opens new window) | √ | x |
| transition-group | as transition effects for multiple elements/components. details (opens new window) | √ | x |
| keep-alive | When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them. details (opens new window) | √ | x |
| slot | as content distribution outlets in component templates. details (opens new window) | √ | √ |
| template | Compiles a template string into a render function. Only available in the full build.details (opens new window) | √ | √ |
# Global variable
The way to implement global variables needs to follow the development specifications of Vue single file mode.
# Common problem
# 1. How to get the data passed on the previous page
Obtained in onLoad, the parameter of onLoad is the data passed by other pages to open the current page.
# 2. How to set global data and global methods
uni-app has built-in Vuex (opens new window). For use in the app, please refer to hello-uniapp store/index.js.
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store
//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
store,...
})
...
//test.vue When using:
import {mapState,mapMutations} from 'vuex'
# 3. How to catch onError of app
Since onError is not a complete life cycle, only a method of catching errors is provided, and a callback function named onError can be added to the root component of the app. as follows:
export default {
// Only apps have an onLaunch lifecycle
onLaunch () {
// ...
},
// capture app error
onError (err) {
console.log(err)
}
}
# 4. Component property settings do not take effect
When some properties are repeatedly set to the same value, they are not synchronized to the View layer. For example, every time you set the scroll-top property of a scroll-view component to 0, it only gets back to the top the first time. This is due to the props unidirectional data flow feature. When the actual value of scroll top inside the component changes, the binding properties do not change with it.
There are two solutions (take the scroll-view component as an example):
- Monitor the scroll event, record the value of the internal change of the component, and set the current value of the record before setting the new value
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
}
- Monitor the scroll event, get the value of the internal change of the component, and update its binding value in real time
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
export default {
data() {
return {
scrollTop: 0,
}
},
methods: {
scroll: function(e) {
// If you use this method, please add debounce by yourself
this.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = 0
}
}
}
The second solution may cause jitter in some components, and the first solution is recommended .