Vue指令

最新推荐文章于 2025-06-09 00:45:00 发布

学Java的bb

最新推荐文章于 2025-06-09 00:45:00 发布

阅读量1k

点赞数 39

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/sjdjjdkd/article/details/148143195

1.前言

用原生的JS来处理界面的交互行为，开发效率是比较低的。而在现在的企业项目开发中，一般会借助于Vue这样的js框架来简化操作、提高开发效率。那么我们今天呢，就来学习Vue这个框架。

2.什么是Vue?

Vue（读音 /vjuː/, 类似于 view），是一款用于构建用户界面的渐进式的JavaScript框架（官方网站：Vue.js - 渐进式 JavaScript 框架 | Vue.js)。

3.Vue快速入门

需求

在入门程序中，最终我们需要将准备的数据 message 的值，基于Vue渲染展示在页面中，最终呈现的形式如下：

步骤

1). 准备工作：

准备一个html文件，并在其中引入Vue模块（参考官方文档，复制过来即可）【注意：模块化的js，引入时，需要设置 type="module"】

创建Vue程序的应用实例，并绑定视图来控制视图的元素

准备元素（div），交给Vue控制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>

<body>
  <div id="app">
  

  </div>

  <script type="module">
    // 1.引入Vue模块，在官网中查询语句
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    // 2.创建Vue实例,并绑定视图
    createApp({
      



    }).mount('#app')


  </script>
</body>

</html>

2). 数据驱动视图：

准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。

通过插值表达式渲染页面。插值表达式的写法：{{...}}

3).实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>

<body>
  <!-- 3.准备视图元素 -->
  <div id="app">
    <!-- 5.通过插值表达式进行数据渲染 -->
    <h1>{{message}}</h1>
  </div>

  <script type="module">
    // 1.引入Vue模块
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    // 2.创建Vue实例,并绑定视图
    createApp({
      //4.定义数据模型
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')


  </script>
</body>

</html>

在上述入门程序编写时，需要注意这么几点：

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。

插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错。

Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 <div id="app">...</div> 的里面。

4.Vue指令

指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。例如：v-if，v-for…

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

4.1 v-for

介绍

作用：列表渲染，遍历容器的元素或者对象的属性

语法：v-for = "(item,index) in items"

参数：

items 为要遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for入门</title>
</head>
<body>
  
  <div id="app">
    <p v-for="(name,index) in names">{{index + 1}}:{{name}}</p>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          names: ['张无忌', '张三丰', '韦一笑', '殷天正']
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

经过浏览器的解析渲染之后，展示出如下界面：

v-for的key

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

语法： v-for="(item,index) in items" :key="唯一值"

注意点:

key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

提示：官方推荐在使用 v-for 时提供一个key属性，以遍可以追踪每个节点，提升渲染性能。

案例-列表渲染

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" name="name">
      性别:
      <select name="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询">
    </div>

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>
	  
      <!-- 基于 v-for 指令循环遍历用户数据列表 -->
      <tr v-for="(user,index) int userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td> <img src="{{user.image}}"> </td>
        <td>{{user.gender}}</td>
        <td>{{user.job}}</td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          userList: [
            {
              "id": 1,
              "name": "谢逊",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 1,
              "job": 1,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 2,
              "name": "韦一笑",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              "gender": 1,
              "job": 1,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 3,
              "name": "黛绮丝",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/3.jpg",
              "gender": 2,
              "job": 2,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 4,
              "name": "殷天正",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              "gender": 1,
              "job": 3,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            }
          ]
        }
      }
    }).mount("#app");
  </script>
</body>

</html>

浏览器打开此页面，最终浏览器中展示效果如下：

注意：插值表达式 {{...}} 只能用在标签内的文本区域，不能使用在标签的属性中，是无法解析的。所以上述的图片展示，是存在问题的（稍后解决）。引号里面不能用插值表达式

4.2 v-bind

介绍

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"

简化：:属性名="属性值"

注意：v-bind 所绑定的数据，必须在data中定义。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind入门</title>
</head>
<body>
  
  <div id="app">
    <a v-bind:href="url">链接1</a> <br><br>
    <a :href="url">链接2</a>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          url: 'https://www.itcast.cn'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

案例

接下来，我们就可以通过 v-bind 指令，来动态为 <img src=""> 的src属性绑定值，从而动态展示出图片内容。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
    ...
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" name="name">
      性别:
      <select name="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询">
    </div>

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <!-- 基于v-bind指令绑定src属性, 动态展示图片, 该指令简写为 : -->
        <td> <img :src="user.image"> </td>        
        <td>{{user.gender}}</td>
        <td>{{user.job}}</td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          userList: [
           ...
          ]
        }
      },
    }).mount("#app");
  </script>
