Chapter 03 Vue指令(下)

news2024/11/23 11:31:28

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏,开启你的 Vue 学习之旅!

文章目录

  • 前言
  • 一、v-on指令
  • 二、v-for指令
  • 三、v-bind指令


前言

在 Vue.js 中,指令是带有 v- 前缀的特殊属性,不同属性对应不同的功能。通过学习不同的指令,我们能够灵活应对多种业务场景的需求。本章详细讲解了一些基本的 Vue 指令,包括 v-on、v-for、v-bind 以及 v-model 指令。

一、v-on指令

①作用:给元素绑定事件监听器

②语法:

  • v-on:事件名 = "内联语句"
  • v-on:事件名 = "methods中的函数名"
特性内联语句methods中的函数名
定义方式直接在模板中编写表达式或语句methods中定义函数
适用场景简单操作复杂逻辑或多个操作
可读性可读性较差,逻辑复杂时难以理解可读性好,更易于维护
维护性难以维护,逻辑修改需在模板中直接更改易于维护,逻辑集中处理
复用性不能复用,通常只适用于当前事件可复用,一个方法可被多次调用

③简写:v-on:事件名 = @事件名

④v-on调用传参:
通常情况下,可以直接将方法名绑定到事件上,但在某些情况下需要在调用方法时传入参数。
语法: v-on:事件名 = "methodName(parameter)"
在这里插入图片描述

⑤修饰符:

修饰符描述
.stop调用 event.stopPropagation()
.prevent调用 event.preventDefault()
.capture在捕获模式添加事件监听器。
.self只有事件从元素本身发出才触发处理函数。
. {keyAlias}只在某些按键下触发处理函数。
.once最多触发一次处理函数。
.left只在鼠标左键事件触发处理函数。
.right只在鼠标右键事件触发处理函数。
.middle只在鼠标中键事件触发处理函数。
.passive通过 { passive: true } 附加一个 DOM 事件。

⑥常用的监听事件:

事件描述
click点击事件
dblclick双击事件
mouseenter鼠标进入元素时触发
mouseleave鼠标离开元素时触发
keydown按键按下事件
keyup按键松开事件
input输入框内容变化时触发
change表单元素内容变化后触发
submit提交表单时触发
focus输入框获得焦点时触发
blur输入框失去焦点时触发
scroll元素滚动时触发
resize窗口或元素大小改变时触发
transitionendCSS 过渡结束时触发
animationendCSS 动画结束时触发
contextmenu右键点击事件

【示例一】
语法1:v-on:事件名 = "内联语句"
内联语句(Inline Statement)是指在某个上下文环境中直接书写的、可以立即执行的代码表达式。这种写法通常不需要额外的命名或定义,而是在特定条件下直接被调用。在Vue.js等框架中,可以快速实现事件处理逻辑,适合于简单的场景和快速开发。

<body>
  <div id="app">
    <!-- 减号按钮,点击时通过v-on:click指令绑定点击事件,触发count--,count的值减1 -->
    <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <!-- 加号按钮,点击时通过v-on:click指令绑定点击事件,触发count++,count的值加1 -->
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        /* count初始值为100 */
        count:100
      }
    })
  </script>
</body>

运行结果:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
v-on:事件名可以简写成@事件名

<div id="app">
    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
  </div>

【示例二】
语法2:v-on:事件名 = "methods中的函数名"

<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">Hello World</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow:true
      },
      methods:{/* 定义了Vue实例的方法fn,功能是切换isShow的值(如果为true则变为false,反之亦然) */
        fn(){
          /* this关键字指向当前的Vue实例app,用于访问组件的属性、数据和方法 */
          this.isShow=!this.isShow
        }
      }
    })
  </script>
</body>

运行结果:
在这里插入图片描述
【示例三】
v-on参数调用: v-on:事件名 = "methodName(parameter)"

<!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>v-on调用参数</title>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 150px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box">
      <h3>饮料自动售货机</h3>
      <!-- 调用buy方法并传入相应的价格参数 -->
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
    </div>
    <p>用户余额:{{money}}</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        /* 初始金额为100 */
        money:100
      },
      methods:{
        buy(price){
          /* this关键字确保我们访问的是Vue实例中的money属性,而不是全局的变量 */
          this.money-=price
        }
      }
    })
  </script>
