"Introduction to Vue" | A stepping stone, knock on you and me!

Hello everyone, I am a side dish.
A man who hopes to become about architecture ! If you also want to be the person I want to be, otherwise click on your attention and be a companion, so that Xiaocai is no longer alone!

This article mainly introduces the introduction of Vue

If necessary, you can refer to

If it helps, don’t forget to 161355a11434cd ❥

The WeChat public account has been opened, , students who are not following please remember to pay attention!

In the previous article, we have introduced the basic use of webpack , which is equivalent to paving the way Vue Those who haven't seen it, remember to jump to check the missing parts~!

Back-end vision to learn Webpack, both civil and military?

Vue Cognition

What is Vue , which is a set of building user interfaces progressive frame. In a simple introduction, we need to focus on understanding the two words build a user interface and progressive framework. Its characteristics are reflected in two aspects

• Data Driven View

In pages that use vue, vue will automatically monitor the changes in the data, so as to render the structure of the page by itself. In vue, there is no need to manually manipulate the DOM node. It will bind the DOM and data through some special HTML syntax. Once the binding is created, the DOM will be synchronized with the data. Whenever the data is changed, the DOM will be corresponding Update

• Two-way data binding

The data driver mentioned above is one-way binding , but vue also supports the two-way binding. When the data of the page structure occurs, it can automatically convert the page information DOM Synchronize to vue data.

MVVM model

The core principles of the two vue features mentioned above are MVVM

• M: M odel, indicating the data source that is dependent on the current page rendering
• V: V iew, representing the DOM structure rendered by the current page
• VM: V iew M odel, representing an instance of vue, that is, MVVM core

Through the above figure, we explain the working principle MVVM viewModel MVVM , which is equivalent to a connected bridge, and the two ends are connected to the Model (data source) and View (page structure). Among them, View is the structure that can be seen on the browser, Model usually refers to the data obtained through Api calls.

• When the data source changes, it will be by 161355a114372a ViewModel , and the structure of the page will be automatically updated according to the latest data source
• When the value of a page element changes, it will also be by 161355a114375b ViewModel , and the latest value after the change will be synchronized to Model data source

This is a very simple Vue , but it already contains the three-part structure View - ViewModel - Model

Basic use

Ⅰ. Instructions

Let us first understand what the command is. The instruction is vue provides developers with the template syntax to assist developers in rendering the basic structure of the page

vue can be divided into 6 categories according to different purposes, as follows:

1) Content rendering instructions

The content rendering instruction is used to render the text content in the DOM element .

1、v-text

Two h1 tags, one with a default value, one without a default value, we both use the v-text instruction, see the result

v-text , 061355a1143880 took effect as we wished, but there is something wrong. The second h1 has its own default value, but v-text command, and this has become the v-text ~!

v-text command overrides the default value in the element

{{ }}

This is vue , which is specifically used to solve the v-text overriding the default text content value of 061355a11438b9. The professional name of {{ }} interpolation expression see how to use it:

We can use the simple syntax {{ value key }} to get the value of the data source without interfering with the original value in the label, so the interpolation expression will be more commonly used in our daily development. At the same time, it also supports the simple Java Script syntax used in the instruction:

But if a value in the data source is not a value in the conventional sense, but a fragment of html , can the rendering be successfully recognized {{}}

Unfortunately, the interpolation expression did not help us render the html fragment. What should we do at this time? You need to use the instructions we are going to talk about next~!

v-html

At first glance, the instruction knows that it is related to html , because the v-text and interpolation expressions can only help us render plain text content. If you want to HTML tag as a page HTML element, you need to use this v-html instruction

2) Attribute binding instructions

v-bind

If we need to dynamically bind the value for the attribute element, we need to use the v-bind attribute binding instruction

Since v-bind is used very frequently in daily development, the vue also provides the abbreviated form ( : English notation)

Also in v-bind also supports simple JS grammar

