First, to understand MVVM
MVVM is a Model-View-ViewModel acronym.
- Model representative of the data model, the data can also define and modify business logic operations in the Model.
- View behalf of UI components, which is responsible for the data model into UI unfolded.
- ViewModel change behavioral monitor and control the view of the model data, user interaction processing, and it is a synchronization Model View objects and connection Model View.
In MVVM architecture, between the View and the Model no direct link, but interact through ViewModel, the interaction between the Model and View are bidirectional, so change View data will be synchronized to the Model, the data varies Model also react immediately to the View.
View ViewModel layer and the binding layer is connected via a bidirectional data Model up, and synchronization between the View and Model entirely automatic, without human intervention, so developers need only focus on business logic, the DOM does not require manual operation, need not data synchronization problems concern the state, complex data maintained entirely by the state to unify the management MVVM
css vue operation class may be bound by binding or style.
Second, the difference between the frame and the jQuery library vue
Vue direct view operation layer, by which data objects Vue and completely separated from the View. Reference data does not need to operate the corresponding DOM nodes only need to focus logic, fully achieve decoupling of view and logical layers;
Jquery operation is based on operating DOM node, jQuery using a selector ($) to select DOM object, its assigned value, event binding and other operations, and in fact native HTML only difference is that you can more easily select DOM objects and operations, and the data interface are together. It has the advantage of a good package and compatible, easy to make the call.
Three, vue life cycle
Vue instance process from creation to destruction, is life cycle. From the beginning of creation, initialization data, compiled templates, Mount Dom → rendering, rendering update → destruction and a series of process, called Vue life cycle.
vue life cycle there are multiple events hook, make it easier for us to form good logic in the control of the entire process Vue instance. It can be divided into a total of eight stages: before creating / rear, before loading / after update before / after the destruction before / after the destruction.
The first page load will trigger beforeCreate, created, beforeMount, mounted several hook function; DOM rendering mounted in has been completed.
beforeCreate (created before) : Observations and data initialization event has not started
created (was created) : complete data observation operations, properties, and methods, initialization event, el property has not been shown.
beforeMount (Mount ago) : is invoked before the beginning of the mount, the correlation render function is called for the first time. Examples complete the following configuration: compiling templates, and the template data inside the data generated html, but not mounted to the html page.
Mounted (after loading) is called to instance after mounting, complete the following configuration examples:: html compiled using the above replaces el DOM object attribute points. Completed template to render html html page. This process is carried ajax interaction.
beforeUpdate (before update) : Before the update data calls, place in a virtual re-rendering and DOM before patching. Can further change the status of the hook, the weight will not trigger additional rendering process.
updated (updated) : Called after data change caused due to the virtual DOM rendering and re-patching. When you call, DOM component has been updated, so you can rely on to perform DOM operations. However, in most cases, you should avoid changing the state during this period, as this may result in an infinite loop update. The hook is not called during server-side rendering.
beforeDestroy (before the destruction) : Called before the instance is destroyed. Examples of still fully available.
destroyed (after destruction) : Called after instances destroyed. After the call, all event listeners will be removed, all the child instance will be destroyed. The hook is not called during server-side rendering.
Four, Vue implement the principle of two-way data binding: Object.defineProperty ()
vue achieve two-way data binding mainly: the use of data hijacking combination publisher - subscriber model the way through Object.defineProperty()to hijack setter of each property, getter, posted a message to subscribers when data changes, trigger the listener callback.
To achieve mvvm, mainly consists of two aspects, the view changes to update the data, data changes update the view.
- 1) view change update data: you can listen achieved by event
- 2) data updates change view: By
Object.defineProperty( )the properties to set up a set function, when the property changes will trigger this function, so we only need to update some of the ways on the set of functions can be achieved in view of the updated data changes. - 3) the specific process:
首先To monitor the data hijacking, so to set up a listener the Observer , to listen to all property, when property changes, to inform subscribers Watcher , see if it needs updating. Properties may be more, so there will be multiple subscribers, they need a message Dep subscriber to specifically collect these subscribers, and unified management between the listener and Observer Subscriber Watcher.
Because there may be some instructions in the node element, so it needs a command parser the Compile , scanning and parsing of each node element, initialization instructions related to a subscriber Watcher, and replace the bound template data and the corresponding function, this time when the subscriber receives the corresponding property changes Watcher will execute the function corresponding to the update to update the view.
Summary:
1. Implement a listener Observer, hijacked and used to listen to all properties, if there are changes, you notify subscribers.
2. Implement a subscriber Watcher, you can receive notification of change in the property and perform the corresponding function, thereby updating the view.
3. To achieve the Compile a parser, you can scan and parse each node associated instructions, and template according to the initialization data and the corresponding subscriber initialization.
For details, please read:
https://www.jianshu.com/p/0c0a4513d2a6
V. What vue-cli that?
Vue.jsProvide an official command-line tool that can be used to quickly build a large single-page application (in a complete application or site, only a complete HTML page that has a container can be loaded code (by way of components) inserted into the container).
The tool provides out of the box configuration tools to build, to bring modern front-end development process. Just a few minutes to create and start with hot overloaded, when you save can be used for static checking and project build configuration of the production environment.
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件等等
六、Vue组件间的参数传递
七、vuex是什么？
Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。