Vue常用指令

1.简介

本小节我们将介绍在 Vue 项目中常用的一些指令。包括每个指令的含义以及如何使用他们。我们在日常项目中会大量地使用指令，指令是 Vue 中相对基础和简单的知识点。同学们只需要了解每个指令的含义，对案例中的代码反复练习就可以熟练掌握。

2.小简白解释

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 — 官方定义：Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM。

3.常用指令介绍

接下来我们将逐个介绍各个指令的含义和使用方式。

3.1 v-text

v-text是元素的 InnerText 属性，它的作用和之前我们使用的 {{}} 一样，用于数据绑定：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-text="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
    el: '#app',
  data: {
    message: "Hello!"
  },
})
</script>
</html>

运行结果

Hello!

代码解释：
在 HTML 代码第 2 行，我们使用了 v-text 指令，它绑定 message 值，会将 message 的值动态插入 <div> 标签内。

3.2 v-html

v-html是元素的 innerHTML，它用于绑定一段 html 标签：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
    el: '#app',
    data: {
        message: "<div>您好，我是小简白！</div>",
    }
  })
</script>
</html>

运行结果

您好，我是小简白！

代码解释：
在 HTML 代码第 2 行，我们使用了 v-html 指令，它绑定 message 值，会将 html 元素插入 <div> 标签内。

3.3 v-bind

v-bind用于给元素的属性赋值。v-bind后面是 ：属性名=[变量名]。例如:v-bind:title="message"：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-bind:title="title">
      鼠标悬停查看消息！
    </div>
    <div>
      <a v-bind:href="href">小简白</a>
    </div>
    <div>
      <img style="width: 200px;" v-bind:src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按钮</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        title: "您好，我是小简白，欢迎来到小简白的简书！希望你可以在这里学到更多的东西！",
      href: 'https://www.jianshu.com/u/2c22b1194089',
      src: 'https://cn.vuejs.org/images/logo.svg',
      disabled: true
    }
  })
</script>
</html>

运行结果

<img src="C:\Users\Administrator\Desktop\微信图片_20210806161407.png" style="zoom:50%;" />

代码解释：
在 HTML 代码第 2 行，我们使用了 v-bind 指令给 div 标签的 title 属性赋值。
在 HTML 代码第 6 行，我们使用了 v-bind 指令给 a 标签的 href 属性赋值。
在 HTML 代码第 9 行，我们使用了 v-bind 指令给 img 标签的 src 属性赋值。
在 HTML 代码第 12 行，我们使用了 v-bind 指令给 bitton 标签的 disabled 属性赋值。

vue 还提供了指令 v-bind 的简写方式，可以直接通过:属性名的方式。例如在上述例子中我们可以改写成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div :title="title">
      鼠标悬停查看消息！
    </div>
    <div>
      <a :href="href">小简白</a>
    </div>
    <div>
      <img :src="src"/>
    </div>
    <div>
      <button :disabled="disabled">禁用按钮</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
        title: "您好，我是小简白，欢迎来到小简白的简书！希望你可以在这里学到更多的东西！",
      href: 'https://www.jianshu.com/u/2c22b1194089',
      src: 'https://cn.vuejs.org/images/logo.svg',
      disabled: true
    }
  })
</script>
</html>

运行结果同上

3.4 v-for

v-for 用于列表的循环渲染。基本语法：v-for="item in data"，data 可以是数组或者对象，接下来我们介绍对两种数据类型的循环。

3.4.1 v-for 对数组的循环渲染

当我们对数组进行循环的时候，item 表示数组中具体的某一项：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in music">{{item.name}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data() {
    return {
      // 要循环的数组
      music: [
        { name: '青花瓷' },
        { name: '阳光总在风雨后' },
        { name: '十年' }
      ]
    }
  }
})
</script>
</html>