</body>
</html>

运行结果:
在这里插入图片描述
点击“可乐5元”按钮,余额减5,剩余95元:
在这里插入图片描述
再点击“咖啡10元”按钮,余额减10,剩余85元:
在这里插入图片描述

二、v-for指令

①作用:基于原始数据多次渲染元素或模板块。

②遍历数组的语法:v-for = "(item, index) in 数组"

  • 参数item:表示当前遍历到的元素,它会依次被赋值为数组中的每个元素
  • 参数index:表示当前元素在数组中的索引(位置),从 0 开始递增

【示例】

<body>

  <div id="app">
    <h3>水果店</h3>
    <ul>
      <!-- v-for 指令用于循环遍历 list 的数据属性 -->
      <li v-for="(item,index) in list">{{item}}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  </script>
</body>

运行结果:
在这里插入图片描述
③key属性:
在使用v-for渲染列表时,Vue会根据每个项目的key值来追踪节点的身份。这个机制使得Vue在更新虚拟DOM时能够准确地从旧的节点中找到对应的节点,从而进行最小化的更新,进一步提高性能,并确保组件的状态在更新过程中得到保持。

  • key 的值只能是字符串数字类型
  • key 的值必须具有唯一性
  • 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)
<body>

  <div id="app">
    <h3>我的书架</h3>
    <ul>
      <!-- 通过将 item.id 作为 key,Vue 可以识别每本书的唯一性 -->
      <li v-for="(item,index) in booksList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        /* del(id):根据传入的 id 删除对应的书籍

           filter:一个数组方法,用于创建一个新数组,该数组包含所有通过指定测试的元素。
           该方法不会改变原始数组,而是返回一个新的数组。
           
           item => item.id !== id:一个 箭头函数 (arrow function),被用作 filter 方法中的回调函数;
           其中item.id !== id是一个条件表达式,它检查当前书籍的 id 是否不等于传入的 id;
           如果两者不相等,则返回 true,条件满足,当前的 item 被保留在新数组中;
           如果两者相等,则返回 false,条件不满足,这样当前的 item 不会出现在新数组中。
           */
        del(id){
          this.booksList = this.booksList.filter(item => item.id !== id);  
        }
      },
    })
  </script>
</body>

运行结果:
在这里插入图片描述

删除《红楼梦》后:
在这里插入图片描述

三、v-bind指令

①作用:动态地设置html的标签属性,允许根据 Vue 实例中的数据动态地更新和渲染元素的属性。

②语法: v-bind:属性名="表达式"

③简写::属性名="表达式

【示例】

<body>
  <div id="app">
    <!-- 使用 v-bind 指令将 imgUrl 变量的值绑定到 <img> 元素的 src 属性上,使其动态显示 
         当 imgUrl 的值改变时,图片的源地址也会自动更新-->
    <img v-bind:src="imgUrl" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl:'./imgs/Vue图片.png'
      }
    })

  </script>
</body>

运行结果:
在这里插入图片描述
v-bind:属性名="表达式"可以简写为:属性名="表达式

<img :src="imgUrl" alt="">

【案例】
根据所学内容实现图片切换。
在这里插入图片描述
核心思路分析:
① 数组存储图片路径 → [ 图片1, 图片2, 图片3, … ]
② 准备下标 index,数组[下标] → v-bind 设置 src 展示图片 → 修改下标切换图片

<body>
  <div id="app">
    <!-- 
    v-show="index>0": 控制按钮的显示或隐藏。当index>0时(表示不是在第一张图片),按钮会显示;否则,按钮会隐藏
    @click="index--": 当用户点击此按钮时,index 的值会-1,切换到前一张图片
    -->
    <button v-show="index>0" @click="index--">上一页</button>
    <div>
      <!-- list[index] 获取当前显示的图片路径 -->
      <img v-bind:src="list[index]" alt="">
    </div>
    <!-- 
    v-show="index<list.length-1": 控制按钮的显示或隐藏。当index<list.length-1时(表示不是在最后一张图片),按钮会显示;否则,按钮会隐藏
    @click="index++": 当用户点击此按钮时,index 的值会+ 1,切换到下一张图片。 
    -->
    <button v-show="index<list.length-1" @click="index++">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index:0,
        list: [
          './imgs/photo01.jpg',
          './imgs/photo02.jpg',
          './imgs/photo03.jpg',
          './imgs/photo04.jpg',
          './imgs/photo05.jpg',
          './imgs/photo06.jpg',
          './imgs/photo07.jpg',
          './imgs/photo08.jpg'
        ]
      }
    })
  </script>
