Knowledge:

Vue.js introduces directive modifiers that compute property listener filter lifecycle component routes

Introduction to vue.js

Vue is a set of progressive frameworks for building user interfaces. With a focus on the view layer at its core, VUE is not only easy to learn, but also easy to integrate with third-party libraries or existing projects

Second, the instruction

(1) Instructions

It’s essentially a custom property where all the instructions in VUE start with v-

(2) Built-in instructions

1, v – cloak

Prevent flicker during page loading

2, v – text

The V-text instruction is used to fill a label with data. It works with interpolation, but does not flash

If there is an HTML tag in the data, the HTML tag is output

Note: this is one-way binding, the value of the data object changes, the interpolation will change; However, changes to the plug-in do not affect the value of the data object

3, v – HTML

The usage is similar to v-text, but it can fill HTML fragments into tags

There may be security issues, and V-HTML is generally only used for trusted content, never for user-submitted content

The difference between v-text and V-text is that the output of V-text is plain text. The browser will not parse it in HTML, but V-HTML will parse it as AN HTML tag and then output it

4, v – pre

Displaying the raw information skips compilation

Skip the compilation of this element and its children

Some static content does not need to be compiled with this command to speed up rendering

5, v – once

Perform a one-time interpolation [interpolated content does not continue to update when data changes]

6, v – model

V-model is an instruction that is restricted to use in components

Two-way data binding:

When the data changes, the view changes

When the view changes, the view changes synchronously

7, v – on

Used to bind events

1. v-on: @click;

8, v – bind

The V-bind directive is used to update the HTML attribute in response to the v-bind :href.

9, condition judgment V-if

Usage scenarios

Multiple elements Switch between two views by showing or hiding an element or multiple elements by conditional judgment

V-show is different from V-if

V-show is essentially the tag display set to None, which controls hiding

V-show only compiles once, which is basically controlling CSS, whereas V-if is constantly destroying and creating, so v-show performs better.

V-if dynamically adds or removes DOM elements to the DOM tree.

The V-IF switch has a partial compile/unload process in which listeners and subcomponents of internal events are destroyed and created as appropriate

10, cyclic structure V-for

The values used in the loop array can be objects or ordinary elements

The key role

Key to give each node a unique identity

The key’s main purpose is to update the virtual DOM efficiently

(3) Custom designation

introduce

The built-in instructions do not meet our special needs. Vue allows us to customize the instructions

Vue. directive registers global directives

Vue. directive Registers global directives with parameters

Local instructions

Local directives, which need to be defined in the directives option, are used the same as global directives

Local directives can only be used within the current component

When a global instruction has the same name as a local instruction, a local instruction prevails

3. Modifiers

1. Event modifiers

It’s a very common requirement to call ‘event.preventdefault’ or ‘event.stoPropagation ()’ in the event handler

Vue does not recommend manipulating the DOM to solve this problem. Vue.js provides event modifiers for ‘V-on’

– modifiers are indicated by an instruction suffix beginning with a dot

2. Key modifier

We often need to check for detailed keystrokes when listening for keyboard events. Vue allows you to add keyboard modifiers for ‘V-on’ when listening for keyboard events

3. Customize key modifier aliases

You can customize key aliases in VUE with ‘config-keycodes’

4. Form modifiers

Note: When entering a non-numeric string, the property value is updated to the same string in real time because vue cannot convert the string to a numeric value, and will be treated as a string even if a number is entered

2..trim Automatically filters the first and last whitespace entered by users, but not the middle whitespace

Lazy switches the input event to a change event

The. Lazy modifier delays the synchronization of an attribute value by converting the synchronization logic originally bound to the input event to the change event



Note: this only works when you lose focus or press enter

4. Calculate attributes

Too much logic in computed templates can make templates too heavy and difficult to maintain, and using computed attributes can make templates more concise

Computed properties are cached based on their reactive dependencies

Computed compares well with processing multiple variables or objects and returning a single result value, that is, a change in one of the variables in a tree. This value that we’re monitoring is going to change

5. Listeners

watch

Use Watch to respond to changes in data

It is used for asynchronous or expensive operations

Properties in watch must be objects that already exist in data

When it is necessary to monitor the change of an object, the ordinary watch method cannot monitor the change of the internal properties of the object. Only the data in data can monitor the change. In this case, the deep property is needed to monitor the object deeply

Vi. Filter

Vue.js allows custom filters that can be used for some common text formatting

Usage scenario: Filters can be used in two places: double curly braces and v-bind expressions Filters should be added to the end of javascript expressions, with pipe characters indicating support for cascading operations

Note:

The filter does not change the real ‘data’, but only the rendered result and returns the filtered version

Global registers are filters without S, while local filters are filters with S

Life cycle

Introduction: Transaction from birth to death process, vUE instance from creation to destruction process, these processes will be accompanied by some self-call functions, we call these functions as hook functions mainly divided into four steps: 1. Instance creation 2. Template rendering 3. Data update 4

Life cycle function:

