Vue (voice / vju ː /, similar to view) is a set of progressive framework for building user interface.

>Features: easy to use, flexible, efficient, progressive framework.

>Modules that need to be used can be combined at will Vue + components + Vue router + vuex + Vue cli

I. concept and characteristics of Vue

1. What is a library and what is a framework?

• A library is a product that integrates code into a product. We can call methods in the library to achieve our own functions.
• The framework is a product developed to solve a class of problems. We write code at a designated location and use the framework to help us call.

The most essential difference between framework and library is control: you call libs, frameworks call you.

>Vue belongs to the framework

MVC Model & MVVM model

In the traditional mvc, the logic except model and view is placed in the controller, which makes the controller logic complex and difficult to maintain. In the mvvm, view and model have no direct relationship, and all interact through viewModel.

>Vue is MVVM mode

3. Declarative and imperative

• Writing your own for loop is imperative (command it to get results in its own way)
• Declarative is to use the array method forEach (what we want is to loop and help us to do it internally)

Basic use of Vue

1.mustache syntax

Allows developers to declaratively bind DOM to the data of the underlying Vue instance. Before using the data, you need to declare:

• Write a ternary expression
• Get return value
• JavaScript expression

<div id="app">
    {{ 1+1 }}
    {{ msg == 'hello'?'yes':'no' }}
    {{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
})
</script>

2. Responsive data change

In Vue, use Object.defineProperty to redefine the properties in the object. If it is an array, you need to override the methods on the array prototype.

function notify() {
    console.log('View updating')
}
let data = {
    name: 'youxuan',
    age: 18,
    arr: [1,2,3]
}
// How to rewrite an array
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
    proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // Look at each item in the array
    for (let i = 0; i < obj.length; i++) {
        observer(obj[i]);
    }
}
function observer(obj) {
    if(typeof obj !== 'object'){
        return obj
    }
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{
        for (let key in obj) {
            defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {
    observer(value); // Cycle value again
    Object.defineProperty(obj, key, { // Array not supported
        get() {
            return value;
        },
        set(val) {
            notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

Defects

• Array cannot be changed by length, index
• Cannot add attribute to object
• You need to force the addition / deletion of responsive data through the vm.$set and vm.$delete methods

3. Methods on Vue instances

• vm.$el;
• vm.$data;
• vm.$options;
• vm.$nextTick();
• vm.$mount();
• vm.$watch();
• vm.$set();

III. instructions in Vue

In vue, directives are special features with v-prefix. The main function is to operate DOM.

1.v-once

<div v-once>{{state.count}} </div>

2.v-html

Never use v-html on user input, which may lead to xss attacks

<div v-html="text"></div>

3.v-bind

Dynamic binding attributes need to be bound with v-bind

<img v-bind:src="src" src="">

>You can use: to abbreviate v-bind

4.v-for

<template v-for="(fruit,index) in fruits">
    <li :key="`item_${index}`">{{fruit}}</li>
    <li :key="`fruit_${index}`">{{fruit}}</li>
</template>

>When there are multiple element loops, the template label needs to be added to the outer layer, and the key needs to be added to the real element, and the key cannot be repeated. Try not to use the index as the key value.

For example, key value:

5.v-if/v-else/v-show

v-if can switch whether DOM element exists, and internal instructions will not be executed when v-if is false.
v-show can control the display and hiding of elements, mainly the element style.

6.v-on

• Binding of events v-on binding events
• Event modifier (. Stop. Prevent). Capture. Self. Once. Passive

7.v-model

Bidirectional data binding

<input type="text" :value="value" @input="input">
<input type="text" v-model="value">

IV. interview questions

• Let's talk about the understanding of MVVM
• The principle of data bidirectional binding implemented by Vue
• What are the commonly used instructions of Vue
• The principle of v-model
• The difference between v-if and v-show
• The function of key value in Vue

>Welcome to pay attention to the excellent articles of [front-end optimization], and wait for you to see! > webyouxuan