一、学习目标

  • 了解 什么 是 Vue.js 指令
  • 理解 Vue.js 指令的 用途
  • 掌握 Vue.js 指令的书写规范
  • 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点)

二、指令的基本概念

2.1、什么是Vue.js指令

指令是带有v-前缀的特殊属性：v-bind、v-bind:is、v-bind:key、v-cloak、v-else、v-else-if、v-for、v-html、v-if、v-model

2.2、Vue.js指令的用途

在表达式的值改变时，将某些行为应用到DOM上。

2.3、Vue.js指令的书写规范

书写位置： 任意HTML元素的开始标签内。

注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔。

三、指令

3.1、v-show指令

作用：控制切换一个元素的显示，和隐藏。本质就是设置 display属性。

语法：v-show = 表达式

  • 根据表达式的结果的真假，确定是否显示当前元素。
  • true表示显示该元素；false 表示隐藏该元素
  • 默认情况下，如果 v-show=' '，那么为false 
    <div id="box">
    <!--
        v-show 指令
        语法： v-show=表达式
        表达式结果为true，那么显示元素；
        表达式结果为false，那么元素隐藏,
        默认情况下，如果没有写入表达式，那么为 false
     -->
    <div class="div1" v-show='true'></div>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#box"
    })
</scrip
<div id="box">
    <!--
        v-show 指令
        语法： v-show=表达式
        表达式结果为true，那么显示元素；
        表达式结果为false，那么元素隐藏,
        默认情况下，如果没有写入表达式，那么为 false
     -->
    <div class="div1" v-show='false'></div> //可以直接写入 true 或 false
    <div class="div1" v-show='bol'></div> // 用data中的bol的值
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            bol: false
        }
    })
</script>

v-show指令

3.2、v-on指令

作用：为HTML元素绑定事件监听

语法：v-on:事件名称='函数名称(参数)'，这边注意了，如果不需要传入参数，只需写成：v-on:事件名称='函数名称'，如：v-on:click='fn'

简写语法：@事件名称='函数名称'，如：@click='函数名称'

注意：函数的定义在methods配置项中

<div id="box">
    <!--
        v-on指令：click为事件名称
        语法：v-on:click='fn'
        简写语法：@click='fn'
     -->
    <!--fn函数方法定义在 controller中的methods配置项里面-->
    <button @click='fn'>显示</button>
    <!--bol是引用 data 中的bol变量-->
    <div class="div1" v-show='bol'></div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            bol: true
        },
        methods: {
            fn: function(){
                //console.log(index);
                this.bol = !this.bol;
            }
        }
    })
</script>

v-on指令

3.3、v-model指令

作用：将用户的输入同步到视图上

语法： v-model = '变量'

注：v-model 指令必须绑定在表单元素上

<div id="box">
    <!--
       v-model:进行双向绑定的(把用户输入的内容，同步显示在页面上)
       语法：v-model='变量'
       注：使用在表单元素上(常用在type类型为text上)
    -->
    <h1 v-on:click="fn">{{ msg }}</h1>
    <!--input内容输入什么，在h1标签内就显示什么内容，主要使用v-model双向绑定-->
    <input type="text" v-model="msg" v-show="bol"/>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            msg: "Edit",
            bol: true
        },
        methods: {
            fn:function(){
                //body....
                this.bol = !this.bol;
                this.msg = "Edit";
            }
        }
    });
</script>

v-model指令

3.4、v-for指令

作用：遍历data 中的数据，并在页面进行数据展示。

语法：遍历 元素和索引的：v-for='(item,index) in arr' ;遍历元素：v-for='item in arr'

说明：item：表示每次遍历得到的元素，index：表示item的索引，可选参数。

<div id="box">
    <!--
        v-for:类似于js中的for循环
        语法：v-for:'item in arr'
        item: 每次遍历后得到的元素，arr:需要遍历的数组

        v-for='(item,index) in arr'
        index:下标
        注： item和index 名字是随意取的(参数1，参数2)
        参数1： 每次遍历后得到的元素
        参数2： 每个元素的下标
        注：参数跟它叫什么名字无关，只跟参数的顺序有关
    -->
    <ul>
        <!--有多少条数据，就渲染(render)多少个li-->
        <li v-for="item in arr">{{ item }}</li>
        <li v-for="(item,index) in arr">{{ index + '、' }}{{ item }}</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            arr: ['吃饭','睡觉','LOL','打豆豆']
        }
    });
</script>

v-for指令

3.5、v-bind指令

作用：绑定 HTML元素的属性

语法：v-bind:属性名='表达式'；简写语法：:属性名='表达式'，如：:class="{red,false}"

绑定一个属性：<img v-bind:src='myurk/'>

绑定多个属性：<img v-bind='{src:myurk,title:msg}'/>

绑定class属性：<button v-bind:class='{red: bol}'></button>，这个red表示某个样式，bol值是true或者false，如果是true的话则显示此样式，false则不显示样式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {background: red;}
        .en {height: 100px; width: 200px;}
    </style>
</head>
<body>
    <div id="box">
        <button v-bind:class="{red: bol,en: bol}">按钮</button>
        <!--
            v-bind属性绑定：
                v-bind:class={类名：表达式}
         -->
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                bol: true
            }
        })
    </script>