3) Event binding instructions

vue also provides the v-on event binding instruction, which is used to DOM stage. The simple syntax is as follows

We the Data defines the data source, in Methods defines the method by v-on to bind event instruction. The overall structure is clear and clear. Of course, onclick events, we can also use oninput, onkeyup and other native events

Also, because the v-on instruction is used very frequently in development, the vue also provides the abbreviated form ( @ )

e in the above method function. I don’t know if the careful friends have noticed it~

In the native DOM event can be received at the formal parameter of the event processing function. Similarly, in v-on instruction, we can also obtain it in the above way To event parameter object event

At this time, it's okay if the calling function has no formal parameters, but how do we solve it when there are formal parameters? Let's try it first

It can be found that this method does not work, our event parameter object is overwritten! I can say that this VUE a special variable provides us $event , the variable used to represent event parameter object native Event . $event can solve the problem that the event parameter object event is covered.

It can be seen that this special variable has solved the problems we encountered above!

(I) Event modifier

In the DOM event, there is a classic problem, that is, the event bubbling, what is the event bubbling?

It is also very simple for us to solve this problem. You can use the event object mentioned above to prevent bubbling behavior:

The event bubbling problem can be solved by function stopPropagation() Vue provides a more elegant solution~

This method is called event modifier vue , which is used to control the triggering of events more conveniently. Below we list 5 common event modifiers:

Event modifier	illustrate
.prevent	Prevent default behaviors (such as: a tag jump, form submission, etc.)
.stop	Prevent events from bubbling up
.capture	Trigger the current event handler in capture mode
.once	The bound event is triggered only once
.self	The event handler is only triggered when event.target is the current element itself

The usage is through @click.name

(Ii) Key modifier

When we listen to keyboard events, we often need to determine detailed keystrokes to correspond to different key actions. Of course VUE also is related keyboard events add key modifier , such as listening Enter key :( other keys needed to replace enter name to)

4) Two-way binding instructions

We already know v-bind / v-text / v-html / {{ }} and other instructions, but these are way binding instructions , page elements can get data from the data source, but can not obtain data from a data source page elements. Therefore, we here comes the VUE provided v-model way binding instructions ~!

two-way binding instruction is that can quickly obtain form data without operating DOM elements

We can the INPUT input Change box username value, corresponding, on page {{ username }} value will change ~!

When we use two-way binding processing, in order to reduce some unnecessary redundant operations, such as trim, number conversion..., vue has also provided us with corresponding processing modifiers:

Modifier	illustrate
.number	Automatically convert the user's input value into a numeric type
.trim	Automatically filter the ending blank characters entered by the user
.lazy	Update when "change" instead of "input"

5) Conditional rendering instructions

conditional rendering command is used to control the display and hiding of the DOM node

• v-if
• v-show

The above two instructions are conditional rendering instructions, and they are used as follows:

When the conditions are met, both will be displayed normally. When the conditions are not met, let's see what is the difference between the two:

We can see through F12 console page elements, found a missing page elements v-if modified span elements, so we conclude that:

realization principle level

• v-if command will dynamically create or remove DOM elements, thereby controlling the display or hiding of elements on the page
• v-show command dynamically adds or removes the style='display: none;' style for the element, thereby controlling the display or hiding of the element on the page

performance consumption level

V-IF higher switching overhead , and V-Show higher initial rendering overhead

1. If frequent switching is required, use v-show
2. If conditions rarely change during runtime, use v-if

There are v-if tags, naturally there are v-else-if and v-else tags~

6) List rendering instructions

We are all bound in front of single-value elements, when we encounter an array of elements you have to use the VUE provided v-for label. This tag is used for to recursively render a list structure based on an array. v-for instruction needs to use a special syntax item in items

• items : the array to be looped
• item: is cycled each item

In addition to the item in items syntax, it also supports the incoming index as the index -> (item, index) in items

