Vue3.0----Basic Introduction (Chapter 1)

 1. Introduction to vue

1. what is vue

The official concept: Vue (pronounced /vjuː/, similar to view) is a set of front-end frameworks for building user interfaces.

1.1 Interpretation of core keywords: building user interface

The main job of front-end developers is to build beautiful, comfortable, and easy-to-use web pages for website users (also known as: website users).

1.2 Traditional ways of building user interfaces

In traditional web front-end development, the user interface is built based on jQuery + template engine.

1.3 Use vue to build user interface

Using vue to build the user interface solves many pain points of jQuery + template engine, and greatly improves the efficiency and experience of front-end development.

1.4 Interpretation of core keywords: framework

The official positioning of vue is the front-end framework, because it provides a complete set of solutions for building user interfaces (commonly known as vue family bucket):

• vue (core library)
• vue-router (routing scheme)
• vuex (state management solution)
• Vue component library (a solution to quickly build page UI effects)

 And a series of tools to assist the development of vue projects:

• vue-cli (npm global package: one-click generation of engineered vue projects - based on webpack, large and complete)
• vite (npm global package: one-click generation of engineered vue projects - small and exquisite)
• vue-devtools (browser plugin: a tool for debugging)
• vetur (vscode plugin: provides syntax highlighting and smart hints)

1.5 Summary: what is vue

Vue is a set of front-end frameworks for building user interfaces.

2. Features of vue

The characteristics of the vue framework are mainly reflected in the following two aspects:

①Data-driven view

② Two-way data binding

2.1 Data Driven View

In a page using vue, vue will listen to data changes and automatically re-render the structure of the page. The schematic diagram is as follows:

Benefit: When the page data changes, the page will automatically re-render!

Note: Data Driven Views are one-way data binding.

2.2 Two-way data binding

When filling out the form, two-way data binding can assist developers to automatically synchronize the content filled by the user to the data source without manipulating the DOM

middle. The schematic diagram is as follows:

Benefits: Developers no longer need to manually manipulate DOM elements to get the latest value of form elements!

2.3 MVVM

MVVM is the core principle of Vue's implementation of data-driven views and two-way data binding. It splits each HTML page into the following three parts:

In the MVVM concept:

View represents the DOM structure rendered by the current page.

Model represents the data source on which the current page is rendered.

ViewModel represents an instance of vue, which is the core of MVVM.

2.4 How MVVM works

As the core of MVVM, ViewModel connects the data source (Model) of the current page with the structure (View) of the page.

When the data source changes, it will be monitored by the ViewModel, and the VM will automatically update the structure of the page according to the latest data source

When the value of the form element changes, it will also be monitored by the VM, and the VM will automatically synchronize the latest value after the change to the Model data source

3. Vue version

Currently, there are 3 major versions of vue, among which:

The 2.x version of Vue is currently the mainstream version in the development of enterprise-level projects

The 3.x version of vue was released on 2020-09-19, the ecology is not yet perfect, and it has not yet been popularized and promoted in enterprise-level project development

The 1.x version of vue is almost eliminated, and it is no longer recommended to learn and use

Summarize:

The 3.x version of Vue is the trend of future enterprise-level project development;

The 2.x version of vue will be phased out in the future (within 1 to 2 years);

3.1 Comparison between vue3.x and vue2.x versions

Most APIs and features in vue2.x are also supported in vue3.x. At the same time, vue3.x also added 3.x-specific functions, and

Deprecated some old features from 2.x:

Added features such as:

Composite API, multi-root node components, better TypeScript support, etc.

The obsolete old functions are as follows:

Filters, $on, $off and $once instance methods are no longer supported, etc.

For detailed change information, please refer to the migration guide given in the official document:

https://v3.vuejs.org/guide/migration/introduction.html

Second, the basic use of vue

1. Basic steps

①Import the script script file of vue.js

② Declare a DOM area to be controlled by vue in the page

③ Create a vm instance object (vue instance object)

 2. Correspondence between basic code and MVVM

3. Vue debugging tool