Eight, components,

1. Introduction

Components are one of the most powerful features of vue.js. They extend HTML elements and encapsulate reusable generations

2. Component registration

Global registration

Vue.com poment (” Component name “, {}), the first argument is the label name, the second argument is an option object

Once the global component is registered, any VUE instance can be implemented

Usage:

Matters needing attention:

The component parameter data value must be a function that returns an object

The component template must be a single root element

The content of a component template can be a template string

Local registration

Can only be used in the vUE instance where it is currently registered

3. Transfer values between VUE components

Parent component passes value to child component

The form sent by the parent component is bound to the child component as a property

The subcomponent receives the hump form in props with the properties props. Templates that require a dash string do not have this property

Child components pass values to parent components

The child component fires the event with ‘$emit ()’

The first parameter of ‘$emit ()’ is the custom event name and the second parameter is the data to be passed

The parent component uses V-ON to listen for events of the child component

Brother to brother

Brothers need to use the event center to transfer data between them

Var hub = new Vue()

Emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit emit Mounted (){emit the hub.on() method name and emit the emitted hub.on() method name

The destruction event could not pass data after it was destroyed by the hub.$off() method name

Component slot

introduce

The biggest characteristic of component is reusability, and good slot can greatly improve the reusable capability of component

Anonymous slot

A named slot

A slot with a name

Bind elements using the name attribute in



”

Scope slot

Parent component to child component processing

You can either reuse the slots of child components or, so to speak, inconsistencies in the slot content

Nine, routing,

1, concept,

The essence of routing is that there is a correspondence between, for example, the URL that we put in the URL that we’re going to visit, and the browser is going to request the resource that corresponds to that URL and then there is a correspondence between the URL and the actual resource, which is routing

Routes are classified into front-end routes and back-end routes

Back-end routing is implemented by the server and completes the distribution of resources. The performance of back-end routing is lower than that of front-end routing, so we will learn front-end routing next

Front-end routing is a front-end routing that changes in real time depending on the hash value (anchor chain) : different page contents are displayed according to different events, that is, the corresponding relationship between events and event handlers. Front-end routing mainly listens for events and distributes event handlers to execute them

2, the vue – the router

Introduction to the

It is a route manager officially provided by vue.js, and it is a front-end router with more powerful functions. It is recommended to use vue-Router and vue.js, which are very suitable for convenient implementation of SPA (single page application) application development

Importing vUE Routers depends on vUE. Therefore, you need to import vUE routers first

Vue – the characteristics of the router

H5 historical mode or Hash mode Nested routines Supported routing parameters Supported programmatic routing Named routing Supported navigation guard Supported excessive animation of routes Supported lazy loading supported scrolling of routes

How to use the Vue Router

1. Import the JS file

<script src="Lib/vue_2. 5.22. Js." "></script>
<script src="Lib/vue - router_3. 0.2 js." "></script>
Copy the code

The to attribute is rendered as an href attribute by default. The value of the to attribute is rendered as a hash address starting with #

<router-link to="/user">User</router-link>
Copy the code

3, Add route fill bit (route placeholder)

<router-view></router-view>
Copy the code

4. Define routing components:

var User = { template:"<div>This is User</div>" }
Copy the code

5. Configure routing rules and create routing instances.

var myRouter = new VueRouter({
    //routes is an array of routing rules
    routes: [// Each routing rule is an object containing at least two attributes, path and Component
        // Path indicates the hash address matched by the route. Component indicates the component object corresponding to the routing rule to be displayed
        {path:"/user".component:User},
        {path:"/login".component:Login}
    ]
})
Copy the code

Mount the route to the Vue instance.

var myRouter = new VueRouter({
    //routes is an array of routing rules
    routes: [
        // Set path to/to indicate the initial page address /. Redirect indicates the new address to be redirected
        { path:"/".redirect:"/user"},
        { path: "/user".component: User },
        { path: "/login".component: Login }
    ]
})
Copy the code

classification

Embedded routines by

The most critical code for nested routines is to understand the concept of sub-routing:

Let’s say we have a /login route

You can also add sub-routes under /login, for example:

/login/account

/login/phone

Dynamic routing

Supplement:

1. We can use props to receive parameters



2. Alternatively, we can set props to object and pass the object data directly to

Component for use



3. If you want to get the value of the passed parameter as well as the object data being passed, props should be set to

In functional form.

After routing

Alias the route

Programmatic navigation

Call js methods to implement navigation

this.$router.push("Hash address");
Copy the code

this.$router.push("/login");
Copy the code

this.$router.push({ name:'user' , params: {id:123}});Copy the code

this.$router.push({ path:"/login" });
Copy the code

this.$router.push({ path:"/login".query: {username:"jack"}});Copy the code

this.$router.go( n );//n is a number, see history.go
Copy the code

this.$router.go( -1 );
Copy the code

At this point. End of vUE basics Next: 10 minutes to learn how to use Vuex and its core features

The code is not easy. Give it a thumbs up and go