1、 Why use it?
Previously, jQuery was basically used. JQuery is based on DOM operation. MVVM development mode also liberates the front end from the original DOM operation. We no longer need to spend a lot of time on maintaining the unification of view and data. We just need to focus on the change of data, and the code becomes easier to maintain.
Components: high reusability, easy maintenance, easy testing, high cohesion, low coupling.
2、 What is MVVM?
Data binding: changes in view are automatically reflected in ViewModel, and vice versa.
Data hijacking: vue.js Data hijacking combined with publisher subscriber mode is adopted Object.defineProperty () to hijack the setters and getters of each attribute, release messages to subscribers when the data changes, and trigger the corresponding listening callback.
Vue is a progressive framework 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 only focuses on visual layers, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects.
It is not recommended to build projects directly with Vue cli, especially if there is no node / webpack foundation.
npm install -g cnpm –registry=registry.npm.taobao.org
$ npm install –global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm run dev
Documentation (the author is Chinese) + examples on the official website + self practice (jsfiddle recommended)
Main understanding: responsive mechanism + components
Software component is defined as self-contained, programmable, reusable and language independent software unit.
The data option of a component must be a function
There are two ways to define component names:
a. Using kebab case
When using kebab case to define a component, you must also use kebab case when referring to the custom element, for example.
b. Using pascalcase
When using Pascal case to define a component, you can use both naming methods when referring to the custom element.
Passing data in subcomponents: props
The child component triggers an event to the parent component
The built-in $emit method passes in the name of the event to trigger an event to the parent component and pass a parameter
7、 Large scale
Routing Vue router
State management vuex
Record all the state changes in the store, and share them later
Server side rendering SSR
Mainly used for SEO
Coding: during the development process, you can see the bug report
This work adoptsCC agreementReprint must indicate the author and the link of this article