This command is usually accompanied by a key command :key , vue uses key to maintain the state of the list, when the data of the list changes, by default, vue will reuse the existing DOM element, thereby improving the performance of rendering, but this default performance optimization strategy will cause the stateful list to fail to be updated correctly.

In order to give vue a hint, so that it can track the identity of each node, so as to ensure that the stateful list is updated correctly under the premise of improving the rendering performance. At this time, you need to provide a unique key attribute for each item!

Regarding key we need to pay attention to the following points:

• The value of key string or numeric type
• The value of key (usually ID)
• Using index as the value of the key has no meaning (the value of index is not unique)
• It is recommended to use the v-for command, the user must specify the value of the key

Ⅱ. Filter

Above we have finished talking about vue , and then continue to talk about the filters in vue

Filters ( Filters ) are commonly used in text formatting , and can be used in interpolation expression {{ }} and v-bind , and they are used as follows:

We use | as the pipe symbol to call the filter method. The filter method written under the node filters

This usage can be reminiscent of the pipe operator operation in Linux and the stream.map operation in Java 8

The filter we defined above is a private filter, what is private? That is, this filter can only in the el area controlled by the vm instance. If you want to share the filter vm instances, you need to define a global filter~!

And the filter also supports continuous calling of multiple

At the same time, the filter also supports passing parameters

Note : The filter is only vue 2.x and 1.x . In vue 3.x , filter-related functions are removed.

Ⅲ. Listener

What is a listener? watch listener can be used to monitor the changes in data, so as to make specific actions in response to the changes in the data! The following is a simple usage example:

We monitor data data source username , you can get username latest values, the way is also used to determine whether the parameter value is available, the user quick feedback to prompt ~! Points to note when using a listener

• All listeners should be defined under the node watch
• The listener is essentially a function. To monitor which data changes, just use the name of the corresponding data as the method name.

㈠ immediate

By default, the component will not call the watch listener after the initial loading. If you want the watch listener to be called immediately, you need to use the immediate option. In short, the role of immediate controls whether the listener is automatically triggered once!

The usage is as follows:

Among them, handler() is a fixed wording. When the monitoring value changes, the handler function will be called automatically. immediate means that when the page is rendered well, the current watch listener will be triggered immediately

At this time, you can find in the console that the listener was triggered when the value was first bound

㈡ deep

When the value we monitor becomes an object, can we still monitor the property value change of the object by using the above writing method?

Through the console, we found that, except for the first monitoring, the changes made later did not trigger the listener! At this time, we need to use our deep attribute:

By adding the deep: true annotation, we successfully monitored the changes in the object properties. If we want to use the shorthand listener, we need to follow the following writing:

Note: If you want to listen to the change of the object's sub-attribute, you must wrap a layer of single quotes

Ⅳ. Calculation properties

After reading the use of the listener, let's take , and bah~ Strike while the iron is hot to learn about the calculation properties in 161355a114440b vue 161355a114440c!
What are calculated properties? Calculating attributes means that after a series of operations, an attribute value is finally obtained. This dynamically calculated attribute value can be used by the template structure or methods . A simple example is as follows:

The calculation property itself is not complicated to use, we need to understand several characteristics of it

• Although the calculated attribute is defined as the method when it is declared, the essence of the calculated attribute is an attribute. When used, it can be used as an ordinary attribute of
• The calculated attribute will cache the result of the calculation, and the calculation will be recalculated only when the data

Ⅴ. Summary

This article briefly introduces the Vue . Of course, there is still a long way to go if Vue Vue related articles in the future!

Don't talk empty talk, don't be lazy, and be a X as an architecture with Xiaocai~ Follow me to be a companion, so Xiaocai is no longer alone. See you below!

If you work harder today, you will be able to say less begging words tomorrow!
I am Xiaocai, a man who becomes stronger with you. 💋
WeChat public account has been opened, , students who have not followed please remember to pay attention!