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

This article mainly introduces whether there are any instructions in vuejs, the article is very detailed, has a certain reference value, interested friends must read it!

Vuejs has instructions. Vuejs instructions start with "v -", they act on HTML elements, and instructions provide some special features. When an instruction is bound to an element, the instruction adds some special behavior to the bound target element, and the instruction can be regarded as a special HTML feature.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vuejs has instructions.

What is an instruction in Vue

Vue.js instructions start with v -, they act on HTML elements, instructions provide some special features, when the instruction is bound to the element, the instruction will add some special behavior to the bound target element, we can think of the instruction as a special HTML feature (attribute).

VueJS extends HTML with new properties called instructions.

ViueJS adds functionality to the application through built-in instructions.

VueJS allows you to customize instructions.

Characteristics of instructions

All instructions are contained within the scope of Vue instance management.

The vueJS instruction is an extended HTML attribute with the prefix v -.

The v-model instruction binds the value of the element (such as the value of the input field) to the application and stores the value.

Vuejs common instructions

Vue.js provides some commonly used built-in instructions, and next we will introduce the following:

V-if instruction

V-show instruction

V-else instruction

V-for instruction

V-bind instruction

V-on instruction

V-if instruction

V-if is a conditional rendering instruction that deletes and inserts elements according to whether the expression is true or false.

Basic syntax:

Vmurifs = "expression"

Expression is an expression that returns a Boolean value. The expression can be either a Boolean attribute or an expression that returns a Boolean value.

Men's age: {{age}} var vm = new Vue ({el:'# app', data: {age:25, isMale:true })

V-show instruction

V-show is different from v-if.

V-show will render html regardless of whether the condition is true or not, while v-if will render only if the condition is established.

First, look at two screenshots. The first is when isMale is true, and the second is that when isMale is false, you can see that the html of v-if is not rendered.

The p that uses v-show simply changes its style display: none

Male v-if male v-show var vm = new Vue ({el:'# app', data: {isMale:false}})

V-else instruction

V-else instruction is used with v-if or v-show. If the v-if condition is not valid, the v-else content will be displayed.

Var vm = new Vue for men and women ({el:'# app', data: {isMale:true}})

V-for instruction

The v-for instruction renders a list based on an array, which is similar to the traversal syntax of JavaScript

Vmurfort = "item in list"

List is an array, and item is the array element currently traversed

V item,index for = "(item,index) in list" where index is the index of the current loop, with subscript starting at 0

Serial number, name, age. Var vm = new Vue ({el:'# app' Data: {list: [{name:' Chapter 3', age:18}, {name:' Li Si' Age:23}]}})

V-bind instruction

V-bind binds one or more properties dynamically, with a parameter after its name separated by a colon, which is usually an attribute of a HTML element, such as v-bind: class

Class and v-bind:class can exist at the same time, that is to say, there is class. Adding v-bind:class will not overwrite the original style class, but add a new class name on the basis of the original.

Var vm = new Vue ({el:'# app', data: {img:' https://www.baidu.com/img/bd_logo1.png', isLogo:false HasBorder:true}})

The above v-bind:src can also be simplified as: src, modify the above code

V-on instruction

V-on is used to listen for DOM events, similar to v-bind, such as adding click events to button

Similarly, like v-bind, v-on can use abbreviations, using the @ symbol instead, to modify the code:

Let's look at an example:

The following is a code that clicks to hide and show p text paragraphs

The breeze blew gently, bringing a hint of coolness

Show hidden var vm = new Vue ({el:'# app', data: {isShow:true} Methods: {show:function (type) {if (type) {this.isShow = true } else {this.isShow = false;})

Comprehensive example

Add new user name: age: add Serial number, name, age operation Delete You can marry new Vue ({el:'# app') Data: {person: {name:'', age:'',} List: [{name:' Chapter 3', age:18}, {name:' Li Si' Age:23}]}, methods: {add:function () {this.list.push (this.person) This.person = {name:'',age:''} }, deleteItem:function (index) {/ / delete an array element this.list.splice (index,1) }, marry:function () {alert ("Sorry, you can't get married without a girlfriend") }}, created:function () {}}) these are all the contents of the article "are there any instructions in vuejs"? thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.