Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces.

Features: Easy to use, flexible, efficient, progressive framework.

Vue + Components + VUe-Router + vuex + VUE-CLI can be randomly combined

I. Concept and features of Vue

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

  • A library is codeA collection ofAs a product, we can invoke methods in the library to implement our own functionality.
  • The frame is forSolve a class of problemsFor the product we develop, we write code in the designated location, and the framework calls it for us when we use it.

The most fundamental difference between frameworks and libraries is control: You call libs, frameworks call You.

Vue belongs to the framework

2.MVC model && MVVM model

In traditional MVC, all logic except model and View is placed in controller, which makes controller logic complex and difficult to maintain. In MVVM, there is no direct relationship between View and Model, and all interactions are carried out through viewModel

Vue is MVVM mode

3. Declarative and imperative

  • Writing a for loop yourself is imperative (telling it to get the result in its own way)
  • Declarative is using the array method forEach (we want a loop, inside to do it for us)

Ii. Basic use of Vue

1. The mustache syntax

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

  • Writing a ternary expression
  • Get the 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>Copy the code

2. Responsive data change

Object. DefineProperty is used in Vue to redefine attributes in objects, or override methods on array prototypes if they are arrays

Function notify() {console.log(' update ')} let data = {name: 'youxuan', age: 18, arr: [1,2,3]} // 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, ... Function observerArray(obj) {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); DefineProperty (obj, key, {get() {return value; }, set(val) { notify(); observer(val); value = val; }}); } observer(data); data.arr.push({name:'jw'}) console.log(data.arr);Copy the code

Defects,

  • You cannot change an array by length or index
  • Cannot add new attributes to an object
  • Need to pass throughvm.$setandvm.$deleteMethod to force reactive data to be added/removed

3. Methods on Vue instances

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

Instructions in Vue

Directives in VUE are special Directives with a V-prefix, and their primary function is to manipulate the DOM

1.v-once

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

2.v-html

Never use V-HTML for user input, it can lead to XSS attacks

<div v-html="text"></div>Copy the code

3.v-bind

Dynamically bound properties need to be bound using V-bind

<img v-bind:src="src">Copy the code

You can use: to short 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>Copy the code

If multiple elements are looping, the template tag should be added to the outer layer, and the key should be added to the real element. The key should not be repeated, and the index should not be used as the key value

Here’s an example of a key value:

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

V-show can toggle whether or not a 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 controlling the element style

6.v-on

  • Event binding V-on Binding event
  • Event modifier (.stop.prevent).capture. Self. Once

7.v-model

Two-way data binding

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

4. Interview questions

  • Please explain your understanding of MVVM
  • Vue realizes the principle of data bidirectional binding
  • What are the common commands of Vue
  • V – the principle of the model
  • V-if is different from V-show
  • The function of the key value in Vue

Welcome to pay attention to [front-end optimization] wonderful article, waiting for you to see!

webyouxuan