第二章 Vue指令

一章节我们探讨了Vue的入门，对Vue有了初步的了解，并且掌握了模板语法。本节课我们的学习目标是Vue的指令。

首先解释以下什么叫做指令，指定就是命令的意思，人们用指令表达自己的意图。Vue中有多种指令，每种指令有不同的功能，比如有个指令的名字叫做v-text，此指令用于主要用来更新html标签InnerText内容，等同于JS操作dom元素的text属性。

除此以外vue还提供了多种指令，接下来我们就开始详细介绍这些指令的使用场景已经使用方式。

2.1 什么是指令

我们已经了解到Vue虽然使用场景与功能类似于JQuery，但是语法习惯完全不同于JQuery，比如Vue使用步骤主要有实例化Vue对象，挂载点使用模板语法绑定数据。除此以外Vue指令也是Vue使用中的重要组成部分，根据不同的指令有不同的功能，比如绑定事件，渲染InnerText数据，渲染InnerHtml数据。

2.1.1 什么是Vue指令

Vue中的指令存在的形式是以“v-”为前缀的特殊属性，出现在html的标签的属性部分，功能是当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue指令的组成部分如下所示。

<tag标签 v-指令名="表达式"> </tag标签>

2.1.2 DOM节点

无论是传统的原生js,还是老牌前端框架JQuery，包括正在学习的Vue，他们的功能主要都是操作dom节点对象，我们这里再复习一下dom节点的相关概念，因为指令就是对DOM节点的操作。在 HTML DOM 中 , 每一个元素都是节点，Vue指令就是节点的特殊属性。Vue.js是数据驱动的，无需手动操作DOM，它通过指令语法，将DOM和数据绑定起来。一旦创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

2.2 指令一览

Vue提供了多种内置的指令，不同的指令有不同的功能，在具体学习每种指令之前，我们先将部分常见指令以表格形式进行一览，如图2.1所示。

图2.1 部分指令一览

2.3 v-if & v-else-if & v-else指令

先描述一个场景：现有一组标签，此标签展示内容只有在当前用户符合某些条件的情况下才显示。

这种类型的功能在开发中是十分常见的，实现思路也很简单，需要先进行判断是否符合条件，根据判断结果来决定是否展示标签。在Vue中想要实现此种功能，就需要使用v-if指令。

2.3.1 v-if指令

我们使用v-if指令来实现刚才描述的场景，创建index.html文件，并使用上一章节中我们学习过的内容快速加载Vue环境，这里就不在重新阐述。index.html中判断当前level的值是否大于等于10，如果大于10在页面中显示文字：“欢迎来自艾欧尼亚的最强王者上机！”如果levle的值小于10则什么都不显示。为了实现此效果，我们需要使用到v-if指令。index.html代码内容如2-1所示：

例2-1 index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>v-if指令</title>
</head>
<body>
<div id="app">
<span v-if="levle>=10">欢迎来自艾欧尼亚的最强王者上机！</span>
</div>

件绑定基本用法

我们实现一个复杂的web应用，少不了与用户的交互，那么用户交互最直接相关的就是事件，我们上一章学习的数据双向绑定的v-model指令的底层就是用到了事件，所以VUE专门提供了事件处理这种语法结构，其实本质上还是指令。所以我们称之为事件绑定。之前我们学到了数据绑定，其实是类似的，数据绑定是将数据与模板绑定起来，只不过对于事件绑定来说，它绑定的是具体的操作。接下来我们学习下，VUE如何来处理事件。

1、VUE如何处理事件

v-on指令用法

<button v-on:click='count+=2'>点击1</button>

v-on简写形式

<button @click='count+=2'>点击2</button>

完整代码：

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <button v-on:click='count+=2'>点击1</button>
            <button @click='count+=2'>点击2</button>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                }
            });
        </script>
      </body>
</html>

展示效果图：

2、事件函数的调用方式

以上我们调用事件是直接在指令内写的业务逻辑，那么如果比较复杂的业务逻辑再直接写到指令内那肯定是不合理了，这时我们要抽取函数，通过事件函数的方式来调用，VUE中也专门提供了一个属性（methods）用来定义我们需要的方法。

直接绑定函数名称

<button @click='todo'>点击3</button>

调用函数

<button @click='todo()'>点击4</button>

完整代码：

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <button @click='todo'>点击3</button>
            <button @click='todo()'>点击4</button>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                },
                methods:{
                    todo:function(){
                        this.count+=2;
                    }
                }
            });
        </script>
      </body>
