蝈蝈领你玩--Vue.js前端库（三）

指令

指令是什么？由于Vue.js实现了MVVM模式，将DOM和Model进行了双向绑定，那么当数据模型中的数据变化的时候，就不需要我们进行DOM操作。指令就是当数据变化的时候，按照指令规则将变化体现到DOM中。这样我们就只关注数据变化即可，而不必管理DOM的状态和变化了。

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue.js中定义了许多指令，下面介绍一些常用的指令。

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

v-if和v-else是用来按照模型数据中布尔型变量或者表达式的值来渲染DOM的。下面的例子将根据学生的模型数据，显示学生的信息。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" cellpadding="0" width="30%">
        <tr>
            <th>姓名</th>
            <td>{{name}}</td>
        </tr>
        <tr>
            <th>性别</th>
            <!--if条件-->
            <td v-if="sex==1">男</td>
            <td v-if="sex==0">女</td>
        </tr>
        <tr>
            <th>生日</th>
            <td>{{birthday}}</td>
        </tr>
        <tr>
            <th>选择课程</th>
            <td>{{course}}</td>
        </tr>
        <tr>
            <th>成绩评定</th>
            <!--if....else条件-->
            <td v-if="score>=60">及格</td>
            <td v-else>不及格</td>
        </tr>
    </table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
    var model = {
        name : '张三',
        sex : 1,
        birthday : '1998-10-10',
        course : '编译原理',
        score : 86
    }
    // 创建一个 Vue 实例
    new Vue({
        el: '#app',
        data: model
    })
</script>
</body>
</html>

运行效果如下：

image.png

v-show和v-if运行的效果一样，但是有区别。v-if对于不满足条件的HTML，不加入DOM中，而v-show不管条件是否成立，都存在于DOM中，只是条件不满足的时候，其CSS的display属性为none。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 id="aaa" v-if="yes">Hello World!</h1>
    <h1 id="bbb" v-show="yes">Hello World!</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
    var model = {
        yes:false
    }
    // 创建一个 Vue 实例
    new Vue({
        el: '#app',
        data: model
    })
</script>
</body>
</html>

运行的结果两个h1都看不到，但是他们在DOM中的情况不同，用开发者工具可以看到如下内容，id为aaa的元素在DOM中不存在，而id为bbb的元素存在，样式为none：

image.png

v-for是用来遍历数组，集合等模型数据的。也是用来显示表格，列表等必不可少的内容。v-for在遍历的时候可以定义获取到的对象变量，如果需要获取循环因子，那么在后面加入循环因子变量名。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container col-xs-4">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
        </tr>
        <tr v-for="item,index in studs">
            <td>{{index+1}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.major}}</td>
        </tr>
    </table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var model = {
        studs:[{
            id:1,
            name:'张三',
            major:'计算机科学与技术'
        },{
            id:15,
            name:'李四',
            major:'自动化'
        },{
            id:16,
            name:'王五',
            major:'软件工程'
        }]
    }
    // 创建一个 Vue 实例
    new Vue({
        el: '#app',
        data: model
    })
</script>
</body>
</html>

运行的结果如下：

image.png

v-bind是一个非常重要的指令，他是用来根据模型数据设置HTML元素属性值的指令。例如，有.aaa的样式和.bbb样式，如果DOM需要根据模型中的变量来设置HTML属性，那么就需要使用v-bind指令。v-bind指令常用与绑定CSS的class属性和style样式，也可以用于其他属性的绑定。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        .aaa{
            color:orangered;
        }
    </style>
</head>
<body>
<div id="app" class="container col-xs-4">
    <div> </div>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
        </tr>
        <tr v-for="item,index in studs" v-bind:id="'id-'+item.id">
            <td>{{index+1}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td v-bind:class="item.major=='自动化'?'aaa':''">{{item.major}}</td>
        </tr>
    </table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var model = {
        studs:[{
            id:1,
            name:'张三',
            major:'计算机科学与技术'
        },{
            id:15,
            name:'李四',
            major:'自动化'
        },{
            id:16,
            name:'王五',
            major:'软件工程'
        }]
    }
    // 创建一个 Vue 实例
    new Vue({
        el: '#app',
        data: model
    })
</script>
</body>
</html>

运行结果是，CSS按照模型中的变量进行CSS的class绑定。效果如下：

image.png

用开发者工具查看DOM，id值按照模型进行绑定。

image.png

v-on指令是用来绑定HTML元素事件的。可以通过调用模型中的方法来操作模型数据。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        .aaa{
            color:orangered;
        }
    </style>
</head>
<body>
<div id="app" class="container col-xs-4">
    <div> </div>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="item,index in studs" v-bind:id="'id-'+item.id">
            <td>{{index+1}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td v-bind:class="item.major=='自动化'?'aaa':''">{{item.major}}</td>
            <td><button class="btn btn-danger btn-sm" v-on:click="del(item.id)">删除</button></td>
        </tr>
    </table>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var model = {
        studs:[{
            id:1,
            name:'张三',
            major:'计算机科学与技术'
        },{
            id:15,
            name:'李四',
            major:'自动化'
        },{
            id:16,
            name:'王五',
            major:'软件工程'
        }]
    }
    // 创建一个 Vue 实例
    new Vue({
        el: '#app',
        data: model,
        methods:{
            del:function (id) {
                alert('删除学号是'+id+'的学生')
            }
        }
    })
</script>
</body>
</html>

运行后，点击删除按钮，可以调用模型中的del方法，并传递学号给del方法。运行结果如下：

image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Java后台面试 常见问题
    从三月份找实习到现在，面了一些公司，挂了不少，但最终还是拿到小米、百度、阿里、京东、新浪、CVTE、乐视家的研发岗...
    时芥蓝阅读 42,469评论 11赞 349
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,465评论 0赞 29
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 135,497评论 19赞 139
  • 家乡的清明粿
    每回回去，听听这，看看那，唠唠叨叨家常，说说你的，聊聊我的，三五个儿时的玩...
    简荨阅读 3,909评论 0赞 1
  • 特种兵训练第12天
    今天是训练第12天，时间过的好快，只剩下4天了。每一天都在忙碌充实的过着，有目标有意义的进行着我的每日任务，这样的...
    FAB伊颜阅读 3,192评论 0赞 0