\ Vuejs notes and \ Vuejs notes

\ Vuejs notes and \ Vuejs notes

I. MVVM framework

When the data changes, the ViewModel detects and notifies the corresponding View changes.

When a user operates a View, the ViewModel detects the View, and then the Model modifies the corresponding data to implement bidirectional binding.

Applicable scenarios: for front-end applications with complex interaction logic; provides basic architecture abstraction; ensures front-end user experience through Ajax data persistence (Benefit: When performing data operations on the front-end, you do not need to refresh the entire page.

For data persistence through Ajax, you only need to change the dom of the corresponding part, especially on mobile terminals)

Ii. Core Ideas of vue

1. Data-driven

As long as the data changes, Vuejs will encapsulate the DOM using the Directives command. When the data changes, the corresponding DOM will be notified to change.

Vuejs listens to DOM, listens to view changes through DOMListeners, and notifies the data to change. This enables bidirectional data binding.

Data principles

Now there is. b's data. When the vue Object is instantiated, it will use the es5 Object. defineproperty creates the setter and getter methods. At the same time, vuejs generates a directive object (yellow part), and each directive object is associated with a watcher. When we perform. when B is evaluated, the getter method is triggered; (green) the dependency is set to Watcher, when. when B's data changes, setter is triggered and watcher is notified,

Watcher evaluates a. B and notifies the command to call the update method of the command. The command is DOM encapsulation, so the view will be updated.

2. componentization

Component setting principles

Each Independent visible/interactive area on the page is considered as a component

Each component corresponds to a project directory, and various resources required by the component are maintained nearby (including JS and CSS)

The page is just a container of components. components can be nested and freely combined to form a complete page.

Iii. Vue-cli is a scaffold tool of Vue

Vue-cli

Address: https://github.com/vuejs/vue-cli

Install npm install-g vue-cli

Use vue init webpack my-project

Webpack

Address: https://github.com/vuejs-templates/webpack

Pay attention to the template. The structure of the project created with webpack is as follows:

Iv. Project File Introduction

Build webpack configurations

Config webpack configurations

Node_modules npm install dependent code library

Src Source Code for Storing Projects

Static storage of static Resources

. Some babelrc babel configurations, most browsers do not support ES6, so the babel is converted to ES5,

Presets default file, es2015 and stage-2, indicating the plug-in to be installed in advance

. Editorconfig editor configuration

Charset format

Indenet-style = space indent format, space is space

Indenet-size indent size

End_od_line Line Break style

Insert_final_newline when you create a file, a new line is automatically created.

Trim_trailing_whitespace automatically removes unnecessary Spaces

Eslintignore ignores the directory file for syntax check

Eslintrc. js eslint configuration file

Files ignored by the gitignore git Repository

Index.html is automatically inserted into this file during compilation.

Package. json project configuration file

Some commands run by scriptes

Dependencies project dependency

DevDependencies