Vue: Detailed explanation of progressive JS framework

Vue: Progressive JS Framework

Introduction

• VueIt is an excellent front-end framework and a progressive framework for building user interfaces.
• You also need to install the tool through the terminal , success!
• In the future, we will srcwrite code in the file. The other files are configuration files. srcThe contents are:
  • assets;Storing static resources::Static resources: public CSS files, including image files used in the project, etc.::
  • components: Components in vue , ++vue is component-based development ++
    • App.vue: The component of the main entrance can be understood as the root component , and all components start from here.
    • main.js: Main entry file

Template syntax

text

• The most common form of data binding is text interpolation using Mustache syntax
  • Mustache: beard
  • Text interpolation: Dynamically display text in conjunction with the page ::Text dynamization::
  • html: <p>{ {message}}</p>, script sets variablesmessage
• Mustache supports JS expressions . You don’t have to use only variables. You can use any operators or methods. But statements are not supported! and only supports one expression at a time

Raw HTML

• Double curly braces will interpret the data as normal text rather than HTML code.
• In order to output real HTML , you need to use v-htmldirectives::Everything starting with v- is directive::
• ++This is like the difference between innerText and innerHTML: the former can only accept ordinary text information. If "" occurs, the former will be displayed in the form of text, but the latter will recognize and display the hyperlink form ++
• v-htmlUsage is similar to attributes<div v-html="文本"><div>

Attributes

• Mustache syntax cannot be used in HTML attributes . ++Look above. Double curly braces can only wrap variables within tags and cannot be used as attributes of outer tags. ++In order to make attributes dynamic , we can use v-binddirectives
• Usage: <div v-bind:属性名="变量名"></div>, changing the value of the variable in the script can change the value of the attribute
• v-bind: can be abbreviated as:

Conditional rendering

• Conditional rendering is to render different content on the page according to different conditions.
• v-if：
  • Used to conditionally render a block of content. This content will only be rendered when the directive's expression returns a valuetrue
  • For example <p v-if="f1ag">我是孙猴子</p>, flag is a dynamically variable variable
  • v-elseUsage: <p v-else>我是b猴子</p>, also has the same effect as if-else
• v-show：
  • Another option for conditionally displaying elements
• The difference between the two:
  • v-ifIs "true" conditional rendering, because it will ensure that event listeners and subcomponents within the conditional block are destroyed and rebuilt appropriately during the switch process ++ What does that mean? That is to say, if we want to change the rendering content, v-if will directly delete the existing element and rebuild a new element. Or when we first display the initial content, another part of the elements is not rendered at all ++
  • v-ifAlso lazy: when only v-if, if the condition is false on the initial render, nothing is done - rendering of the conditional block won't begin until the condition first becomes true.
  • In comparison, v-showit is much simpler - no matter what the initial conditions are, the element will always be rendered, and it is simply switched based on CSS::display attribute, which disappears when it is none and appears when block::
  • Generally speaking, v-ifthere is a higher switching overhead , and v-showthere is a higher initial rendering overhead . Therefore, it is better to use if you need to switch very frequently ; it is better v-showto use if conditions rarely change during runtime.v-if

List rendering

v-forinstruction:

• Mapping an array into a set of elements means expanding the array and getting each element
• We can use v-forinstructions to render an array into a list. v-forThe instruction requires special syntax of the form ** item in items **, where items is the name of the source data array, and item is the alias of the array element.
  • v-forInstructions are written in the li tag
  • The style returned in the script is an array, and the array elements are usually objects. See vs for details.

maintenance status

• Vue will only render the newly added data instead of rendering it again like JS. When we add an item, we will render it, and the performance consumption is very small.
• When Vue is updating v-fora rendered list of elements, it defaults to an in-place update strategy. ++If the order of the data items (id) is changed, Vue will not move the DOM elements to match the order of the data items, but will update each element (id) in place and ensure that they are rendered correctly at each index position. ++
• Each item needs to be given a unique key attribute, ::basically an id:: so that it can keep track of the identity of each node and thus reuse and reorder existing elements.
• <div v-for:"item in items":key="item.id">In this way, you can check which nodes need to be modified, and then track and modify the nodes based on their IDs.
• v-for and key should be used together! !

