Vue（一）：Vue 入门与 Vue 指令

Vue

01. Vue 快速上手

1.1 Vue 的基本概念

用于 构建用户界面 的 渐进性 框架

  1. 构建用户界面：基于数据去渲染用户看到的界面
  2. 渐进式：不需要学习全部的语法就能完成一些功能，学习是循序渐进的
  3. 框架：一套完整的项目解决方案，可以大大的提升开发效率

1.2 创建 Vue 实例

<body><div id="app"><!-- 编写用于渲染的代码逻辑 -->{{ msg }}</div><!-- 引入的是开发版本的包，包括完整的注释和介绍 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 导包后就有了 vue 全局函数const app = new Vue({// 通过 el 配置选择器，指定管理的是哪个盒子el: '#app',// 通过 data 来提供数据data: {msg: '你好,vue'}})</script>
</body>

1.3 插值表达式

插值表达式是一种 Vue 的模板语法，利用它可以进行插值，将数据渲染到页面中

  • 语法：{{ 表达式 }}
  • 注意只能使用表达式，不能使用语句且不可以在标签属性中去使用插值表达式
  <div id="app"><p>{{ nickname }}</p><p>{{ age > 18 ? '成年' : '未成年' }}</p><p>{{friend.num}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new new Vue({el: '#app',data: {nickname: '用户名',age: 19, friend: {num: 10}}})</script>

1.4 响应式特性

数据被修改的话，它对应的视图也会立刻更新，这就是响应式特性

<body><div id="app">{{msg}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: '你好'}});app.msg = '你好呀';</script>
</body>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

开发者只需要聚焦于数据，关注业务的核心逻辑，根据业务修改即可，而不需要再自己获取 DOM 元素再去修改。

1.5 Vue 开发者工具

下载地址：https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd

安装步骤：

  1. 通过网站下载压缩包
  2. 开启谷歌开发者模式
  3. 将压缩包直接拖拽到界面内进行安装
  4. 开启允许访问文件地址


在这里插入图片描述

拖拽安装完成后点击详情，找到下面的选项
在这里插入图片描述

关闭浏览器再重新打开就可以在开发者工具栏找到 Vue 选项

02. Vue 指令

2.1 指令入门

Vue 会根据不同的指令，针对标签实现不同的功能

指令：以 v- 前缀的特殊的 标签属性

比如 v-html 可以实现动态的解析标签

<body><div id="app" v-html="src"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {src: '<a href="https://www.baidu.com/"> 百度一下 </a>' }})</script>
</body>

官方文档：https://v2.cn.vuejs.org/v2/api/

2.2 v-show VS v-if 指令

指令效果语法
v-show控制元素显示或者隐藏v-show=“表达式” true 显示，false隐藏
v-if控制元素显示还是隐藏（条件渲染）v-show=“表达式” true 显示，false隐藏

下面我们来看这两个的区别，先给出一段代码

<body><div id="app"><div v-if="flg">v-if 控制的盒子</div><div v-show="flg">v-show 控制的盒子</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new new Vue({el: '#app',data: {flg: true}})</script>
</body>

下面让我们来看看真实渲染后的代码是什么样子的：

当表达式为 true 的时候，这两个指令渲染出来的代码没有任何区别，但当我们改为 false 后可以很清晰的看到

v-if 控制的盒子直接会从 DOM 中移除，而 v-show 只是为它加了 display-none 属性而已

那这两个属性应该在什么时候使用呢？

  1. 性能考虑：
    • 当页面中的内容不经常切换时，使用 v-if 更合适，因为它在条件变为假时销毁元素，减少了页面的渲染负担。
    • 当需要频繁切换显示与隐藏时，使用 v-show 可能更好，因为它只是简单地切换 CSS 的 display 属性，避免了频繁地创建和销毁DOM元素。
  2. DOM 操作和复杂性：
    • 如果希望避免频繁地销毁和重建DOM元素，可以使用 v-show。它保留了元素在DOM中的存在，只是控制其显示与隐藏。
    • 如果元素不经常显示，或者显示时不需要保留其状态和事件监听器，可以考虑使用 v-if，因为它在条件为假时会销毁元素及其状态。
  3. 初次加载性能考虑：
    • 如果初始加载时不需要显示某个元素，v-if 可能更适合，因为它不会将元素添加到DOM中。
    • 如果初始加载时需要显示元素，但可能在后续需要频繁切换其显示与隐藏，v-show 可能更合适，因为它保留了元素在DOM中的存在。

2.3 v-else v-else-if 指令

通过 v-if v-else-if v-else 的组合，我们可以实现各种复杂的逻辑判断，比如我们想要实现遵循如下规则显示数据