</body>

运行结果:
第一张图片:
在这里插入图片描述

点击下一页后切换到第二张图片:
在这里插入图片描述

最后一张图片:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2072545.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

临床医生与人工智能识别三级淋巴结成熟状态的研究对比|文献速递·24-08-24

小罗碎碎念 这期推文的主题是三级淋巴结&#xff0c;主要解决一个问题——临床上如何识别三级淋巴结&人工智能如何应用于三级淋巴结的识别。这两篇文献来源于临床和工科两位不同的老师&#xff0c;是在与他们交流的过程中推荐的&#xff0c;在这里向他们表示感谢&#xff…

在VSCode中使用REST Client插件调试HTTP接口

在 VSCode 中安装 REST Client 扩展程序。新建 test.http 文件。编写请求 请求编写格式可以查看 REST Client 扩展程序说明。点击“Send Request”发送请求 5. 等待请求完成查看响应 请求完成会自动打开响应结果。响应结果上面部分是响应头&#xff0c;下面部分是响应…

idea付费插件,SequenceDiagram比较好用

以下idea付费插件你们都用过哪些呢&#xff1f; SequenceDiagram插件是一种用于绘制时序图的工具。时序图是一种图形化的表示对象之间消息传递顺序的方法。 该插件可以在使用各种编程语言编写代码时&#xff0c;方便地绘制时序图&#xff0c;以帮助开发者更好地理解和描述系统…

【数据分享】全球含建筑高度的建筑物数据(shp格式\约15亿栋建筑物)

建筑数据是我们在各项研究中经常使用到的数据。之前我们能获取到的建筑数据大多没有建筑高度信息&#xff0c;而建筑高度是建筑数据最重要的属性。之前我们给大家分享了我国分城市的含建筑高度的建筑物数据&#xff08;可查看之前的文章获悉详情&#xff09;&#xff0c;本次我…

ST-LINK常见错误总结

伴随着走进STM32 开发 &#xff0c;烧录部分一直会出现 各种各样的问题 &#xff0c;写一篇博文记录关于烧录部分的问题&#xff0c;此文会持续更新&#xff0c;可能之后又遇到其他新的问题&#xff0c;会回来再添加的。 目录 STLINK CONNECTION ERROR 问题的解决 固件丢失 …

buuctf [MRCTF2020]hello_world_go

前言 学习笔记 这题签到&#xff01; 64IDA打开。 查找字符串发现什么都没有。。。 没事 搜索main()【不知道go语言有没有&#xff0c;先搜索再说】 随便点开一个。 有flag格式&#xff0c;提交看看呗。 成了&#xff0c;签到。 flag{hello_world_gogogo} 题外话&#xff0c;…

双系统报错verifiying shim SBAT data falled: Security Pollcy Violation,Ubuntu无法打开

问题 一觉醒来&#xff0c;打开电脑报错无法打开&#xff0c;详细报错如下&#xff1a; verifiying shim SBAT data falled: Security Pollcy Violation Something has gone serlously wrong: seni self-check falled: Security Policy vlolation 这是由于Windows系统自动更新…

x-cmd mod | x btop - 使用 btop 来查看进程的实时信息

目录 介绍使用语法子命令选项FLAGS 介绍 btop 是系统监控工具&#xff0c;能够实时监控 CPU、内存、磁盘、网络和进程使用情况。 使用语法 x btop [FLAGS]子命令 名称描述–cmd直接运行 btop 命令 选项 名称描述–preset,-p 从预设开始&#xff0c;整数范围为 0-9。–upda…

【深度学习】使用Conda虚拟环境安装多个版本的CUDA和CUDNN方便切换

conda虚拟环境安装CUDA和CUDNN 官网教程 https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#conda-installation 1. 背景 深度学习用显卡训练的时候&#xff0c;需要安装与显卡对应的cuda和cudnn。但不同的项目所支持的pytorch版本是不一样的&#x…