</html>

展示效果：

注意：在使用方法的时候，我们用到了this.count+,为什么用this呢，因为count在方法内部，在方法内部是没办法访问这个属性的，我们大可认为data和methods是vm实例下的2个子域，他们2个是没办法直接交互的，只能往上通过父域（vm）来访问，所以这里的this就是vm实例对象，比如我在方法内部打印下console.log(this===vm) 返回的是true。

methods内可以定义多个方法。

3、事件函数参数传递

如果我们的事件调用中不需要传递参数，那么以上第一种（直接绑定函数名称）比较方便一些；

如果我们的事件中需要传递参数，我们只能通过以上第二种（调用函数）的方式进行函数调用；

当我们需要传递参数的时候，根据入参的分类可以分为普通参数和事件对象，下边来看下事件函数如何来传递这2中类型的参数：

参数传递

<button @click='todo(11,22,$event)'>点击</button>

完整代码：

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <button @click='todo(11,22,$event)'>点击</button>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                },
                methods:{
                    todo:function(p1,p2,event){
                        console.log(p1);
                        console.log(p2);
                        console.log(event.target.tagName + " " + event.target.innerHTML);
                        this.count+=2;
                    }
                }
            });
        </script>
      </body>
</html>

展示效果图：

其实，我们通过第一种方式（直接绑定函数名称）来调用函数的时候，是没办法从传递普通参数的，但是它默认绑定了事件对象。我们可以在方法内部直接获取事件。

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <button @click='todo'>点击</button>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                },
                methods:{
                    todo:function(event){
                        console.log(event.target.tagName + " " + event.target.innerHTML);
                        this.count+=2;
                    }
                }
            });
        </script>
      </body>
</html>

展示效果：

总结：参数传递

1、如果事件直接绑定的是函数名称（直接绑定函数名称 todo），那么默认会传递事件对象作为事件函数的第一个参数

2、如果事件函数绑定的是函数调用（函数调用 todo（）），那么事件对象必须作为最后一个参数显示的传递，并且事件对象的名称必须是$event

4、事件修饰符

下边来看个例子：

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <div @click='todo2'>
                <button @click='todo'>点击</button>
            </div>

        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                },
                methods:{
                    todo:function(event){
                        
                    },
                    todo2:function(event){
                        console.log(event.target.tagName + " " + event.target.innerHTML);
                        this.count+=2;
                    }
                }
            });
        </script>
      </body>
</html>

展示效果：

分析：在代码中，button绑定的todo方法是没有实现的，理论上是没有反应的，但从展示效果来看，是执行了todo2方法，为什么呢？这是因为事件冒泡到了它的父级元素div上，所以才执行了todo2方法，这就叫做冒泡，一个从子元素向父元素传递事件的行为。那么这种情况显然不是我们预想的，那怎么办呢。阻止冒泡，有2种方式解决：

第一种：原生js

event.stopPropagation();

第二种：vue提供的修饰符

.stop 阻止冒泡

<button @click.stop='todo'>点击</button>

完整代码：

<!DOCTYPE html>
<html lang="en">
<body>
        <div id="app">
            <div>{{count}}</div>
            <div @click='todo2'>
                <button @click.stop='todo'>点击</button>
            </div>
        
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    count:0 
                },
                methods:{
                    todo:function(event){
                        console.log('111');
                        //阻止冒泡
                        //event.stopPropagation();
                    },
                    todo2:function(event){
                        console.log(event.target.tagName + " " + event.target.innerHTML);
                        this.count+=2;
                    }
                }
            });
        </script>
      </body>
</html>

展示效果：

.stop 的存在就相当于阻止事件向父元素传递，保证只执行todo

阻止默认行为（取消默认事件）

在实际开发中，有的时候，我们想要改变某些组件原生的动作，比如默认情况下，如果我点击一个<a>标签，那么默认会自动跳转到href对应的链接上去。如果我想要阻止这些原生的动作行为，而是仅仅需要功能完成执行我们的function函数。那么这时候，我们就要使用prevent了，我们来举一个例子看看：

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
         <a href="www.baidu.com" @click.prevent="func">百度</a>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data: {
                count:0 
            },
            methods:{
                 func:function(){
                    alert('阻止a标签原先点击跳转的默认行为。')
                 }
            }
        });
    </script>
      </body>
</html>

展示效果：

除了以上经常用的2个以外，官网还提供了其它修饰符，有兴趣的可以研究下使用场景

