Preface: I also learned vUE recently, write of bad trouble everybody big guy to give a little more opinion.

1. The introduction of vue

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications. (From Vue official website)

One of the core concepts in Vue is to get the user out of the DOM element, freeing up the user’s hands and allowing programmers to focus more time on business logic.

2. Vue installation method

CDN installation

NPM install

3. MVVM concept

Understanding of MVVM in front-end development:

    1. m-model

Data layer The data layer in Vue is placed inside data

    1. V – view

The View in Vue is our HTML page

  • 3. Vm – (View-model) Controller establishes the connection between data and view layer. Vm, the instance of Vue, is VM

4.Vue basic grammar

  • The life cycle

    The whole process of something from birth to death

** 5.Vue instruction **

(1) Attribute instruction bind V-bind

V-bind is used to bind basic elements, causing collateral effects when expression values changeCopy the code

(2) Event binding listens on V-ON

DOM events can be listened for using the 'V-on' directive, which stands for v-on:click.Copy the code

(3) Two-way binding V-model of data

Create a two-way data binding on a form element that listens for users and updates as soon as possibleCopy the code

(4) Iterate the number group V-for

Many times of the original data to render elements or template is fast The original link: https://blog.csdn.net/xukongjing1/article/details/81584890Copy the code

(5) V-if and V-show

Pictures fromwww.cnblogs.com/dengyao-blo…

(6) Improve performance V-once

Render elements and components only once. In subsequent re-rendering, the element/component and all its child nodes are treated as static and skipped. This can be used to optimize update performance.Copy the code

(7) Instructions V-text and V-html

V-text displays the value as a normal string, and V-HTML parses the value as HTMLCopy the code