</body>

</html>

上述代码经过浏览器的解析之后，我们会看到图片就可以正常显示出来了。

注意：表格的基本内容，以及图片信息已经展示出来了，但是我们看到性别显示的却是1、2，那最终要展示出来的得是男、女。

4.3 v-if & v-show

介绍

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if：

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断

v-show：

语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后。

案例-性别职位展示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
   ...
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" name="name" >
      性别:
      <select name="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>妖</span>
        </td>
        <td>
          <!-- v-show -->
          //原来的样式:<td> {{user.job}} </td>
          <span v-show="user.job == 1">讲师</span>
          <span v-show="user.job == 2">班主任</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>

    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name: '',
          gender: '',
          job: '',
          userList: [
           ...
          ]
        }
      },
      methods: {
        search() {
          // 输出搜索框中的数据
          console.log(`姓名: ${this.name}, 性别:${this.gender}, 职位:${this.job}`);
        }
      }
    }).mount("#app");
  </script>
</body>

</html>

浏览器打开此页面后，经过浏览器的解析，数据可以正确的显示出来了。

通过F12，打开浏览器的开发者工具，我们可以看到 v-if 控制元素的显示与隐藏时，如果条件不成立，压根就不会渲染对应的元素(创建或移除标签)。而通过 v-show 控制元素的显示或隐藏，基于 CSS 样式display来控制显示与隐藏。

所以，对于 v-if 适用于控制显示或隐藏不频繁的场景。而 v-show 适用于显示与隐藏切换频繁的场景。

4.4 v-model

介绍

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：v-model="变量名"

这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。

注意：v-model 中绑定的变量，必须在data中定义。

演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model入门</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="name"> <br>
    {{name}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

最终的效果如下：视图中的数据变化，会影响Vue的数据模型。 Vue的属性模型变化，也会影响视图的展示。

案例-获取搜索条件

接下来我们要来完成案例中，搜索栏中用户输入的表单数据，用户输入表单项数据后，要将数据展示出来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
   ...
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      <!-- 通过 v-model 绑定表单项数据，而这些变量，必须在data中定义 -->
      姓名: <input type="text" v-model="name">
      性别:
      <select v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>
      
      <input class="btn" type="button" value="查询">
    </div>
    {{name}} - {{gender}} - {{job}}
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td>
          <span v-if="user.job == 1">讲师</span>
          <span v-else-if="user.job == 2">班主任</span>
          <span v-else>其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
    
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          //定义数据
          name: '',
          gender: '',
          job: '',
          
          userList: [
              ...
          ]
        }
      },
    }).mount("#app");
  </script>
</body>

</html>

最终在浏览器中执行，我们会看到，我们是可以实时获取到表单的数据的，因为已经将其绑定到了 name、gender、job 数据模型中。

那现在我们已经可以正常的获取到表单的数据，正常的业务操作应该是点击 "查询" 之后，要执行查询操作。那接下来，我们就先来为 "查询" 按钮绑定事件，点击查询按钮，获取到表单数据，并输出出来。

4.5 v-on

介绍

作用：为html标签绑定事件（添加时间监听）

语法：

v-on:事件名="内联语句"

<input type="button" value="点我一下试试" v-on:click="console.log('试试就试试');">

v-on:事件名="函数名"

<input type="button" value="点我一下试试" v-on:click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。

简写为 @事件名="…"

演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-on入门</title>
</head>
<body>
  
  <div id="app">
    <input type="button" value="点我一下试试" v-on:click="console.log('试试就试试1')">
    <input type="button" value="再点我一下试试" v-on:click="handle">
    <input type="button" value="再点我一下试试3" @click="handle">
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      // 数据模型
      data(){
        return {
          name: 'Vue'
        }
      },
      // 定义函数
      methods: {
        handle(){
          console.log("试试就试试3");
        }
      },
    }).mount('#app')
  </script>
</body>
</html>

案例-事件绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
  ...
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" v-model="name">
      性别:
      <select v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>
      
      <!-- <input class="btn" type="button" value="查询" v-on:click="handle"> -->
      <input class="btn" type="button" value="查询" @click="handle">
    </div>
    
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td>
          <span v-if="user.job == 1">讲师</span>
          <span v-else-if="user.job == 2">班主任</span>
          <span v-else>其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name: '',
          gender: '',
          job: '',
          userList: [
            ...
          ]
        }
      },
      methods: {
       handle: function(){
         console.log(`查询啦, 查询条件: name=${this.name}, gender=${this.gender}, job=${this.job}`);
       } 
      }
    }).mount("#app");
  </script>
</body>

</html>

最终在浏览器中执行，我们会看到，我们是可以实时获取到表单的数据的，因为已经将其绑定到了 name、gender、job 数据模型中。