考研备考是选择电子学习工具无纸化学习?还是纸质版训练考感?

作为一名成功上岸的考研学子&#xff0c;回顾备考的艰辛历程&#xff0c;深感学习工具的选择至关重要。在当今数字化时代&#xff0c;我们面临着一个关键的抉择&#xff1a;是延续传统的纸质版资料学习&#xff0c;还是投身于电子学习工具的怀抱&#xff0c;开启无纸化学习之旅…

安卓飞机大战设计过程

用户界面 XML布局文件和Activity类 Android布局文件XML是在res/layout文件夹下的xml文件&#xff0c;里面可以放一些组件 启动Activity时&#xff0c; Android 框架会调用 Activity 中的 onCreate() 回调方法&#xff0c;从而加载应 用代码中的布局资源&#xff1b; Overri…

PDF编辑神器!免费版助你轻松搞定文档转换

随着数字化时代的来临&#xff0c;PDF文件因其稳定性和兼容性成为了我们在职场中常用的文档格式。而面对众多的PDF编辑器&#xff0c;免费版的工具选择显得尤为重要。今天分享五款我用过的免费版PDF编辑器的使用感受&#xff0c;帮助大家更好地了解并选择适合自己的办公工具。 …

Flink1.18 同步 MySQL 到 Doris

一、前言 使用Apache Flink实现数据同步的ETL&#xff08;抽取、转换、加载&#xff09;过程通常涉及从源系统&#xff08;如数据库、消息队列或文件&#xff09;中抽取数据&#xff0c;进行必要的转换&#xff0c;然后将数据加载到目标系统&#xff08;如另一个数据库…

数据结构之排序(二)

目录 基本思想&#xff1a; 1.1冒泡排序 ​编辑1.1.1代码实现 1.3冒泡排序的特性总结&#xff1a; 2.1 快速排序 2.1.1基本思想 2.2.2代码实现 1. hoare版本 2.挖坑法 3.前后指针版本 2.2.3 快速排序的优化&#xff08;三数取中&#xff09; 实现步骤 3.1 快速排序非…

链表--随机链表复制

给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节点的 n…

太阳方向角/高度角/赤纬角/太阳时角/真平太阳时差/理论计算方法(matlab)

1. 理论学习 方向角&#xff0c;高度角计算公式 如图&#xff0c;直观地描述了方位角(圆盘上红色夹角)与高度角(黄色线与圆盘的夹角) 赤纬角计算公式 地球赤道平面与太阳和地球中心的连线之间的夹角 如图所示&#xff0c;23度那个. 时角计算公式 太阳时角是指日面中心的时角…

博客园OpenApi管理平台

简介 博客园&#xff08;Cnblogs&#xff09;提供了OpenAPI服务&#xff0c;允许开发者通过API来获取博客园中的数据。使用这个API&#xff0c;可以实现从博客园抓取文章、评论等信息的功能&#xff0c;这对于想要集成博客园内容到自己网站或应用的开发者来说是非常有用的。 …

【hot100篇-python刷题记录】【二叉树的最大深度】

R6-二叉树篇 最简单的方法&#xff1a; 循环len(root)次&#xff0c;每次循环执行以下操作&#xff1a; 循环pow(2,i)次&#xff0c;每次都root.pop(0) 如果为空&#xff0c;立即退出&#xff0c;返回i1 class Solution:def maxDepth(self, root: Optional[TreeNode]) ->…

C语言基础(十七)

C语言中的结构体&#xff08;Struct&#xff09;是一种用户自定义的数据类型&#xff0c;允许将不同类型的数据项组合成一个单一的类型&#xff1a; 测试代码1&#xff1a; #include "date.h" #include <stdio.h> #include <string.h> // 定义结构…

【数据分享】1999—2022年地级市市政公用事业和邮政、电信业发展情况相关指标(Shp/Excel格式)

在之前的文章中&#xff0c;我们分享过基于2000-2023年《中国城市统计年鉴》整理的1999-2022年地级市的人口相关数据、各类用地面积数据、污染物排放和环境治理相关数据、房地产投资情况和商品房销售面积、社会消费品零售总额和年末金融机构存贷款余额、一般公共预算收支状况、…