1. Install the vue-devtools debugging tool

The vue-devtools debugging tool officially provided by vue can facilitate developers to debug and develop vue projects.

Install vue-devtools online in Chrome browser

Vue 2.x debugging tool:

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue 3.x debugging tools:

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Note: The browser debugging tools of vue2 and vue3 cannot be cross-used!

2. Configure vue-devtools in Chrome browser

Click the button in the upper right corner of the Chrome browser , select More Tools -> Extensions -> Vue.js devtools details, and check the following

of two options:

Note: After modifying the configuration items, you must restart the browser to take effect!

3. Use vue-devtools to debug vue pages

Visit a page using vue in the browser, open the browser's developer tools, switch to the Vue panel, and you can use vue-devtools

Debug the current page.

4. Vue instructions and filters

1. The concept of instructions

Instructions (Directives) are the template syntax provided by Vue for developers to assist developers in rendering the basic structure of the page.

The instructions in vue can be divided into the following 6 categories according to different purposes:

1. Content rendering instructions
2. attribute binding directive
3. Event Binding Directive
4. two-way binding instructions
5. Conditional Rendering Directives
6. List rendering instructions

Note: Instructions are the most basic, most commonly used, and simplest knowledge points in Vue development.

1.1 Content Rendering Instructions

Content rendering instructions are used to assist developers in rendering the text content of DOM elements. Commonly used content rendering instructions are as follows:

• v-text
• { { }}
• v-html

v-text

Usage example:

Note: The v-text directive overrides the default value within the element.

{ { }} syntax

The { { }} syntax provided by vue is specially used to solve the problem that v-text will overwrite the default text content. The professional name for this { { }} syntax is the interpolation expression

formula (English name: Mustache).

Note: Interpolation expressions are more commonly used in development than v-text directives! Because it doesn't override the default text content in the element.

v-html

The v-text directive and interpolation expressions can only render plain text content. If you want to render a string containing HTML tags as an HTML element on the page,

You need to use the v-html command:

The final rendered result is:

1.2 Attribute Binding Instructions

If you need to dynamically bind the attribute value for the attribute of the element, you need to use the v-bind attribute binding instruction. An example usage is as follows:

Shorthand form of the property binding directive

Since the v-bind command is used very frequently in development, Vue officially provides a short form for it (abbreviated in English : ).

Using Javascript expressions

In the template rendering syntax provided by vue, in addition to supporting simple data value binding, it also supports the operation of Javascript expressions, for example:

1.3 Event Binding Instructions

Vue provides v-on event binding instructions to assist programmers in binding event listeners for DOM elements. The syntax format is as follows:

Note: Native DOM objects have native events such as onclick, oninput, onkeyup, etc. After replacing them with the event binding form of vue,

They are: v-on:click, v-on:input, v-on:keyup

1.3 Event Binding Instructions

Event handlers bound by v-on need to be declared in the methods node:

Shorthand form for event binding

Since the v-on instruction is used very frequently in development, Vue officially provides a short form for it (abbreviated as @ in English ).

Event object event

In the native DOM event binding, the event object event can be received at the formal parameter of the event processing function. Similarly, in the v-on directive (short

In the event processing function bound by @ ), the event object event can also be received. The sample code is as follows:

Bind events and pass parameters

When using the v-on command to bind an event, you can use ( ) to pass parameters. The sample code is as follows:

$event

$event is a special variable provided by vue, which is used to represent the native event parameter object event. $event can resolve the event parameter object event

Covered issues. Example usage is as follows:

event modifier

Calling preventDefault() or stopPropagation() in event handlers is a very common requirement. Therefore, vue provides events

The concept of modifiers is used to assist programmers to control the triggering of events more conveniently. The five commonly used event modifiers are as follows:

key modifier

When listening to keyboard events, we often need to judge detailed keystrokes. At this point, key modifiers can be added to keyboard-related events, for example:

  

1.4 Two-way binding instructions

Vue provides v-model two-way data binding instructions to help developers quickly obtain form data without manipulating the DOM.

