1. Understand the VUE principle

A progressive framework for building user interfaces. Through the Vue directive, the separation of JS and HTML is realized. The JS code only controls the View through the Module, rather than defining the View.

Chinese official website: cn.vuejs.org/

1. Advantages of Vue.js framework:

Improve code reuse rate reduce coupling degree between modules improve development speed improve code quality Web Component development

2. VUE installation:

Install Node.js

Nodejs.org/en/ git: git-scm.com/download/wi…

2. Install Bower

NPM install bower -g NPM install bower -g

3, bower install vue<# vue >

3. VDOM Principle

1. Problems solved:

Virtual DOM is used to solve the problem of drawing pressure between DOM and Layout. Each time the DOM changes, the Layout will repaint. If this is done too often, rendering stress will occur. vue=>JSEngine=>DOM=>Layout

2. Timed rendering:

VDOM will render at any time, setTimeout will end, or whatever the engine deems appropriate.

3. Diff algorithm:

VDOM in the engine source code, is a JS object, is actually a tree structure of JSON. All nodes are mounted on the root node. When diff is performed, the key must be unique. You can use id+data as the key. If there is no key, compare by type. If the node type is different, just remove it, record it, and redraw it next time. In the child node, compare the newly added and deleted nodes, record them as diff, and redraw the node with diff next time.

The interview topic 1:

Write a response refresh by manipulating the DOM with JS code

function changeDirectly(){
    var app = document.getElementById('app');
	var html = '';

	var htmlTmp = document.getElementById('tmp').innerHTML;

	html = htmlTmp.replace(/%word%/g, 'abc');
	console.log(html);

	app.innerHTML = html;
}
addEventListener('click', changeDirectly);
Copy the code

The essence is to directly look up the specified label in the DOM, and then replace it globally.

4, the response principle

The official website article says very thoroughly. Cn.vuejs.org/v2/guide/re…

Here’s a summary of my understanding

Var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var var (VUE does not support IE8 below because it does not support ES5)

Each vUE component instance has a watcher instance. Watcher records the properties of JS data touched during the component rendering process as dependencies. When the setters of dependencies are triggered, watcher is notified and then rerenders the associated component.

The picture to quoteCn.vuejs.org/images/data…

3. It involves the modification of property properties of data objects in VUE. In order to achieve the response of the modified property, the modification must be made from the hierarchy of the prototype chain. Specific methods, refer to the article in detail.

4. In addition, in the process of asynchronous DOM update, if the same watcher is fired multiple times during the same event loop, it will only be pushed to the queue once. In the next tick, only the last update will be executed, which simplifies unnecessary DOM refresh.