代码解释：
在 JS 代码第 6-10 行，我们定义了数组 music。
在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将 name 插入到 <li> 标签内。
页面展现结果：

  • 青花瓷
  • 阳光总在风雨后
  • 十年

3.4.2 v-for 对象的循环渲染

当我们对数组进行循环的时候，item 表示对象中某一属性的值：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in obj">{{item}}</li>
    </ul>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data() {
    return {
      obj: {
        name: '句号',
        age: 18,
        sex: '男'
      }
    }
  }
})
</script>
</html>

代码解释：
在 JS 代码第 5-9 行，我们定义了对象 obj；
在 HTML 第 3 行，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将属性的值插入到 <li> 标签内。

运行结果

  • 句号
  • 18
  • 男

3.5 v-if和v-show

vue提供了v-if和v-show两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来看一下使用两个指令各有什么效果：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <button>我是添加按钮，我一直在</button>
    </div>
    <div>
      <button id="show" v-show="deleteButton">我是删除按钮，我通过v-show控制显隐</button>
      <button v-on:click="deleteButton = true">设置显示</button>
      <button v-on:click="deleteButton = false">设置隐藏</button>
    </div>
    <div>
      <button id="if" v-if="editButton">我是修改按钮，我通过v-if控制显隐</button>
      <button v-on:click="editButton = true">设置显示</button>
      <button v-on:click="editButton = false">设置隐藏</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app',
   data() {
     return {
       deleteButton: true,
       editButton: true
     }
   }
})
</script>
</html>

代码解释：
在 HTML 中我们设置了两个按钮：1. id 为 show 的 button 通过 v-show 控制显隐。2. id 为 if 的按钮通过 v-if控制显隐。通过点击事件修改绑定的值。

细心的同学可能会想，既然v-if和v-show都能实现元素的显示隐藏，那为什么需要提供两个指令呢？在回答这个问题之前，我们先看一下刚刚写的案例页面。打开浏览器开发者工具，通过元素审查找到删除按钮和修改的DOM元素。

接下来我们通过点击隐藏，将两个按钮设置为隐藏状态，页面效果如下：
[图片上传失败...(image-b745fe-1628241403700)]

从图中可以发现：通过v-show设置状态的按钮元素还在页面中，只是通过样式display:none设置隐藏。而通过v-if设置状态的按钮元素从页面中删除了。现在同学们是不是已经知道v-show和v-if的区别了呢？

v-if：根据表达式的值在 DOM 中生成或移除一个元素。

v-show：根据表达式的值通过样式的改变来显示或者隐藏 HTML 元素。

3.6 v-if、v-else-if、v-else

上面我们已经了解了v-if的使用方法。事实上，v-if的条件渲染和JavaScript条件判断语句中的if、else、else if非常类似。

3.6.1 使用 v-else 指令来表示 v-if 的 “else 块”：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="Math.random() > 0.5">
      你好，小简白！
    </div>
    <div v-else>
      Hello， World!
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app'
})
</script>
</html>

代码解释：
在 HTML 代码中，当随机数大于 0.5 的时候会显示中文的“你好，小简白！”，否则，显示英文的 “ Hello， World!”。

3.6.2 v-else-if，充当 v-if 的“else-if 块”，可以连续使用：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="number === 1">
      A
    </div>
    <div v-else-if="number === 2">
      B
    </div>
    <div v-else>
     C
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
   el: '#app',
   data() {
     return {
       number: 1
     }
   }
})
</script>
</html>

在 HTML 代码中，我们通过判断 number 的值来控制元素的显示隐藏。首先判断 number 是否为 1 ，如果是显示 A，如果不是，则判断 number 是否为 2，如果是显示 B，否则显示 C。

3.7 v-on

有时候，我们需要给元素绑定事件，vue 中提供了指令 v-on 来进行事件的绑定。用法：v-on:事件名="方法"，例如：v-on：click=“alert”。

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="hello">hello</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    hello() {
        alert('hello')
    }
  }
})
</script>
</html>