这种对于多个条件的判断就可以通过上面的组合去实现

代码：

<body><div id="app"><p v-if="gender === 1">性别：♂ 男</p><p v-else>性别：♀ 女</p><hr><p v-if="score > 90">成绩评定A:奖励电脑一台</p><p v-else-if="score > 70 && score <= 90">成绩评定B:奖励周末郊游</p><p v-else-if="score>=60 && score <= 70">成绩评定C:奖励零食礼包</p><p v-else>成绩评定D:惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender: 1,score: 0}})</script>
</body>

需要注意的是 v-else 上面必须有 v-if 否则会出现错误

2.4 v-on 指令

v-on 帮助我们简化了注册时间的步骤，也就是实现了给元素 添加监听器 和 实现处理逻辑

有两种写法，分别是内联语句和函数名写法，内联语句用于实现简单的、不太需要维护的逻辑，函数名的写法用来书写复杂的逻辑

2.4.1 内联语句

语法：v-on:EVENT="内敛语句或者methods中的函数名"

<body><div id="app"><button v-on:click="num--">-</button><span>{{num}}</span><button v-on:click="num++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {num: 100}})</script>
</body>

这样我们就实现了利用按钮控制数字的一个效果

因为事件需要经常注册，所以 Vue 为我们提供了简写的方法：

@EVETN，比如上面的例子中就可以通过 @click 来实现相同的逻辑

2.4.1 methods 中的函数

下面再来看第二种方式：我们想要做一个点击实现显示或者隐藏的功能就可以通过如下的方式实现，但是当我们写出下面代码的时候会发现点击出现了问题，这是因为在 JavaScript 函数中，写一个未声明的变量，会直接去寻找全局变量，所以但 flg 是对象中的属性，所以应该通过 this.flg 调用

<body><div id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="flg">黑马程序员</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flg: true},methods: {fn () {if (this.flg) {// flg = false; 是错误的this.flg = false;} else {this.flg = true;}}}})</script>
</body>

2.4.1 参数传递

如果我们想要在调用函数的时候传递参数，就需要用到参数传递的写法

语法：@EVENT="F(传递的参数)"

比如我们想实现上面的功能，点击购买物品的时候减少钱数，对于这种逻辑完全相同的处理可以通过一个函数实现，但是因为减的钱数不一样，需要向里面传递参数

代码：

<body><div id="app"><div class="box"><h3>小黑自动售货机</h3><button @click="fn (5)">可乐5元</button><button @click="fn (10)">咖啡10元</button></div><p>银行卡余额：{{money}}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {fn (a) {this.money -= a;}}    })</script>
</body>

2.5 v-bind 指令

可以帮助我们动态的设置 html 的标签属性，比如 -> src url title 等等

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

缩写形式：:属性名="表达式"

比如我们可以动态的设置图片的显示

<body><div id="app"><img :src="src" alt=""></div>
</body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {src: './imgs/10-01.png'}})</script>

我们可以通过修改 app 中的 src 来动态的修改显示的图片

2.6 v-for 指令

可以基于 数据 循环，多次 渲染整个元素

可以遍历数组、对象和数字，对象和数字用的非常少

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

其中 item 是我们拿到的每一项，index 是下标

<div id="app"><h3>小黑水果店</h3><ul><li v-for="(item, index) in list">{{item}}</li></ul></div>

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

下面来看一个案例，实现列表的渲染与删除：

效果如上图所示，当我们点击删除后就删除这条元素

<div id="app"><h3>小黑的书架</h3><ul><li v-for="(item) in booksList"><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@2.7.14/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) {this.booksList = this.booksList.filter(item => {return item.id !== id});}}})
</script>

2.7 v-for 中的 key

规范的写法是上图所示的

key的作用：给元素加上一个唯一标识，便于 Vue 及性能列表项的正确的排序复用

注意点：

  1. key 的值只能是字符串或者数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用 id 作为 key，不推荐使用可能变化的值作为 key

下面我们来看一个具体的示例，继续以上面的案例开始，我们给第一个 <li> 添加上一个背景色，看看删除的时候是如何变化的

删除

可以很明显的看到是这个标签被删除了，因为我们添加了唯一的标识，所以删除数组的元素的时候会根据这个标识来删除对应的 <li> 标签

但如果我们没有加这个 key 呢？

点击删除

那我们原来添加红色背景的这个 <li> 标签是仍然存在的，这是因为如果不加 key 的话，会默认去删除最后一个 标签，也就是当前在的标签（for 遍历到最后一个），这时候就出现了我们不想要的效果，会导致一些其他的相关问题。

2.8 v-model 指令

可以给表单元素使用，使用后可以实现双向数据绑定，可以快速的 获取 和 设置 表单元素的内容

