Vue.js的常用指令

Posted 2020-09-27 小_Li_Kelly

 Vue.js的指令是以v-开头的，它们作用于html元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，如下：

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1：v-if指令

v-if指令是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"

expression是一个返回布尔值的表达式，表达式可以是一个布尔值属性，也可以是一个返回布尔值的运算式。

Eg:

  <div id="app">

            <h1>Hello, Vue.js!</h1>

            <h1 v-if="yes">Yes!</h1>

            <h1 v-if="no">No!</h1>

            <h1 v-if="age >= 18">Age: {{ age }}</h1>

            <h1 v-if="name.indexOf(‘li‘) >= 0">Name: {{ name }}</h1>

        </div>

        var app= new Vue({

            el: ‘#app‘,

            data: {

                yes: true,

                no: false,

                age: 20,

                name: ‘lililili‘

            }

        })

        //数据的yes属性为true，所以"Yes!"会被输出；

//数据的no属性为false，所以"No!"不会被输出；

//运算式age >= 18返回true，所以"Age: 28"会被输出；

//运算式name.indexOf(‘li‘) >= 0返回false，所以"Name: lililili"会被输出。

V-if只能控制一个元素上的是否显隐，对于多个元素控制我们可以使用一个template元素实现

在vue中我们想使用条件模板直接在dom元素上使用v-if指令，v-if指令的值表示vue实例对象上的数据值

Tempalte是vue提供的一个自定义元素，写在这个里面的 元素会根据template v-if属性来控制显隐，在渲染以后这个元素会被vue删除掉，（v-if指令元素保留）

<div id="app">

<template v-if="type">

<span>{{type}}</span> <span> | </span>

</template>

<strong>{{title}}</strong>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

// 数据

var data = {

title: ‘哈哈哈‘,

type: ‘科技‘

}

var app = new Vue({

el: ‘#app‘,

data: data

})

2：v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

Eg:

<ul id="app">

<li v-for="item in list">{{item}}</li>

</ul>

/var data = [

‘快乐大本营‘,

‘奔跑吧兄弟‘,

‘极限挑战‘

]

var app = new Vue({

el: ‘#app‘,

data: {

list: data

}

})

与v-if一样v-for也可以应用在template元素上，此时可以实现对多组元素的for循环

Eg:

<ul id="app">

<template v-for="item in list">

<li>

<span v-if="item.type">{{item.type}} | </span>

<strong>{{item.title}}</strong>

</li>

<br>

</template>

</ul>

var data = [

{

type: ‘湖南‘,

title: ‘快乐大本营‘

},

{

type: ‘浙江‘,

title: ‘奔跑吧兄弟‘

},

{

type: ‘东方‘,

title: ‘极限挑战‘

}

]

var app = new Vue({

el: ‘#app‘,

data: {

list: data

}

})

3:v-show指令

v-show也是条件渲染指令，控制元素显隐，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

V-if是false会将元素在dom文档中删除

V-show是false是将元素的display设置none

V-if会删除元素，v-show只是做样式显隐，会保留页面中

4:v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。

v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else渲染到HTML。

5:v-bind指令

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class=”’’

v-bind:argument="expression"

6:v-on指令

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

<a v-on:click="doSomething">

语法：V-on:click=“事件回调函数的名称”

定义事件的回调函数，在vue的实例化对象的methods属性中定义

Methods他的值是一个对象

对象是属性名称表示事件的回调函数名称

对象的属性值是一个函数，就是事件的回调函数

他的this指向的是vue实例化对象，因此通过它我们可以获取或者设置vue实例化对象上属性

它默认有个参数是事件对象，这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象

当我们在使用事件时候，可以传递一些参数，此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的

<input type="text" v-model="msg">

<button v-on:click="showTitle(msg, $event, ‘hello‘)">btn</button>

<button v-on:click="showTitle">btn2</button>

<h1>{{title}}</h1>

var app = new Vue({

el: ‘#app‘,

data: {

title: ‘‘,

msg: ‘‘

},

methods: {

// 属性名称表示回调函数的名称

showTitle: function () {

// console.log(this)

// console.log(arguments)       传的参数都能访问到 msg, $event, ‘hello‘

// 通过this访问vue实例化对象上的其他属性和方法。Data.title   data.aa

this.title = ‘快乐大本营‘;

},

aa: function () {

}

}

})