Modifiers for the v-model directive

In order to facilitate the processing of user input, vue provides 3 modifiers for the v-model directive, namely:

1.5 Conditional rendering instructions

Conditional rendering instructions are used to assist developers to control the display and hiding of DOM as needed. There are two conditional rendering instructions as follows:

• v-if
• v-show

The difference between v-if and v-show

The implementation principle is different:

• The v-if directive dynamically creates or removes DOM elements, thereby controlling the display and hiding of elements on the page;
• The v-show command will dynamically add or remove the style="display: none;" style for the element, thereby controlling the display and hiding of the element;

The performance cost is different:

v-if has higher switching overhead, while v-show has higher initial rendering overhead.

• If you need to switch very frequently, it is better to use v-show
• If the condition rarely changes at runtime, it is better to use v-if

v-else

v-if can be used alone, or with the v-else directive:

v-else-if

The v-else-if directive, as its name suggests, acts as the "else-if block" of v-if and can be used consecutively:

1.6 List rendering instructions

Vue provides the v-for command to assist developers in looping and rendering similar UI structures based on an array.

The v-for directive requires a special syntax for item in items, where:

• items is the array to be looped
• item is the current loop item

index in v-for

The v-for directive also supports an optional second argument, the index of the current item. The syntax format is (item,index) in items, and the sample code is as follows:

Note: The item and index in the v-for directive are both formal parameters, which can be renamed as needed. For example (user, i) in userlist

Use key to maintain the state of the list

When the data of the list changes, by default, vue will reuse the existing DOM elements as much as possible, thereby improving the performance of rendering. but this

The default performance optimization strategy will cause the stateful list to not be updated correctly.

In order to give vue a hint so that it can track the identity of each node, it can improve rendering while ensuring that the stateful list is updated correctly.

dyeing performance. At this point, you need to provide a unique key attribute for each item:

Precautions for keys

①The value of key can only be a string or a number

②The value of the key must be unique (ie: the value of the key cannot be repeated)

③ It is recommended to use the value of the id attribute of the data item as the value of the key (because the value of the id attribute is unique)

④ It does not make sense to use the value of index as the value of key (because the value of index is not unique)

⑤ It is recommended to specify the value of the key when using the v-for command (both to improve performance and prevent list state disorder)

2. Filter

Filters are often used for formatting text. For example:

hello -> Hello

The filter should be added at the end of the JavaScript expression and invoked by the "pipe character". The sample code is as follows:

 

Filters can be used in two places: interpolation expressions and v-bind property bindings.

        

2.1 Define filter

During the creation of a vue instance, filters can be defined in the filters node, the sample code is as follows:

2. Filter

Filters (Filters) is a function provided by vue for developers, which is often used for formatting text. Filters can be used in two places: Interpolation expressions

Bind with the v-bind attribute.

The filter should be added at the end of the JavaScript expression and invoked by the "pipe character". The sample code is as follows:

2.2 Private filters and global filters

The filter defined under the filters node is called "private filter" because it can only be used in the el area controlled by the current vm instance.

If you want to share filters between multiple vue instances, you can define global filters in the following format:

2.3 Continuously calling multiple filters

Filters can be called in series, for example:

The sample code is as follows:

2.4 Filter parameter passing

The essence of a filter is a JavaScript function, so it can receive parameters in the following format:

The sample code is as follows:

2.5 Compatibility of filters

Filters are only supported in vue 2.x and 1.x, and filter-related functions are removed in vue 3.x.

In enterprise project development:

• If you are using the 2.x version of vue, you can still use filter-related functions
• If the project has been upgraded to version 3.x of vue, the official suggestion is to use computed properties or methods instead of the excluded filter function

For specific migration guidelines, please refer to the instructions given in the official documentation of vue 3.x:

https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

video:

Dark horse programmer Vue full set of video tutorials, from vue2.0 to vue3.0 a set of full coverage, front-end learning core framework tutorial_哔哩哔哩_bilibili

This article is a self-summary of my learning video, please forgive me if there is any infringement. Infringement must be deleted.