Summary of vue. js and summary of vue. js

Summary of vue. js and summary of vue. js

This article mainly summarizes the understanding of vue:

Reference Source: http://blog.csdn.net/generon/article/details/72482844

Vue. js is a progressive framework for building user interfaces. Its core library only focuses on the view layer. Compared with other frameworks, it is easier to use and has better performance than most frameworks.

However, there are also some shortcomings: for example, Internet Explorer 8 or earlier versions are not supported.

Vue. js has the following features:

1. Lightweight Framework

2. bidirectional data binding

3. Commands

4. Plug-ins

 

Currently, Vue has two development modes:
1. Direct page-level development and direct introduction of Vue to script
2. For Engineering Development, webpack + loader or directly use the scaffold tool Vue-cli. All the files in it are configured.

You can configure webpack, configure multiple file portals, and develop multiple pages.

 

The rendering process consists of the following steps:

The following describes three vue rendering modes:

1. Custom render Function

1234567891011121314

1.Vue.component('anchored-heading', {2.    render: function (createElement) {3.        return createElement(4.            'h' + this.level,   // Tag name5.            this.$slots.default // Arrays in child components6.        )7.    },8.    props: {9.        level: {10.            type: Number,11.            required: true12.        }13.    }14.})

　　

2. template writing

1234567

1.var vm = new Vue({2.    data: {3.        // Declare 'msg 'with a null value'4.        msg: ''5.    },6.    template: '<div>{{msg}}</div>'7.})

　　

3. el writing

123456

1.var app = new Vue({2.    el: '#app',3.    data: {4.        message: 'Hello Vue!'5.    }6.})

The three rendering modes ultimately require the Render function. However, the User-Defined Render function saves the process of program analysis, which is equivalent to the processed Render function. The normal template or el is only a string and needs to be parsed to AST, convert AST to the Render function.

Remember, either method requires the Render function.

Which call method should be used during use depends on the specific requirements.

• If it is a relatively simple logic, it is better to use template and el, because both of them are declarative rendering, which makes it easier for users to understand, but has poor flexibility, because the final generated Render function is optimized by the program through AST parsing;

• The use of the custom Render function is equivalent to the fact that a person has already translated the logic into a program and is competent for complicated logic with high flexibility. However, the user's understanding is almost the same.

Lifecycle:

BeforeCreate (before creation)

Created (after creation)

BeforeMount (before loading)

Mounted (after loading)

BeforeUpdate (Before update)

Updated (after update)

BeforeDestroy (before destruction)

Destroyed (after destruction)