event handling

Listen for events

• We can use v-ondirectives (often abbreviated as @symbols) to listen to DOM events and execute some JavaScript when the event is triggered.
• The usage is v-on:click="methodName"or use the shortcut @click="methodName". The method name can be written with some simple statements such as::message += 1::. Each time the message is clicked, the value of message will be +1.

event handling method

• What is returned is a function@click="函数名"
• Another object, methods , needs to be written in JS , and the value is an object composed of many functions. ::This method and the data previously returned to the numerical variable are system keywords and cannot be renamed::
• If you want to modify the variable:: in ::data in the function, you must thisspecify it with keywords,this.message = "不要点人家！";

Methods in inline handlers

%% Commonly known as: event passing parameters, which is the function used by the event to take parameters

Form input binding

• You can use directives to create two-way data bindingv-model on forms and elements . It automatically chooses the correct method to update the element based on the control type . ++v-moel is essentially just syntactic sugar. It is responsible for listening to user input events to update data++
• Two-way data binding: Read the input content while typing . Basically, a variable is bound to facilitate dynamic modification.

modifier

.lazy

• By default, v-modelthe value of the input box is synchronized with the data after each input event is triggered. ::That is, real-time synchronization, which consumes a lot of performance::You can add lazymodifiers to switch to synchronization after the change event
• `

.trim

• Automatically filter the first and last blank characters entered by the user . The usage is the same.

Component Basics

single file component

• (also known as .vuefile, abbreviated as SFC ) is a special file format that allows the template (HTML must exist) , logic (JS) and style (CSS) of the Vue component to be encapsulated in a single file

Load component

Component organization

%% The entire page is composed of components. The reference relationship between components will form a component organization . Usually an application will be organized in the form of a nested component tree.

Props component interaction

%% There is interaction between components::data::and they can return data to each other for display. Prop can determine the transfer of data between components and transfer data from parent components to child components.

• A common application is to App.vuepass data from the root component to the widget. If you use it import, you can just export defaultwrite props directly in it.
• There is no limit on the number of data passed , and there is no limit on the type of parameters passed.
• See vs for details

Custom event component interaction

%% props cannot transfer data in the reverse direction. We can use custom events *$emit*

• What we learned before import/exportwas component loading , which only established some connections, but requires interactive methods to transfer data , such as props/$emit
• Data passing through custom events! ! , see vs in detail

Component life cycle

• Each component must go through a series of initialization processes when it is created ++ For example, it needs to set up data monitoring, compile templates, mount the instance to the DOM and update the DOM when the data changes, etc. ++ will also run during this process. Some functions called lifecycle hooks , which give users the opportunity to add their own code at different stages

Eight life cycle functions:

The life cycle function does not require us to call it , allowing us to do specific work in different time periods.

When created: beforeCreate/created

When rendering: beforeMount/mounted

• Network requests are often placed in mounted : at this time the component is already displayed on the page, and after the data is requested, the data is rendered on the page.
• ++The webpage takes time to load when browsing quickly. Before the pictures and data are loaded, there are some gray squares. These squares are the elements that have been rendered on the page . At this time, if you request the data, the content will be Can be displayed++
• ::It is to tell the user that our page has been displayed, but we have to wait a little longer until we get the data through the network request before we can see the detailed information::

When updated: beforeUpdate/updated

When unmounting: beforeUnmount/unmounted

• Before uninstalling, remove all performance-consuming processes, such as timers.

Vue introduces third parties

%% Third party: It does not belong to Vue. It is a convenient function and business written by others that can be used in Vue.

Swiper carousel: touch sliding plug-in

• A sliding special effects plug-in created in pure JS, targeting mobile terminals such as mobile phones and tablets.
• See vs for details

Axios network requests

%% Axios is a promise-based network request library (third party)