代码解释：
在 HTML 代码第 2 行，我们给按钮定义来点击事件，并在点击的时候触发 methods 中的 hello 方法。

和v-bind一样vue同样给v-on提供了简写方式，只需要通过@事件类型的方式就可以了。例如：@click="hello"。

当然，v-on不仅只有click一种事件，还有 v-on:keyup.enter、v-on:keyup.page-down、v-on:submit等。

更多用法我们在接下来的章节中继续深入。

3.8 v-model

在原生 Javascript 的项目中，要获取用户输入框输入的内容，需要通过DOM对象的方式。在Vue项目中则不用这么繁琐，因为vue通过了指令v-model来实现数据的双向绑定。我们通过下面一段代码来学习一下：

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年龄：</label>
      <input v-model="age"/>
    </div>
    <div>当前输入的年龄是: {{age}}</div>
    <button @click="add">加一岁</button>
    <button @click="alertYear">弹出年龄</button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  },
  methods: {
    add(){
        this.age = this.age + 1;
    },
    alertYear() {
        alert(this.age)
    }
  }
})
</script>
</html>

代码解释：
上述代码中，我们通过给input元素绑定指令v-model, 使得输入框中的数据 和 data中的age形成双向绑定。这样当用户在输入框内输入值的时候age也会同时改变。同样，当我们在methods中通过add方法修改age的值时，输入框中的值也会同时改变。

3.9 v-pre

该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理，例如：
<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-pre>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  },
  
})
</script>
</html>

代码解释：
在 HTML 代码第 2 行，我们给 div 添加了 v-pre 指令，所以 插值表达式 {{age}} 并不会生效。同样，第三行的 div 没有添加 v-pre 指令，能正常编译显示。

其渲染结果为：

<>代码块

当前输入的年龄是: {{age}}
当前输入的年龄是： 10

3.10 v-once

模板只会在第一次更新时显示数据，此后再次更新该 DOM 里面引用的数据时，内容不会自动更新。

<>实例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <label>年龄：</label>
      <input v-model="age"/>
    </div>
    <div v-once>当前输入的年龄是: {{age}}</div>
    <div>当前输入的年龄是: {{age}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
    age: 10
  }
})
</script>
</html>

代码解释：
在 HTML 代码第 6 行，我们给 div 添加了 v-once 指令，当输入框内的数据发生改变时，被v-once作用的 div 并不会实时更新数据。

4. 小结

本小节我们学习了 Vue 中的一些常用的指令，主要有以下知识点：

  • v-text、v-html 用于页面渲染；
  • v-show、v-if、v-else-if、v-else 条件渲染指令；
  • v-model 用于数据双向绑定；
  • v-on 用于事件绑定；
  • v-for 用于循环。
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,386评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,142评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,704评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,702评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,716评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,573评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,314评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,230评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,680评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,706评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,329评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2赞 355

推荐阅读更多精彩内容

  • Vue的常用指令
    一、逻辑相关 v-if 我们可以通过v-if、v-else-if、v-else来对页面元素的条件进行判断输出 效果...
    moutory阅读 213评论 0赞 0
  • vue常用指令详解
    1.v-html 往div里插入标签，v-html不仅可以渲染数据，而且可以解析标签 如果需要定义插入标签的样式，...
    missChester阅读 487评论 0赞 0
  • 10-Vue的常用指令
    Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on Vue.js的指...
    干净_79db阅读 778评论 0赞 0
  • Vue常用指令（完结版）
    模板语法（插值表达式） 数据绑定的最常见的形式是文本插值 {{ }} 指令 指令的作用：当表达式的值改变时，将其产...
    听书先生阅读 199评论 0赞 1
  • 一、Vue常用指令
    指令目录： 1.v-show2.v-if3.v-model4.v-on5.v-for6.v-bind7.v-tex...
    DonyK阅读 203评论 0赞 0