Is there any instruction for vuejs?

vuejs has instructions. Vuejs instructions start with "v-". They act on HTML elements. The instructions provide some special features. When the instructions are bound to elements, the instructions will add some special behaviors to the bound target elements. You can Think of directives as special HTML features.

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

vuejs has instructions.

What are instructions in Vue

Vue.js instructions start with v-, they act on HTML elements, Directives provide some special features. When binding a directive to an element, the directive will add some special behavior to the bound target element. We can think of the directive as a special HTML attribute.

• VueJS extends HTML with new attributes called directives.

• ViueJS adds functionality to the application through built-in directives.

• VueJS allows you to customize directives.

Characteristics of directives

• All directives are included in the scope of Vue instance management .

• vueJS directives are extended HTML attributes, prefixed with v-.

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

vuejs common instructions

Vue.js provides some commonly used built-in instructions. Next we will introduce the following Several built-in commands:

• v-if command
• v-show command
• v-else command
• v-for command
• v-bind instruction
• v-on instruction

v-if instruction

v-if is a conditional rendering instruction , which deletes and inserts elements based on the true or false expression.
Basic syntax:
v-if="expression"
expression is an expression that returns a Boolean value. The expression can be a Boolean attribute. It can also be an expression that returns a Boolean.

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				age:25,
				isMale:true,
			}
		})

v-show command

The difference between v-show and v-if.
v-show will render html regardless of whether the condition is true, while v-if will render only if the condition is true.

Let’s look at two screenshots first. The first one is when isMale is true, and the second one is when isMale is true. The picture shows that when isMale is false and the condition is not met, you can see that the html of v-if is not rendered,
and p using v-show only changes its style display: none;

<div id="app">
			<div v-if="isMale">男士v-if</div>
			<div v-show="isMale">男士v-show</div>
		</div>
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:false
			}
		})

v-else directive

The v-else directive is used simultaneously with v-if or v-show, v-if condition If it is not established, the v-else content will be displayed

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-else>女士</div>
		</div>
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				isMale:true
			}
		})

v-for instruction

The v-for instruction renders a list based on an array, which is similar to JavaScript's traversal syntax
v-for="item in list"
list is an array, item is the array element currently traversed
v-for="(item,index) in list"where index is the index of the current loop, The subscript starts from 0

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			}
		})

v-bind command

v-bind dynamically binds one or more features, You can take a parameter after its name and separate it with a colon. This parameter is usually an attribute of the HTML element. For example, v-bind: class

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

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				v-bind:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>
		
		var vm = new Vue({
			el: &#39;#app&#39;,
			data: {
				img:&#39;https://www.baidu.com/img/bd_logo1.png&#39;,
				isLogo:false,
				hasBorder:true
			}
		})

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

<div id="app">
			<img :src="img" class="logo" 
				:class="isLogo?&#39;&#39;:&#39;product&#39;" 
				:style="{&#39;border&#39;:hasBorder?&#39;2px solid red&#39;:&#39;&#39;}"></img>
		</div>

v-on instruction

v-on is used to monitor DOM events. Its usage is similar to v-bind, for example, to button Add click event
<button v-on:click="show">
Similarly, like v-bind, v-on can also use the abbreviation, replaced by the @ symbol, Modify the code:
<button @click="show">

Let's take a look at an example:

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

<div id="app">			<p v-show="isShow">微风轻轻的吹来，带来了一丝丝凉意</p>
			<div>
				<button type="button" v-on:click="show(1)">显示</button>
				<button type="button" v-on:click="show(0)">隐藏</button>
			</div>
		</div>		
		var vm = new Vue({			el: &#39;#app&#39;,			data: {				isShow:true
			},			methods:{				show:function(type){					if(type){						this.isShow = true;
					}else{						this.isShow = false;
					}
				}
			}
		})

Comprehensive example

<div id="app">
			<div class="title">添加新用户</div>
			<div class="form">
				姓名：<input type="text" v-model="person.name"><br/>
				年龄：<input type="text" v-model="person.age"><br/>
				<button class="btn" type="button" @click="add">添加</button>
			</div>
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td>
						<a href="javascript:;" @click="deleteItem(index)">删除</a>
						<a v-if="item.age>=25" href="javascript:;" @click="marry(index)">可以结婚了</a>
					</td>
				</tr>
			</table>
		</div>
		new Vue({
			el: &#39;#app&#39;,
			data: {
				person:{
					name:&#39;&#39;,
					age:&#39;&#39;,
				},
				list:[{
					name:&#39;章三&#39;,
					age:18
				},{
					name:&#39;李四&#39;,
					age:23
				}]
			},
			methods:{
				add:function(){
					this.list.push(this.person);
					this.person = {name:&#39;&#39;,age:&#39;&#39;};
				},
				deleteItem:function(index){
					// 删除一个数组元素
					this.list.splice(index,1);
				},
				marry:function(){
					alert("不好意思，你没有女朋友结不了婚");
				}
			},
			created:function(){
			}
		})

Related recommendations:《 vue.js tutorial》

The above is the detailed content of Is there any instruction for vuejs?. For more information, please follow other related articles on the PHP Chinese website!