VUEJS+ES6 Development mobile App real-combat project notes

I. What is the MVVM framework

mv* includes MVC, MVP, MVVM

The MVVM framework is composed of model, View, ViewModel.

Model refers to the data, which corresponds to the JavaScript object at the front end.

View refers to views, which correspond to the DOM in the front

ViewModel observes the changes of model and view to do the update, and realizes the bidirectional binding of the data.

The front-end MVVM framework mainly includes: AngularJS, Reactjs, Vuejs

Second, the core idea of Vuejs (data-driven, modular)

Data-driven: data bidirectional binding

Component: Any part of the page can be used as a component, the page is just a container of components, one component corresponding to a Vue file, for example: A page is divided into menus, content, the bottom, you can use the menu as a component.

Third, VUE-CLI

Help to write good Vuejs code tools to help us do the directory structure, local debugging, code deployment, unloading, unit testing and other work

Installation:

Global installation: NPM install-g VUE-CLI

New project (use Webpack template here): Vue init webpack <project name>

Then:

CD <project name> Enter the project

NPM Install dependency code base

NPM Run Dev Start service

Iv. Basic usage of Vue-router (2.x version)

Document: http://router.vuejs.org/zh-cn/The most detailed usage also requires more reading of the document

Installation:

Adding Vue-router values to dependencies on Package.json files

Executes the NPM install command, which installs all modules according to the NPM module listed in Package.json

Use:

For example, the page Common tab switch, by clicking, in a region to switch the corresponding components

Toggle button: Router-link component as a link to a single-page routing component, it renders as a link, the To property specifies the link address

Toggle Zone: Router-view component, route matching component rendered in this area

Import the required components

VUEJS+ES6 Development mobile App real-combat project notes