5、按键修饰符

在以往的页面交互中，我们常常会遇到这种需求：当用户输入账号密码后点击 Enter 键、一个多选筛选条件通过点击多选框后自动加载符合选中条件的数据等等。在传统的前端开发中，当我们碰到这种类似的需求时，我们往往需要知道 js 中需要监听的按键所对应的 keyCode，然后通过判断 keyCode 得知用户是按下了那个按键，继而执行后续的操作。例如，在下面的示例中，当我们松开 Enter 按键后控制台就会打印出姓名输入框内的值。

 <label>姓名：</label>
 <input id="name" type="text">
 
 $('#name').on('keyup',function(event){
     event.preventDefault();//阻止浏览器默认动作
     if(event.Code == 13){
         console.log($(this).val());
     }
 });

而在 Vue 中，给我们提供了一种便利的方式去实现监听我们的按键事件。在监听键盘事件时，我们经常需要查找常见的按键所对应的 keyCode，而 Vue 为最常用的按键提供了别名。

在下面的代码中，我们同样监听了 input 框的 Enter 事件，而我们只需要在绑定的 input 标签的 keyup 事件上添加 .enter 修饰符即可。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
          <label>姓名：</label>
          <input id="name" type="text" v-model:value="name" @keyup.enter="log">
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
         var vm = new Vue({
             el: '#app',
             data: {
                 name: ''
             },
             methods: {
                 log:function() {
                     console.log(`name:${this.name}`);
                 }
             }
         })
    </script>
      </body>
</html>

展示效果：

6、自定义按键

对于标准的104键盘，Vue 不可能帮我们把所有的按键键值都定义好，这也不现实。于是，Vue 给我们提供了一种通过定义全局 config.keyCodes 来自定义按键修饰符的别名的方式。例如，在上面的例子中，我们是通过 Enter 按键获取到输入的文本框的值，现在，我们的需求变了，需要我们通过 F2 按键来获得文本框的值，这时我们就可以通过自定义按键修饰符来实现操作。

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
          <label>姓名：</label>
          <input id="name" type="text" v-model:value="name" @keyup.prevent.f2="logF2">
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
          //通过 keyCode 自定义按键修饰符
          Vue.config.keyCodes.f2 = 113
         var vm = new Vue({
             el: '#app',
             data: {
                 name: ''
             },
             methods: {
                 logF2:function() {
                    console.log(`name:${this.name} --- 通过 F2 按键获得`);
                 }
             }
         })
    </script>
      </body>
</html>

这时，通过enter键已经不生效了，只有恩f2才能实现功能。

规则：自定义按键修饰符名字是自定义的，但对应的值必须是按键对应event.keyCode值。

上一篇：VUE入门教程（二）之模板语法（指令）

件监听是javascript中的一个重要概念。我将通过how do even turn dock实现事件监听来分享这一技术。下面分别介绍每种事件的详细操作。

·等夜视鼠标事件mouse down就是鼠标左键按下。

·鼠标逆时针抬起neck就是点击一下db，肯尼克就是双击事件。

·mose over就是鼠标移到元素上，经过了核磁触发。

·mouse move就是鼠标动一下就会出发。

·mouse out就是鼠标移出元素。

·mouse leave就是鼠标远离开页面。

·mouse enter是鼠标一代元素上。经过刺身的指元素抒发 contact the minute。

·鼠标右键打开菜单，在一个键盘世界投档。

·就是按下键盘上某个键时触发，也可以获取到到底是按的哪个键。

·tf就是按下键抬起触发。

·然后是ui 事件，比如加载事件还有鼠标滚动的事件。

·然后是手指事件也叫触摸事件主要用于移动端用于手机触摸屏幕。

·踏起时代就是触发开始。

·踏起摁的就是触发结束。

·踏起就是在滑动踏起。

·看守就是被系统阻止了滑动世界。比如在触摸的过程中被弹出的弹出框打断就会触发开启开锁世界致表达世界。

·表达安居然要添加凤元素作为监听的对象，表达事件是用的比较多的。

在线咨询

上一篇：在 Linux 中如何移动文件
下一篇：HTML打字炫酷特效个人简历源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

第二章 Vue指令

2.1 什么是指令

2.1.1 什么是Vue指令

2.1.2 DOM节点

2.2 指令一览

2.3 v-if & v-else-if & v-else指令

2.3.1 v-if指令

件绑定基本用法

您的项目需求