1. What is vue.js?

Vue. Js is one of the mainstream frameworks for the front-end. Along with Angular.js and React.js, it has become one of the top three front-end frameworks.

Vue.js is a set of user interface building framework, only focus on the view layer, easy to use, easy to integrate with third-party libraries.

Vue.js can help reduce unnecessary DOM manipulation, improve rendering efficiency, provide two-way data binding, and enable the front end to focus more on business logic

2. The difference between frameworks and libraries

Framework: a complete set of solutions; It is highly intrusive to the project. If the framework of the project is changed, the whole project needs to be rebuilt

Libraries (plug-ins) : provide a small function, less intrusive to the project, if a library can not meet the requirements, can be easily replaced by other libraries.

3. The difference between MVC in Node (back end) and MVVM in front end

MVC is a back-end layered development concept (M: Model layer, CRUD for processing data; V: View layer; C: Business logic layer);

MVVM is the concept of the front view and focuses on view layer separation; (M: data V: view VM: is the core of MVVM. VM is the scheduler of M and V, and divides M and V. When V layer wants to operate data, VM is required to do intermediate processing.)

The idea of using MVVM in the front page is mainly for development convenience because of MVVM’s bidirectional data binding (bidirectional data binding is provided by the VM)

4. V-cloak, V-text, V-html

V-cloak: Solve interpolation flicker problem

V-text: Compared with interpolation form, V-text has no flicker problem; V-text overwrites the original content of an element, and interpolation replaces its own placeholders rather than emptying the entire element

V-html: Elements are parsed as HTML tags and output

5. v-bind

“V-bind :” – “:” property binding

Valid expressions can be written in V-bind:.

6. v-on

V-on event binding

V-on is at sign

7. Event modifiers

.stop prevents bubbling

// When a button is clicked, the input click event is triggered first, then the div click event is triggered. To prevent the event from bubbling, <div class = "inner" @click= "divClick"> <input type = "button" @click.stop = "btnClick"></input> </div>Copy the code

. Prevent Prevents default events

<a href="http://www.baidu.com" @click.prevent =" linkClick"> </a>Copy the code

.capture Uses event capture mode when adding event listeners

// If you click on a button, you will trigger the input click and then the div click (from inside out). <div class = "inner" @click.capture= "divClick"> <input type = "button" @click = "btnClick"></input>  </div>Copy the code

.self fires the callback only if the event fires on the element itself (such as when it is not a child element)

// Only clicking on the div itself triggers the click event, <input type = "button" @click = "btnClick"></input> </div>Copy the code

The. Once event is triggered only once

<a href="http://www.baidu.com" @click.prevent. Once =" linkClick">Copy the code

Difference between.stop and.self

<div @click =" twoClick> <div @click =" twoClick> <input type ="button" @click.stop = "BtnClick "> </input> </div> </div> <div @click =" oneClick"> <div @click.self =" twoClick> <input type ="button" @click =" btnClick"> </input> </div> </div>Copy the code
7. V-model two-way data binding

V-bind can only implement one-way data binding, automatically binding from M to V, but not bidirectional data binding

V-model instruction, which can achieve bidirectional binding between form elements and data in model; Note: V-models can only be used with input(radio,text, address,email…) form elements. ,select ,checkbox textarea

8. Styles in Vue

An array of 1.

: < h1 class = "[' className1 ', 'className2]" > < / h1 > little fat manCopy the code

2. Use ternary expressions in arrays

<h1 :class = "['className1','className2', isactive? Active :']"> </h1>Copy the code

3. Nested objects in arrays

: < h1 class = "[' className1 ', 'className2' {" active" : isactive}] "> < / h1 > little fat manCopy the code

4. Use cash directly

// When v-bind is used for class, the attribute of the object is the class name. Since the attributes of the object can be quoted, but not quoted, There is no written < h1: class = "{className1: true, className2: true, className3: isactive}" > < / h1 > little fat manCopy the code
9. Use inline styles

1. Write the style object directly on the element with the form :style

< h1: style = "{color: 'red', 'the font - size:' 40 px '}" > this is a h1 < / h1 >Copy the code

2. Define the style object in data and reference it directly to :style

// Define the style on data: Data :{styleObj:{color:'red','font-size':'40px','font-weight':'200'}} // In the form of attribute binding, the style object is applied to the element:  <h1 :style= "styleObj"></h1>Copy the code

3. Reference multiple style objects on data in :style via data

// Define the style on data: Data :{styleObj:{color:'red','font size':'40px','font weight':'200'} styleObj2:{fontStyle:'italic'}} // In the element, <h1 :style= "[styleObj,styleObj2]"> </h1>Copy the code
10. v-for

Iterative array

Data: {list: [1, 2, 3, 4, 5]} < p v - for = "(item, I) in the list > value: {{item}} index: {{I}} < / p >Copy the code

Iterating over array objects

Data: {list: [{id: 1, name: '11'}, {id: 2, name: '22'}]} < p v - for = "(item, I) in the list > value: {{item. Id}} {{item. The name}} index: {{I}} < / p >Copy the code

Iterative object

Data :{list:[id:] data:{list:[id:] 2, name: '22', gender: 'female']} - for = "< p v (val, key, I) in the list > value: {{val}} {{key}} index: {{I}} < / p >Copy the code

The iteration number

<p v-for= "count in 10> </p>Copy the code

Note: in version 2.2.0+, key is required when v-for is used in components. When vue.js is updating a rendered element list with V-for, it defaults to a “reuse in place” policy. If the order of data items is changed, instead of moving DOM elements to match the order of data items, VUE simply reuses each element here and ensures that it displays every element that has been rendered under a specific index.

To give VUE a hint that it can track the identity of each node to reuse and reorder existing elements, you need to provide a unique key attribute for each item

11. V – if and v – show

The v-if feature is that the element is re-deleted or re-created each time. The V-show feature does not re-delete or re-create the DOM each time, but switches the display:noe style of the element

V-if has a high performance cost of switching. If an element involves frequent switching, it is not recommended to use v-show

V-show has a high initial rendering cost and is recommended if the element may never be displayed for the user to see