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

This article is to share with you what is commonly used in Vue mode. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Deal with loading statu

In large applications, we may need to divide the application into smaller blocks and load components from the server only when needed. To make this easier, Vue allows you to define your component as a factory function that parses your component definition asynchronously. Vue triggers the factory function only when the rendering component is needed, and caches the results for re-rendering in the future. The new feature in version 2.3 is that the asynchronous component factory can also return an object in the following format.

Const AsyncComponent = () = > ({/ / the component to be loaded (should be Promise) component: import ('. / MyComponent.vue'), / / the component to be used when the asynchronous component is loading: LoadingComponent, / / the component to be used when loading fails, error: ErrorComponent, / / shows the delay before loading the component. Default value: 200ms. Delay: 200, / / if a timeout is provided and exceeded, the error component is displayed. Default value: infinite. Timeout: 3000})

In this way, you have options such as additional load and error status, delay in component acquisition, and timeout.

two。 Cheap "v-once" static components

Rendering pure HTML elements in Vue is very fast, but sometimes you may have a component that contains a lot of static content. In this case, you can make sure that it is evaluated only once by adding a v-once instruction to the root element, and then cache it, like this.

Vue.component ('terms-of-service', {template: `Terms of Service... A lot of static content. `}) 3. Recursive component

Components can call themselves recursively in their own templates, but they can only be called through the name option.

Recursive components can also cause infinite loops if you are not careful:

Name: 'stack-overflow', template:''

Components like the above can cause errors that exceed the maximum stack size, so make sure that recursive calls are conditional that is (using v-if will eventually be false)

4. Inline template

When the special property inline-template exists on a subcomponent, the component uses its internal content as its template rather than as distributed content, which allows for more flexible template writing.

These are compiled as the component's own template.

Not parent's transclusion content.

5. Dynamic instruction parameter

Instruction parameters can be dynamic. For example, in v-mydirective: [argument] = "value", argument can be updated based on the data properties in the component instance! This allows our custom instructions to be used flexibly throughout the application.

This is an instruction in which dynamic parameters can be updated based on the component instance:

Scroll down inside this section ↓ I am pinned onto the page at 200px to the left.

Vue.directive ('pin', {bind: function (el, binding, vnode) {el.style.position =' fixed' var s = (binding.arg = = 'left'? 'left':' top') el.style [s] = binding.value + 'px'}}) new Vue ({el:' # dynamicexample', data: function () {return {direction: 'left'}) 6. Event and key modifier

For the .passive, .capture, and .once event modifiers, Vue provides prefixes that can be used with on:

For example:

On: {'! click': this.doThisInCapturingMode,'~ keyup': this.doThisOnce,'~! mouseover': this.doThisOnceInCapturingMode}

For all other events and key modifiers, you don't need a proprietary prefix because you can use event methods in your handlers.

7. Dependency injection (Provide/Inject)

There are several ways for two components to communicate in Vue, each with its own advantages and disadvantages. A new approach introduced in version 2.2 is to use Provide/Inject 's dependency injection.

This pair of options are used together to allow an ancestor component to act as a dependency injector for all its descendants, no matter how deep the component hierarchy is, as long as they are on the same parent chain. If you are familiar with React, this is very similar to React's context.

/ / parent component providing 'foo' var Provider = {provide: {foo:' bar'}, / /...} / / child component injecting 'foo' var Child = {inject: [' foo'], created () {console.log (this.foo) / / = > "bar"} / /.} Thank you for reading! This is the end of this article on "what are the commonly used Vue modes?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.