ordinary Vue.js How to get started


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.

3、 Principle
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.

Implementation with JavaScriptgithub.com/DMQ/mvvm
demonstration:bing.2345.com/mvvm/mvvm.html (host: bing.2345.com)

4、 Introduction
brief introduction
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.

Official website

Direct reference



It is not recommended to build projects directly with Vue cli, especially if there is no node / webpack foundation.

Use Taobao image

npm install -g cnpm –registry=registry.npm.taobao.org

Global installation of Vue cli

$ npm install –global vue-cli

Create a new project based on the webpack template

$ vue init webpack my-project

Let’s go
$ cd my-project
$ npm run dev

5、 Examples
Documentation (the author is Chinese) + examples on the official website + self practice (jsfiddle recommended)
Main understanding: responsive mechanism + components

Hello World:jsfiddle.net/han8gui/nnc957z4/10/
ToDoList: jsfiddle.net/han8gui/r42pngbu/6/

6、 Components
Software component is defined as self-contained, programmable, reusable and language independent software unit.

be careful:

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.
life cycle

Data transfer
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
8、 Others
Style Guide:cn.vuejs.org/v2/style-guide/
Coding: during the development process, you can see the bug report
Examples: vuejsexamples.com/


This work adoptsCC agreementReprint must indicate the author and the link of this article