语法：v-model="变量"

  <div id="app">账户：<input type="text" v-model="username"> <br><br>密码：<input type="password"> <br><br><button>登录</button><button>重置</button></div>

  <script>const app = new Vue({el: '#app',data: {username: ''}})</script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ftp服务器（hcia）

ftp服务器（hcia）

原理 客户端 对服务器的访问 传输和下载数据 FTP (File Transfer Protocol)–21端口 FTP传输文件有两种方法: 浏览器 软件 SFTP(Secure File Transfer Protocol)–22端口 SFTP增加了一个安全层&#xff0c;SFTP会把数据加密后进行传输&#xff0c;但更安全带来副…
阅读更多...
VSCode 如何安装插件的历史版本

VSCode 如何安装插件的历史版本

背景 在日常开发过程中&#xff0c;我们可能会遇到新版VSCode插件存在问题&#xff0c;无法正常工作的情况。这种情况下&#xff0c;一种可行的解决方案就是安装插件的历史版本。VSCode 插件默认安装的都是插件最新的版本&#xff0c;例如下面 vscode-styled-compoents 插件 本…
阅读更多...
Kubeadmin实现k8s集群：

Kubeadmin实现k8s集群：

Kubeadmin来快速搭建一个k8s集群&#xff1a; 二进制搭建适合大集群&#xff0c;50台以上的主机&#xff0c; 但是kubeadm更适合中小企业的业务集群 环境&#xff1a; Master&#xff1a;20.0.0.71 2核4G 或者4核8G docker kubelet kubectl flannel Node1&#xff1a;20.…
阅读更多...
ROS MoveIt!

ROS MoveIt!

MoveIt!是一个用于ROS的开源运动规划库&#xff0c;提供多种功能&#xff0c;包括用于运动规划的快速逆运动学分析、用于操纵的高级算法、机械手控制、动力学、控制器和运动规划。&#xff08;通过提供一个GUI来协助MoveIt!所需的各种设置&#xff0c;它允许使用RViz进行视觉反…
阅读更多...
TCP 滑动窗口

TCP 滑动窗口

滑动窗口&#xff08;Sliding window&#xff09;是一种流量控制技术。早期的网络通信中&#xff0c;通信双方不会考虑网络的拥挤情况直接发送数据。由于大家不知道网络拥塞状况&#xff0c;同时发送数据&#xff0c;导致中间节点阻塞掉包&#xff0c;谁也发不了数据&#xff0…
阅读更多...
RustDesk连接客户端提示key不匹配 Key Mismatch无法连接（已解决）

RustDesk连接客户端提示key不匹配 Key Mismatch无法连接（已解决）

环境： RustDesk1.1.9 服务端docker部署 问题描述： RustDesk连接客户端提示key不匹配 Key Mismatch无法连接 解决方案： 1.docker部署RustDesk服务检查配置 networks:rustdesk-net:external: falsevolumes:hbbr:hbbs:services:hbbs:container_name: rustdesk-hbbsport…
阅读更多...
Python入门-字符串Str

Python入门-字符串Str

字符串 字符串 是Python中的 不可变 数据类型 1.字符串相关处理方法 大小写转换 # 大小写转换 s1HelloWorld new_s2s1.lower() print(s1,new_s2)new_s3s1.upper() print(new_s3)结果&#xff1a; D:\Python_Home\venv\Scripts\python.exe D:\Python_Home\chap6\示例6-1字符…
阅读更多...
C#高级 01.Net多线程

C#高级 01.Net多线程

一.基本概念 1.什么是线程&#xff1f; 线程是操作系统中能独立运行的最小单位&#xff0c;也是程序中能并发执行的一段指令序列线程是进程的一部分&#xff0c;一个进程可以包含多个线程&#xff0c;这些线程共享进程资源进程有线程入口&#xff0c;也可以创建更多的线程 2.…
阅读更多...
关于Zoom ZTP和AudioCodes Ltd桌面电话缺陷暴露，导致用户遭受窃听的动态情报

关于Zoom ZTP和AudioCodes Ltd桌面电话缺陷暴露，导致用户遭受窃听的动态情报

一、基本内容 近期SySS安全研究员发布分析报告显示&#xff0c;Zoom的零接触&#xff08;ZTP&#xff09;和AudioCodes Ltd桌面电话配置功能中发现高危漏洞&#xff0c;可以获得对设备的完全远程控制并不受限制的访问可以被武器化&#xff0c;以窃听房间或电话、通过设备并攻击…
阅读更多...
华为鸿蒙（HarmonyOS）介绍

华为鸿蒙（HarmonyOS）介绍