</body>

v-bind指令

四、指令练习

4.1、需求

点击li标签，让被点li的背景变为红色

4.2、代码实现

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {background: red;}
    </style>
</head>
<body>
    <div id="box">
        <!--
            v-for:类似于js中的for循环
            语法：v-for:'item in arr'
            item: 每次遍历后得到的元素，arr:需要遍历的数组

            v-for='(item,index) in arr'
            index:下标
            注： item和index 名字是随意取的(参数1，参数2)
            参数1： 每次遍历后得到的元素
            参数2： 每个元素的下标
            注：参数跟它叫什么名字无关，只跟参数的顺序有关
        -->
        <ul>
            <!--有多少条数据，就渲染(render)多少个li-->
            <!--<li v-for="item in arr">{{ item }}</li>-->
            <li v-for="(item,index) in arr" @click="fn(index)" v-bind:class="{red: item.bol}">{{ index + '、' }}{{ item.des }}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    {des:"吃饭",bol:false},
                    {des:"睡觉",bol:false},
                    {des:"LOL",bol:false},
                    {des:"打豆豆",bol:false}
                    ]
            },
            methods: {
                fn: function(index){
                    //通过当前index知道 当前被点击的数据是谁
                    // 把被点击的数据的 bol 值改为true
                    // 把所有其他的未被选中的数据 bl 改为 false
                    // 思路：先都改成false,然后再把选中的改成 true
                    for(var i = 0;i<this.arr.length;i++){
                        this.arr[i].bol = false;
                    };
                    this.arr[index].bol = true;
                }
            }
        });
    </script>
</body>

指令练习

五、总结

  • v-show：控制切换一个元素的显示和隐藏
  • v-on： 为HTML元素绑定事件监听
  • v-model：将用户的输入同步到视图上
  • v-for：遍历data 中的数据，并在页面进行数据展示
  • v-bind：绑定HTML 元素的属性

记住了，如果在指令中 用到 表达式是的话，是不需要 加 {{ }} 的，但是不在指令中，在标签之外的，那就要 加 {{  }}了，如下：

<body>
    <div id="box">
        <h1>{{ msg }} world</h1> // 在指令之外的，需要 {{msg}}
        <h1 v-text="msg">world</h1> //使用在指令中的，不需要，直接 v-text="msg"
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                msg: 'hello'
            }
        })
    </script>
</body>

第2章-Vue.js指令的更多相关文章

  1. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  2. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  3. vue.js指令总结

    1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...

  4. 第10章-Vue.js 项目实战

    一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...

  5. vue.js指令v-model实现方法

    原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...

  6. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  7. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  8. Vue.js指令实例

    v-if  v-else  v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...

  9. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

随机推荐

  1. hashlib模块使用详情

    python常用模块目录 一:hashlib简介 1.什么叫hash:hash是一种算法(不同的hash算法只是复杂度不一样)(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224 ...

  2. centos下部署jenkins

    本文摘抄自:https://www.cnblogs.com/edward2013/p/5284503.html  ,请支持原版! 1. 安装JDK 1 yum -y install java 2.安装 ...

  3. Yii2 yii\helpers\ArrayHelper

    yii\helpers\ArrayHelper 是一个数组辅助类,提供额外的数组功能函数 toArray($object, $properties = [], $recursive = true) C ...

  4. HUST学期助教总结

    春节还没过完,在回广州的高铁上收到是否愿意担任一次软测助教的询问.想了一天,答应了.而内心其实是有点恐慌的,有几点原因: 大学从来没有学过软件测试这门课程.对于自己的软件测试只是体系并不是很有自信. ...

  5. RIGHT-BICEP测试第二次程序

    根据Right-BICEP单元测试的方法我对我写的第二次程序进行了测试: 测试一:测试能否控制使用乘除 测试二:测试是否能加括号 测试三:是否可以控制题目输出数量 测试四:能否控制输出方式,选择文件输 ...

  6. 第二次作业——个人项目实战（sudoku）

    第二次作业--个人项目实战(sudoku) 一.作业要求地址 第二次作业--个人项目实战 二.Github项目地址 softengineering1--sudoku 三.PSP表格估计耗时 PSP2. ...

  7. 软工网络15团队作业4——Alpha阶段敏捷冲刺-7

    一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 进一步优化功能与完善服务器. 明天计划完成的工作: 服务器是需要完善,后端的配置还需要修改. 工作中遇到的困难: 今日遇到的困难是服务器后端 ...

  8. larave5.6 引入自定义函数库时，报错不能重复定义

    方法一:使用function_exists判断 方法二:使用命名空间 namespace test; function test(){ echo 'test/test'; } namespace te ...

  9. 【Linux笔记】GRUB配置与应用，启动故障分析解决。

    一.GRUB启动位置 GRUB是现今大多数Linux系统采用的自举程序,这里先来看一下Linux的程序顺序: 执行顺序    动作 固件Firmware(CMOS/BIOS) →  POST(Pwer ...

  10. Python环境安装(Windows环境)

    近半年来一直在用Python处理手头的工作.想想,Python确实是一门比较强大的语言,容易上手且功能强大, 基本上想做的工作都能找到别人提供的包. 目前主要在windows系统上办公,这里把wind ...