Vue的常用指令

大纲

什么是指令
常用指令介绍

什么是指令

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

解释：Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM

常用指令介绍

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">
  <script src="js/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div v-text="message"></div>
  </div>
    <script>
     var vm = new Vue({
        el: '#app',
      data: {
          message: "Hello!"
      },
    })
    </script>
</body>
</html>

我们使用了 v-text 指令，它绑定 message 值，会将 message 的值动态插入 <div> 标签内。

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">
  <script src="js/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-html="message"></div>
  </div>
    <script>
     var vm = new Vue({
        el: '#app',
        data: {
            message: "<div>您好，我是小慕！</div>",
        }
      })
    </script>
</body>
</html>

我们使用了 v-html 指令，它绑定 message 值，会将 html 元素插入 <div> 标签内。

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">    
  <script src="js/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-bind:title="title">
      鼠标悬停查看消息！
    </div>
    <div>
      <a v-bind:href="href">慕课网</a>
    </div>
    <div>
      <img v-bind:src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按钮</button>
    </div>
  </div>
    <script type="text/javascript">
      var vm = new Vue({
        el: '#app',
        data: {
            title: "您好，我是YF,每天可以从我这学到更多的东西！",
          href: 'https://www.baidu.com/',
          src: 'img/img1.png',
          disabled: true
        }
      })
    </script>
</body>
</html>

vue 还提供了指令 v-bind 的简写方式，可以直接通过:属性名的方式。

4.v-for

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

v-for 对数组的循环渲染

<!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">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in music">{
   {item.name}}</li>
    </ul>
  </div>
    <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          // 要循环的数组
          music: [
            {
      name: '青花瓷' },
            {
      name: '阳光总在风雨后' },
            {
      name: '十年' }
          ]
        }
      }
    })
    </script>
</body>
</html>

在 JS 代码中，我们定义了数组 music。
在 HTML 中，我们使用 v-for 对数组进行遍历，循环输出<li></li>，并在每次循环的时候将 name 插入到 <li> 标签内。

<!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">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in obj">{
   {item}}</li>
    </ul>
  </div>
    <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data() {
        return {
         obj:{
             name:'YF',
             age:19,
             sex:'女'
         }
        }
      }
    })
    </script>
</body>
</html>

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

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">
  <script src="js/vue.js"></script>
  <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>
    <script type="text/javascript">
    var vm = new Vue({
       el: '#app',
       data() {
         return {
           deleteButton: true,
           editButton: true
         }
       }
    })
    </script>
</body>
</html>

在这里插入图片描述

从图中可以发现：通过v-show设置状态的按钮元素还在页面中，只是通过样式display:none设置隐藏。而通过v-if设置状态的按钮元素从页面中删除了。

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

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

6.v-if ,v-else-if ,v-else

事实上，v-if的条件渲染和JavaScript条件判断语句中的if、else、else if非常类似。

使用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">
      你好，YF！
    </div>
    <div v-else>
      Hello，yf!
    </div>
  </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
       el: '#app'
    })
    </script>
</body>
</html>

在 HTML 代码中，当随机数大于 0.5 的时候会显示中文的“你好，yf！”，否则，显示英文的 “Hello， yf!”。

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>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
       el: '#app',
       data() {
         return {
           number: 1
         }
       }
    })
    </script>
</body>
</html>

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

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>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
     },
      methods: {
        hello() {
            alert('hello')
        }
      }
    })
    </script>
</body>
</html>

我们给按钮定义来点击事件，并在点击的时候触发 methods 中的 hello 方法。

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

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

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>
    <script src="js/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>
</body>
</html>

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

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>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
      data: {
        age: 10
      },
    })
    </script>
</body>
</html>

在这里插入图片描述

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

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>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
      data: {
          age: 10
      }
    })
    </script>
</body>
</html>

在这里插入图片描述

我们给 div 添加了 v-once 指令，当输入框内的数据发生改变时，被v-once作用的 div 并不会实时更新数据。

小结

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

v-text、v-html 用于页面渲染；
v-show、v-if、v-else-if、v-else 条件渲染指令；
v-model 用于数据双向绑定；
v-on 用于事件绑定；
v-for 用于循环。

年龄是: { {age}}

<script src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
  data: {
      age: 10
  }
})
</script>

```

[外链图片转存中…(img-m9zS4Zb1-1620465064319)]

我们给 div 添加了 v-once 指令，当输入框内的数据发生改变时，被v-once作用的 div 并不会实时更新数据。

小结

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

v-text、v-html 用于页面渲染；
v-show、v-if、v-else-if、v-else 条件渲染指令；
v-model 用于数据双向绑定；
v-on 用于事件绑定；
v-for 用于循环。

Vue的常用指令

大纲

什么是指令

常用指令介绍

1.v-text

2.v-html

3.v-bind

4.v-for

v-for 对数组的循环渲染

5.v-if和v-show

6.v-if ,v-else-if ,v-else

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

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

7.v-on

8.v-model

9.v-pre

10.v-once

小结

小结

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

随便看看

教程文章

热评文章

1江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表