零基础学习 Vue.JS ——（3）指令篇

最新推荐文章于 2024-07-24 12:54:56 发布

不认输的西瓜

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量318

点赞数 1

分类专栏： vue 文章标签： web vue.js 前端零基础轻量级框架

本文链接：https://blog.csdn.net/qq_40678503/article/details/82108253

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在 Vue.js 的模板中,除了可以有插值之外,还可以含有指令。Vue.js 的指令比 AngularJS 要简单得多,也更容易掌握。

那么什么是指令呢？

指令是带有 v- 前缀的特殊属性,指令的职责就是当其表达式的值改变时, 相应地将某些行为应用到 DOM 上。

指令必须是属性！！！

<div v-if="role==admin">
	<ul>
		<li>备份</li> 
		<li>......</li>
	</ul>
 </div>

这时v-if是作为属性存在的。

<v-if test="role==admin">
	<ul>
		<li>备份</li>
		 <li>......</li>
	</ul> 
</v-if>

这时v-if是作为元素存在的，但是指令必须是属性，所以这么写是错误的！

指令的参数

有的指令能接收参数，可以在指令后用冒号指明
比如：
<a v-bind:href="url">返回首页</a>
<input type="button" value="登陆系统" v-on:click="login"/>

指令的缩写

Vue.js 为 v-bind 和 v-on 指令提供了缩写语法

v-bind 的缩写语法
<a v-bind:href="url">首页</a>
<a :href="url">首页</a>

v-on 的缩写语法
<input type="button" value="OK" v-on:click="test">
<input type="button" value="OK" @click="test">

以上是指令格式的简单介绍，接下来让我们看一下具体的指令功能

v-if 条件渲染指令

Vue.js 的指令中有一些用作条件渲染的指令
它们是v-if、v-else、v- else-if指令。
这些指令的功能和之前接触过的if,else if else基本相同。
用法：

<div v-if="role=='admin'"> 
	管理员
</div>
<div v-else-if="role=='manager'">
	管理者
</div>
<div v-else>
	员工
</div>

v-if指令是真正的渲染，因为在执行过程中它对DOM的操作是销毁和重建，而不是将DOM显示或者隐藏。

<div id="test" v-if="role=='manager'">
	<p>
		<input type="button" @click="add" value="累加">
	</p>
</div>
/*************js*************/
methods: {
add: function () {
	var test = document.getElementById("test");
        var e = document.createElement("p");
        e.innerHTML="HelloWorld"; 
	test.appendChild(e);
     } 
}

如果v-if条件成立，那么会在div中添加一个p标签，也就是增加了DOM元素。

和v-if功能有相同的的是v-show指令

v-show指令是无论表达式条件是否成立,v-show 都会把内容添加到 DOM 中,条件成立就用 CSS 将内容显示出来,否则就用 CSS 把内容隐藏。
v-show是对css进行操作，加载内容后通过控制显示隐藏来达到效果。
另外v-show指令不支持v-else指令，如果需要的话可以用多个v-show指令来完成需求

<div v-show="age>=18 && sex=='male'">
	 ......
</div>
<div v-show="age<18 || sex!='male'">
	 ...... 
</div>

v-if和v-show的对比

v-if 指令在切换显示的时候都会把内容重新渲染一次,而 v-show 指令在切换的时候不会再渲染内容。
只有符合条件的情况下,v-if 指令才会渲染,然而 v-show 指令无论条件是否成立都会渲染内容。
v-if 指令切换时的开销大,v-show 指令切换时的开销小。v-if 指令初始渲染的开销小,v-show 指令初始渲染开销大。频繁切换时,使用 v-show指令,不频繁切换使用 v-if 指令。

v-bind指令

v-bind属性可以为属性绑定特定的值，所有属性都可以用v-bind指令去绑定
<input type="button" v-bind:disabled="age<18" value="报名"/>
当模型层data中的age值小于18时，这个按钮将会被禁用。

<div v-bind:class="{ active: isActive }"></div>
当模型层data中的isActive为true时，控件的class为active。

我们可以在参数中传入更多属性用来动态切换多个 class ,动态 CSS 也可
以与普通的 class 属性共存。

<div class="static" v-bind:class="{ active: isActive, danger: hasError }"></div>
当模型层data中的isActive为true,hasError为true时，控件的class为active和danger。

v-bind指令我们还可以用来绑定一个数据对象或者数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
        .danger{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="[{active:isactive},error]">
        hahahah
    </div>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        isactive:true,
        error:"danger"
    }
});

结果div拥有的class是active和danger。

列表渲染指令v-for

v-for 指令可以把数组的数据渲染输出到模板中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="student in students">
            {{student.name}},{{student.age}}
        </li>
    </ul>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        students:[
            {name:"xiaoming",age:18},
            {name:"jack",age:19}
        ]
   }

});

在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(student,index) in students">
            {{school}}&nbsp;&nbsp;{{index+1}},{{student.name}},{{student.age}}
        </li>
    </ul>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

<li v-for="(student,index) in students">
students是我们定义在模型层data中的一个数组,而student是我们设置一个用在暂时放置获取到的数据的容器。因为index索引都是从0开始的，所以要得到正确的序号我们需要+1.

var app=new Vue({
    el:"#app",
    data:{
        school:"第一中学",
        students:[
            {name:"xiaoming",age:18},
            {name:"jack",age:19}
        ]
    }

});

因为在 v-for 块中,我们拥有对父作用域属性的完全访问权限，所以我们能获取到school的值并渲染到页面。

在v-for块中，我们可以获得对象的key值和value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(value,key) in object">
            {{key}}:{{value}}
        </li>
    </ul>
</div>

<script src="../vue.js"></script>
<script src="main.js"></script>
</body>
</html>

var app=new Vue({
    el:"#app",
    data:{
        object:{
            name:"xiaoming",
            age:18
        }
    }

});

不认输的西瓜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

零基础学习 Vue.JS ——（3） 指令篇

零基础学习 Vue.JS ——（3）指令篇