Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the knowledge points of Vue". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Official introduction

Vue (pronunciation / vju steps /, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.

Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects.

On the other hand, when used in conjunction with modern tool chains and various supporting class libraries, Vue is also fully capable of driving complex single-page applications.

two。 Progressive type

The framework is designed in layers, each layer is optional, and different layers can be flexibly connected to other solutions. When you all want to use the official implementation, you will find that it is already ready, and the layers, including supporting tools, can work together more easily than connecting to other solutions.

Put it in one by one and do as much as you put.

3. MV* mode (MVC/MVP/MVVM)

"MVC": after the model view controller user captures the View operation, View will transfer the processing rights to Controller (Pass calls); Controller will preprocess the data from View and decide which Model interface to call; then Model executes the relevant business logic (data request); when the Model changes, it will notify View through the observer mode (Observer Pattern) After View receives the Model change message through the observer mode, it requests the latest data from Model, and then updates the interface. The business logic is separated from the presentation logic with a high degree of modularization. But because View is strongly dependent on a specific Model, View cannot be componentized and reused.

"MVP": model view presenter is the same as MVC mode, where users' operations on View are transferred from View to Presenter. Presenter executes the appropriate application logic and operates on the Model; at this time, after the Model executes the business logic, it also passes the message of its changes through the observer mode, but to the Presenter rather than to the View. After Presenter gets the message of the Model change, it updates the interface through the interface provided by View. View can be componentized without relying on Model,View. But the manual synchronization logic of Model- > View is troublesome and difficult to maintain.

"MVVM": the calling relationship of model view viewmodelMVVM is the same as MVP. However, there will be something called Binder, or Data-binding engine, in ViewModel. You only need to declare in the template syntax of View which piece of data that is displayed on View is bound to Model. When ViewModel updates the Model pair, Binder automatically updates the data to View, and when the user operates on View (such as form input), Binder automatically updates the data to Model. This approach is called Two-way data-binding, bidirectional data binding. It can be understood simply and inappropriately as a template engine, but it will render in real time based on data changes. It solves the problem of a large number of manual View and Model synchronization in MVP, and provides a two-way binding mechanism. Improve the maintainability of the code. For large-scale graphics applications, there are more view states, and the cost of building and maintaining ViewModel will be high.

two。 Vue heartbeat experience

Download it directly and introduce it with a tag, and Vue will be registered as a global variable.

Command line tool vue cli

Vue provides an official CLI to quickly build complex scaffolding for single-page applications (SPA).

Npm install-g @ vue/cli

three。 There is only one truth-the principle of data binding

Https://cn.vuejs.org/v2/guide/reactivity.html

When you pass a normal JavaScript object into a Vue instance as the data option, Vue will iterate through all the properties of the object and use Object.defineProperty to convert all of these properties to getter/setter. Object.defineProperty is a feature of ES5 that cannot be shim, which is why Vue does not support IE8 and earlier browsers.

Each component instance corresponds to a watcher instance, which records the data attributes it "touches" as dependencies during component rendering. Later, when the setter of the dependency is triggered, the watcher is notified, causing its associated component to re-render.

Note: changes in vue3

Object.defineProperty has the following disadvantages.

1. Unable to monitor the Set and Map changes of es6

2. Unable to listen to data of Class type

3. The addition or deletion of attributes cannot be monitored.

4. The addition and deletion of array elements cannot be monitored.

ES6 Proxy can perfectly solve the shortcomings of Object.defineProperty, and its only disadvantage is that it is not friendly to IE, so vue3 will automatically downgrade to Object.defineProperty data monitoring system if it is using IE (yes, IE11 does not support Proxy).

four。 Template syntax 1. Interpolation.

Text {{}}

Pure HTML v-html

Prevent XSS,CSRF (1) front-end filtering (2) background escape (

) (3) add the attribute http to cookie

Click

Expression.

Directive: is a special attribute with a v-prefix

V-bind dynamic binding properties v-if dynamically create / delete v-show dynamically show / hide v-on:click binding events v-for traverses v-model two-way binding form

Abbreviations

V-bind:src = >: srcv-on:click = > @ click

2. Class and style

(1) bind HTML Class

Object syntax

Array syntax

(2) bind inline style

Object syntax

Array syntax

/ / need to set font-size = > fontSize

3. Conditional rendering

(1) v-if (2) v-else v-else-if (3) template v-if, the wrapper element template will not be created (4) v-show

4. List rendering

(1) v-for (special vmurf = "n in 10")

In

Of

/ / there is no difference

(2) key:

Track the identity of each node to reuse and reorder existing elements

The ideal key value is the id that each item has and is unique. Data.id

(3) Array update detection

A. Using the following method to manipulate the array, you can detect changes in push () pop () shift () unshift () splice () sort () reverse ()

B.filter (), concat () and slice (), map (), the new array replaces the old array

C. An array that cannot detect the following changes

Vm.items [indexOfItem] = newValue

Solve

(1) Vue.set (example1.items, indexOfItem, newValue) (2) splice

(4) Application: display filter results

5. Event handling

(1) listen for events-trigger the code directly

(2) method event handler-write function name handleClick

(3) inline processor method-executes the function expression handleClick ($event) $event event object

(4) event modifier https://cn.vuejs.org/v2/guide/events.html

.stop

.prevent

.capture

.self

.once

.passive

Every time an event occurs, the browser will check to see if there is a preventDefault to block the default action of the event. We add * * passive to tell the browser that there is no need to query, we do not use * * preventDefault to block the default action. * * this is generally used for scrolling monitoring, @ scroll,@touchmove. Because during scrolling monitoring, moving each pixel will generate an event, querying prevent with a kernel thread each time will cause sliding stutters. We skip the kernel thread query through passive, which can greatly improve the fluency of sliding.

(5) Button modifier

6. Form control binding / bi-directional data binding

V-model

(1) basic usage

Shopping cart

(2) modifier

.synchronization: lose focus once

.number: formatting a number

.trim: remove leading and trailing spaces

7. Calculation attribute

Complex logic, template difficult to maintain

(1) basic examples

(2) Compute cache VS methods

Calculated properties are cached based on their dependencies.

The calculated property is only re-evaluated when its related dependencies change.

8. Mixins

Mixins is a very flexible way to distribute reusable functionality in Vue components.

Blending objects can contain any component option.

When a component uses a blend object, all options for blending the object are mixed into the component's own options.

This is the end of the content of "what are the knowledge points of Vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.