5, each tick, the actual principle is similar to setTimeOut, will be executed at the next refresh. You can custom call vue.nexttick (callback) to perform the next refresh.

Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: }}, methods: {updateMessage: Function () {this.message = 'updated' console.log(this.$el.textContent) // => 'not updated' this.$nextTick(function () { The console. The log (enclosing $el. TextContent) / / = > 'updated'}}}})Copy the code

Two, from MV* model to understand the principle of response

1. MVC mode:

The DOM Controller calls Module to render the View M — >C — >V

2. MVP mode

Presenter: Update Module, modify View M<==>P<==>V

3. MVVM mode

MVVM mode is the advanced MVP mode, which vue uses, and the first two are the transition versions. ViewModel: Automatically calls Presenter Module updates, and the View automatically follows the updates

Vue MVVM implementation: When Vue instance is created, bidirectional binding is formed. The key technical point is DOM Listener, Data Bindings M<=>VM<=>V View layer, DOM Listener to listen to DOM changes, Module layer, Get ()/set() is used to update View or DOM. It is used to update View or DOM.

VUE syntax: instructions, events, filters, computed properties, listeners

1. Instruction:

V-if: conditional instruction
V-else: Conditional instruction, used in conjunction with v-if
V-show: The render command shows or hides elements
V-for: list instruction
V-model: bidirectional binding between a control and a Module
V-model. lazy is changed only when onblur is entered
V-model. number can only input data
V-model. trim removes front and rear Spaces
Input: Bidirectional binding with module
V-bind: used to control the value of an element attribute. Abbreviated as: (v-bind = 🙂
- v-bind:src=”expression”
- v-bind:class=”expression”
- v-bind:style=”expression”

2. Events:

V-on :< event name >.stop.prevent.13 or.enter. Left or.right or.middle. Once. CTRL or.shift or.alt

3. Filter

{{message | filter}} for formatting the output

4. Calculate attributes:

Think of functions as properties

5. Listener:

Use Computed instead of Watch

Four, components,

Reuse code using components.

1. Component life cycle:

Four stages: the Create/Mount/Update/Destroy

Each stage has two states before and after:

BeforeCreate /created

BeforeMount/Mounted (MOUNT DOM)

BeforeUpdate /updated

BeforeDestroy/Destroy

2. Component communication

1. Father-son communication

A parent component passes a string or variable to a child component: the string is passed through as the child component property props

Vue.component('child', { template: ` <div> <p :id="p1">{{str}}</p> </div> `, props: ['p1', 'str'], methods: { }, mounted: function(){ console.log(this.p1, this.str); }}); Vue.component('parent', { template: '<div> <child :p1="prtP1" : STR ="prtStr"></child> // pass variable // <child :p1="11111111" : STR ="222222222"></child> // pass string </div> `, data: function(){ return { prtP1: 'p456', prtStr: 'abc' } } });Copy the code

2. The child component passes data to the parent component

Create event response functions in the parent component
In the parent component template, the event is bound, and the event calls the event response function
In the child component, the event is fired

// subcomponent Vue.component('child', {template: '<div> <input type="button" @click="sendData" value=" click me to send information "> </div>', methods: {sendData: function(){ this.$emit('myEvent', 'Hello World! I am Vue! '); }}}); // Vue.component('parent',{template: Child @ myEvent ` < div > < = "getData" > < / child > < hr / > < h4 > now MSG: {{MSG}} < / h4 > < / div > `, the methods: {getData: Function (MSG){console.log(' received message from subcomponent: '+ MSG); this.msg = msg; } }, data: function(){ return { msg: '' }; }});Copy the code

3, parent component access child data: this.$ref

// child component Vue.component('child', {template: '<div></div> ', data: function(){return {childStr: 'I am your son! '}; }, mounted: function(){console.log(' mount: '+ this.parent-parentstr); }}); // Vue.component('parent', {template: <div> <child ref="mySon"></child> <input type="button" value=" @click="getData"> </div> ', data: function(){ return { parentStr: 'I am your father! }}, methods: {getData: function(){console.log(' get subcomponent information: '+ this.$refs.myson.childstr); }}});Copy the code

$parent: this.$parent: this.$parent: this

Vue.component('parent', { template: ` <div> <ul v-show="isSwitchOn"> <li v-for="item in array">{{item}}</li> </ul> <child ref="mySon" ></child> </div> `, data: function(){ return { isSwitchOn: true, array: [5, 10, 25, 50] }; }}); // subcomponent Vue.component('child', {template: '<div> <input type="button" value=" @click="showOrNot" /> </div> `, methods: { showOrNot: function(){ this.$parent.isSwitchOn = ! this.$parent.isSwitchOn; }, addItem: function(){ this.$parent.array.push(25); }}});Copy the code

5. Communication between sibling components

Need to pass the public Vue instance object
The receiver binds the event and the sender fires the event

Var bridge = new Vue(); var bridge = new Vue(); // 2. Create Vue.component('child-1',{template: '<div> <h4>'); {{msg}}</h4> <input type="button" value="1->2" @click="sendData" /> </div> `, data: function(){ return { msg: '' } }, methods: { sendData: function(){ bridge.$emit('OneToTwoEvent', 'Hello 2, I am 1'); } }, mounted: function(){ var that = this; $on('TwoToOneEvent', function(MSG){console.log(' received from 2: '+ MSG); that.msg = msg; }}})); Vue.component('child-2',{ template: ` <div> <h4>msg: {{msg}}</h4> <input type="button" value="2->1" @click="sendData" /> </div> `, data: function(){ return { msg: '' } }, methods: { sendData: function(){ bridge.$emit('TwoToOneEvent', 'Hello 1, I am 2'); }}, mounted: function(){// 1. When child-1 raises the event, the engine calls the return function, and this in the initialization callback refers to //. Note: this does not only want child-2 objects, so this. With closures. var that = this; Bridge.$on('OneToTwoEvent', function(MSG){console.log(' received: from 1 '+ MSG); that.msg = msg; }}}));Copy the code

Five, routing,

Routing is the mapping between the URL and the page or view returned. Each URL corresponds to one page or view.

Six, vuex

State management like Flux. The problem solved is that when the original vue data is shared among multiple instances, if it is modified, it will cause multiple instances to change, and it cannot be traced back to who made the modification. This tends to create confusion and insecurity.

Vuex can be as simple as recording each modification to vUE original data
Advanced understanding: Referring to the Flux idea, wrap data around state to form a Store. If the View needs to be modified, you can send an action to the Dispatcher, and then the Dispatcher will notify the Store. After modification, the View will be updated.

For a deeper understanding juejin.cn/post/695247…

Seven, scaffolding: Vue CLI

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

VUE learning points

1. Understand the VUE principle

1. Advantages of Vue.js framework:

2. VUE installation:

3. VDOM Principle

1. Problems solved:

2. Timed rendering:

3. Diff algorithm:

4, the response principle

Two, from MV* model to understand the principle of response

1. MVC mode:

2. MVP mode

3. MVVM mode

VUE syntax: instructions, events, filters, computed properties, listeners

1. Instruction:

2. Events:

3. Filter

4. Calculate attributes:

5. Listener:

Four, components,

1. Component life cycle:

2. Component communication

1. Father-son communication

2. The child component passes data to the parent component

3, parent component access child data: this.$ref

$parent: this.$parent: this.$parent: this

5. Communication between sibling components

Five, routing,

Six, vuex

Seven, scaffolding: Vue CLI

VUE learning points

1. Understand the VUE principle

1. Advantages of Vue.js framework:

2. VUE installation:

3. VDOM Principle

1. Problems solved:

2. Timed rendering:

3. Diff algorithm:

4, the response principle

Two, from MV* model to understand the principle of response

1. MVC mode:

2. MVP mode

3. MVVM mode

VUE syntax: instructions, events, filters, computed properties, listeners

1. Instruction:

2. Events:

3. Filter

4. Calculate attributes:

5. Listener:

Four, components,

1. Component life cycle:

2. Component communication

1. Father-son communication

2. The child component passes data to the parent component

3, parent component access child data: this.$ref

$parent: this.$parent: this.$parent: this

5. Communication between sibling components

Five, routing,

Six, vuex

Seven, scaffolding: Vue CLI

Related Posts

WebGL- Clever use of template buffers for area highlighting

HTTP Caching

How do you prevent multiple repeated requests from overwriting the data that comes to mind from axios how to cancel the request