华为鸿蒙&#xff08;HarmonyOS&#xff09;介绍 华为鸿蒙&#xff08;HarmonyOS&#xff09;是一款由华为自主研发的操作系统&#xff0c;旨在为各种智能设备提供一种统一、高效、安全的解决方案。鸿蒙系统基于微内核架构&#xff0c;可以应用于多种类型的设备&#xff0c;鸿…
阅读更多...
快速上手makefile自动化构建工具

快速上手makefile自动化构建工具

makefile自动化构建工具 文章目录 makefile自动化构建工具 makefile背景 简单认识makefile 依赖关系与依赖方法 生成项目 清理项目 ACM时间 语法补充 .PHONY修饰 特殊符号替换 Makefile的推导过程 总结 前言&#xff1a; 在windows下&#xff0c;很多东西都是编译器直接帮你做…
阅读更多...
docker学习笔记01-安装docker

docker学习笔记01-安装docker

1.Docker的概述 用Go语言实现的开源应用项目&#xff08;container&#xff09;&#xff1b;克服操作系统的笨重&#xff1b;快速部署&#xff1b;只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统&#xff1b;Docker通过隔离机制&#xff0c;每个容器间是互相隔离…
阅读更多...
Kafka学习笔记1（千峰教育）

Kafka学习笔记1（千峰教育）

Kafka学习笔记1&#xff08;千峰教育&#xff09; 一、为什么使用消息队列1.使用同步的通信方式来解决多个服务之间的通信2.使用异步的通信方式 二、消息队列的流派1.有broker2.无broker 三、Kafka的基本知识1.Kafk2a的安装2.Kafka中的一些基本概念3.创建topic4.发送消息5.消费…
阅读更多...
通过讯飞 API 接口用 Vue 实现实时语音转写

通过讯飞 API 接口用 Vue 实现实时语音转写

通过讯飞 API 接口用 Vue 实现实时语音转写 项目地址 前言 本项目中实时语音能够转写的最大时间为 60 s&#xff0c; 这个数据也是由 API 提供方给限制掉的 为什么我会需要这个点击按钮以后能够实现实时语音的转写呢&#xff0c;因为被课程所迫&#xff0c;选了这个方向就必…
阅读更多...
百度每天20%新增代码由AI生成，Comate SaaS服务8000家客户 采纳率超40%

百度每天20%新增代码由AI生成，Comate SaaS服务8000家客户 采纳率超40%

12月28日&#xff0c;由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023在北京召开。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰现场公布了飞桨文心五载十届最新生态成果&#xff0c;文心一言最新用户规模破1亿&#xff0c;截…
阅读更多...
Leetcode 763 划分字母区间

Leetcode 763 划分字母区间

题意理解&#xff1a; 要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度的列表。 输入&#xff…
阅读更多...
【头歌实训】kafka-入门篇

【头歌实训】kafka-入门篇

文章目录 第1关&#xff1a;kafka - 初体验任务描述相关知识Kafka 简述Kafka 应用场景Kafka 架构组件kafka 常用命令 编程要求测试说明答案代码 第2关&#xff1a;生产者 &#xff08;Producer &#xff09; - 简单模式任务描述相关知识Producer 简单模式Producer 的开发步骤Ka…
阅读更多...
VS Code 运行 Python

VS Code 运行 Python

介绍 Python&#xff1a; 是一种强大的编程语言&#xff0c;具有广泛的应用领域&#xff0c;可以用于开发 Web 应用、数据分析、人工智能、科学计算等多种领域。 VS Code&#xff1a; 是由微软开发的免费开源代码编辑器&#xff0c;可以在多个平台上运行。具有丰富的扩展功能…
阅读更多...
每日一题--------求数字的每⼀位之和

每日一题--------求数字的每⼀位之和

大家好今天的每日一题又来了&#xff0c;有啥不对的请在评论区留言哦 文章目录 目录 文章目录 求数字的每⼀位之和 题⽬描述&#xff1a; 输⼊⼀个整数m&#xff0c;求这个整数m的每⼀位之和&#xff0c;并打印。 一、解题思路 我们可以通过不断获取该整数的个位数&#xff0c…
阅读更多...
Python+OpenCV 零基础学习笔记(4-5):计算机图形基础+Python相对文件路径+OpenCV图像+OpenCV视频

Python+OpenCV 零基础学习笔记(4-5):计算机图形基础+Python相对文件路径+OpenCV图像+OpenCV视频

文章目录 相关链接运行环境前言计算机图形OpenCV简单使用图形读取文件读取可能会出现的问题&#xff1a;路径不对解决方案其它路径问题解决方案 图像显示保存OpenCV视频视频素材如何获取&#xff1f;简单视频读取 相关链接 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023