2.【Vue3】Vue 基本使用——局部使用Vue

1. 快速入门

现在需要将 “hello vue3” 这样一个字符串渲染到页面上进行展示。

在这里插入图片描述

这个需求并不陌生，可以使用原生 JS 代码完成：

let msg="hello vue3";
document.getElementById("元素的id属性值").innerHTML=msg;

接下来学习如何使用 Vue 来完成该需求。

(1) 准备工作

  • 准备 html 页面，并引入 Vue 模块（官方提供）
  • 创建 Vue 程序的应用实例
  • 准备元素 (div)，被 Vue 控制

在这里插入图片描述

如何获取在线 JS 文件的地址：

在这里插入图片描述

在这里插入图片描述

(2) 构建用户界面

  • 准备数据
  • 通过插值表达式渲染页面

Vue 使用的数据都需要在调用 CreateApp() 函数时，在 {} 中声明。可以在 {} 中写一个 data() 函数，通过 return 返回需要的数据。

数据有了之后，需要将数据渲染到页面上。可以在 div 内部声明 h1 标签，在 h1 内部通过插值表达式渲染到页面上进行展示。插值表达式就是两层 {}，内部写的是数据的键名。

在这里插入图片描述

浏览器呈现的效果：

在这里插入图片描述

2. 常用指令

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

2.1 v-for

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

比如：现在有一个数组数据 articleList，里面存放了给个文章的信息，每个文章的信息都是用一个 json 对象表示的。将来可以借助 v-for 指令快速遍历 articleList 数组容器，然后把该容器中的内容渲染到表格中展示：

在这里插入图片描述

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

参数说明：

  • items 为遍历的数组
  • item 为遍历出来的元素（起什么名都可，见名知义）
  • index 为索引 / 下标，从 0 开始；index 可以省略，省略 后的语法： v-for = "item in items"

为了演示如何用 v-for 进行列表渲染，我们准备好了一份 html，里面是一个表格，表格中现在是写死的数据：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr><td>标题1</td><td>分类1</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr></table></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建应用实例createApp({data() {return {}}}).mount("#app")//控制页面元素</script>
</body>
</html>

在这里插入图片描述
代码现在的宏观结构式这样的：

在这里插入图片描述

按照前面的知识，我们先要在 data() 函数中准备数据，然后渲染到页面中。

在这里插入图片描述

【注意】遍历的数组，必须在 data 中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

浏览器展示结果：

在这里插入图片描述

2.2 v-bind

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

比如页面上展示的这个超链接：点击后跳转的网址是通过 href 属性设置的，可以在 a 标签上直接指定 href 的值。有了 v-bind 后，可以把某个变量的值，如 url 变量，动态地绑定给 a 标签的 href 属性

在这里插入图片描述

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

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

示例：

在这里插入图片描述

浏览器展示结果：

在这里插入图片描述

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

2.3 v-if 与 v-show

作用：根据条件来控制元素的显示和隐藏

举个例子，页面上需要展示手链的价格，这里的价格有三种：9.9、19.9、29.9，这样设置的目的是为了根据用户不同的消费水平来展示不同的价格。类似这样的需求就可以使用 v-if 或 v-show 来完成。

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

v-show
语法：v-show="表达式"，表达式值为 true 就显示，为 false 就隐藏
原理：基于 CSS 样式 display 来控制显示与隐藏，如果不显示就是这个元素隐藏了，并不是没有
场景：频繁切换显示隐藏的场景

示例及浏览器展示效果：

在这里插入图片描述

按 F12，验证 v-if 和 v-show 的原理：

在这里插入图片描述

下面这个需要频繁切换的场景就适合用 v-show：

在这里插入图片描述

2.4 v-on

作用：为 HTML 标签绑定事件

举个例子，页面上有两个按钮，当用户点击“点我有惊喜”时，弹出一个弹窗；点击“再点更惊喜”时，还需要弹出一个弹窗。要完成这个需求就需要给按钮绑定单击事件，使用 v-on 来实现。

在这里插入图片描述
语法：v-on:事件名="函数名"，简写为 @事件名="函数名"

这里的函数是有要求的，Vue 中用到的所有函数都需要定义到 method 选项中，就像用到的数据都要定义到 data() 函数中一样。method 和 data 是同级的，用 , 隔开：

createApp({ data(){需要用到的数据}, methods:{需要用到的方法} })

示例：

在这里插入图片描述

浏览器展示效果：

在这里插入图片描述
在这里插入图片描述

2.5 v-model

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

比如：根据"文章分类"和"发布状态"来搜索对应的文章时，当用户填写好这两个条件后，点击搜索，我们就需要获取到用户在表单项中填写的条件，并把条件发送到后台完成搜索。使用 v-model 完成了表单数据的双向绑定之后，想要获取用户在表单项中填写的数据就会非常方便。

在这里插入图片描述
语法：v-model="变量名"
注意：v-model 中绑定的变量，必须在 data 中定义

使用 v-model 可以把 category 和 state 分别与"文章分类"和"发布状态"两个表单项绑定起来。这个绑定是双向的，数据发生变化时，视图会随之变化；视图发生变化时，数据也会随之变化。

在这里插入图片描述

示例：视图中表单内容的变化，能传给数据（数据通过 span 标签在页面上展示出来了）

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

示例：数据的变化，能传给视图中的表单

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3. 生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子), 让开发者有机会在特定的阶段执行自己的代码。

下图中，红框中是钩子函数：

在这里插入图片描述

这么多钩子函数中，只需记住一个 mounted 函数。mounted 函数一般用于在页面加载完毕时，发起异步请求，获取数据，以便将来把这些数据渲染到页面上展示。

钩子函数不是声明在 methods 中，而是跟 data、methods 同级。

示例：

在这里插入图片描述

F12 打开控制台：

在这里插入图片描述

4. Ajax 函数库 Axios

上节学习了 Vue 生命周期，一个典型应用就是在 Vue 挂载完成后，在 mounted 函数中发送请求，获取页面需要展示的数据。发送请求时需要用到 Ajax 相关的知识。

在这里插入图片描述

Axios 对原生的 Ajax 进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/

4.1 Axios 基本使用

(1) 引入Axios 的 js 文件（参照官网）
(2) 使用 Axios 发送请求，并获取相应结果。具体来说，调用 axios 函数，用 {} 传参，其中：

  • method：请求方式，GET / POST…
  • url：请求路径
  • data：请求数据，如果有就指定

在这里插入图片描述

如果记不住 Axios 的 js 文件，可以这样获取：

在这里插入图片描述

在这里插入图片描述

下面通过一个示例来加深理解：

后台代码

pojo 类：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article {private String title;private String category;private String time;private String state;}

Controller：

@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {private List<Article> articleList = new ArrayList<>();//在构造代码块中提前向 articleList 中添加了三篇文章{articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));}//新增文章@PostMapping("/add")public String add(@RequestBody Article article) {articleList.add(article);return "新增成功";}//获取所有文章信息@GetMapping("/getAll")public List<Article> getAll(HttpServletResponse response) {return articleList;}//根据文章分类和发布状态搜索@GetMapping("/search")public List<Article> search(String category, String state) {return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());}
}

前端代码

请求1：获取所有文章的列表

<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 发送请求axios({method: "get",url: "http://localhost:8080/article/getAll"}).then(result=>{// 成功的回调// result代表服务器响应的所有数据，包括响应头、响应体// result.data代表接口响应过来的核心数据console.log(result.data);}).catch(err=>{// 失败的回调console.log(err);});</script>
</body>

使用 Axios 确实访问到了后台接口，拿到了数据：

在这里插入图片描述

请求2：新增文章

<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>let article={// 准备请求数据title: "明天会更好",category: "生活",time: "2000-01-01",state: "草稿"}// 发送请求axios({method: "post",url: "http://localhost:8080/article/add",data: article}).then(result=>{// 成功的回调// result代表服务器响应的所有数据，包括响应头、响应体// result.data代表接口响应过来的核心数据console.log(result.data);}).catch(err=>{// 失败的回调console.log(err);});</script>
</body>

F12 控制台：

在这里插入图片描述

4.2 Axios 请求方式别名

为了方便起见，Axios 已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [,data] [,config])

上面的“”请求方式“就是一个函数，只不过这个函数的名称与请求方式名称相同。

url 是必传参数，其余都是可选参数

请求示例 1：获取所有文章的列表

<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 发送请求axios.get("http://localhost:8080/article/getAll").then(result=>{// 成功的回调// result代表服务器响应的所有数据，包括响应头、响应体// result.data代表接口响应过来的核心数据console.log(result.data);}).catch(err=>{// 失败的回调console.log(err);});</script>
</body>

F12 控制台：

在这里插入图片描述

请求示例 2：新增文章

<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>// 准备请求数据let article={title: "明天会更好",category: "生活",time: "2000-01-01",state: "草稿"}// 发送请求axios.post("http://localhost:8080/article/add",article).then(result=>{// 成功的回调// result代表服务器响应的所有数据，包括响应头、响应体// result.data代表接口响应过来的核心数据console.log(result.data);}).catch(err=>{// 失败的回调console.log(err);});</script>
</body>

F12 控制台：

在这里插入图片描述

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

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

相关文章

麒麟系统—— openKylin 安装 mongodb

麒麟系统—— openKylin 安装 mongodb

麒麟系统—— openKylin 安装 mongodb 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。 二、下载解压 MongoDB二、增加环境变量三、配置MongoDB创建数据目录创建日志文件运行 四、加入到服务中 MongoDB是一款高性能、开源的NoSQL数据库&#xff0c;因其灵活的数据结构、…
阅读更多...
机器学习：梯度下降法（Python）

机器学习：梯度下降法（Python）

LinearRegression_GD.py import numpy as np import matplotlib.pyplot as pltclass LinearRegression_GradDesc:"""线性回归&#xff0c;梯度下降法求解模型系数1、数据的预处理&#xff1a;是否训练偏置项fit_intercept&#xff08;默认True&#xff09;&…
阅读更多...
【面试】测试开发面试题

【面试】测试开发面试题

帝王之气&#xff0c;定是你和万里江山&#xff0c;我都护得周全 文章目录 前言1. 网络原理get与post的区别TCP/IP各层是如何传输数据的IP头部包含哪些内容TCP头部为什么有浮动网络层协议1. 路由协议2. 路由信息3. OSPF与RIP的区别Cookie与Session&#xff0c;Token的区别http与…
阅读更多...
解决Linux部署报错No main manifest attribute, in XXX.jar

解决Linux部署报错No main manifest attribute, in XXX.jar

这是我近期遇到的一个问题&#xff0c;报错原因就是没找到主类&#xff0c;首先你在你本地运行&#xff0c;本地运行ok的话&#xff0c;解压生成的jar包&#xff0c;里面有个META-INF文件&#xff0c;打开MANIFEST.MF文件&#xff0c;该文件是一个清单文件。该文件包含有关JAR文…
阅读更多...
11. 双目视觉之立体视觉基础

11. 双目视觉之立体视觉基础

目录 1. 深度恢复1.1 单目相机缺少深度信息1.2 如何恢复场景深度&#xff1f;1.3 深度恢复的思路 2. 对极几何约束2.1 直观感受2.2 数学上的描述 1. 深度恢复 1.1 单目相机缺少深度信息 之前学习过相机模型&#xff0c;最经典的就是小孔成像模型。我们知道相机通过小孔成像模…
阅读更多...
汽车网络安全dos, someip

汽车网络安全dos, someip

汽车Cyber Security入门之DoS 攻防 - 知乎 3、SOME/IP-TP 近年来火热地谈论下一代EE架构和SOA的时候&#xff0c;总离不开SOME/IP这个进程间通讯协议。在许多应用场景中&#xff0c;需要通过UDP传输大型的SOME/IP有效载荷。鉴于在以太网上传输数据包的大小限制&#xff0c;SO…
阅读更多...
Linux文件管理（下）

Linux文件管理（下）

上上篇介绍了Linux文件管理的上部分内容&#xff0c;这次继续将 Linux文件管理的剩余部分说完。内容如下。 一、查看文件内容 1、cat 命令 1.1 输出文件内容 基本语法&#xff1a; cat 文件名称主要功能&#xff1a;正序输出文件的内容。 eg&#xff1a;输出 readme.txt文…
阅读更多...
剧本杀小程序的诞生：重塑线下娱乐的数字化未来

剧本杀小程序的诞生：重塑线下娱乐的数字化未来

随着科技的不断发展&#xff0c;人们对于娱乐方式的需求也在不断升级。近年来&#xff0c;剧本杀作为一种新型的线下社交娱乐方式&#xff0c;以其独特的魅力和深度的人际互动性&#xff0c;受到了广大年轻人的喜爱。然而&#xff0c;传统的剧本杀模式存在一些问题&#xff0c;…
阅读更多...
中间件安全

中间件安全

中间件安全 vulhub漏洞复现&#xff1a;https://vulhub.org/操作教程&#xff1a;https://www.freebuf.com/sectool/226207.html 一、Apache Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和…
阅读更多...
录屏软件哪个好？为您提供最佳选择（最新）

录屏软件哪个好？为您提供最佳选择（最新）

随着科技的进步&#xff0c;录屏软件已成为我们日常生活和工作中不可或缺的工具。无论是为了制作教程、会议记录还是游戏录像&#xff0c;一款优秀的录屏软件都是必不可少的。可是录屏软件哪个好呢&#xff1f;在本文中&#xff0c;我们将介绍两款常用的录屏软件&#xff0c;并…
阅读更多...
uniapp 实现路由拦截，权限或者登录控制

uniapp 实现路由拦截，权限或者登录控制

背景&#xff1a; 项目需要判断token&#xff0c;即是否登录&#xff0c;登录之后权限 参考uni-app官方&#xff1a; 为了兼容其他端的跳转权限控制&#xff0c;uni-app并没有用vue router路由&#xff0c;而是内部实现一个类似此功能的钩子&#xff1a;拦截器&#xff0c;由…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之CheckboxGroup组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之CheckboxGroup组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之CheckboxGroup组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、CheckboxGroup组件 提供多选框组件&#xff0c;通常用于某选项的打开或关…
阅读更多...
Apollo Cyber RT：引领实时操作系统在自动驾驶领域的创新

Apollo Cyber RT：引领实时操作系统在自动驾驶领域的创新

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下…
阅读更多...
【服务器】宝塔面板的使用手册

【服务器】宝塔面板的使用手册

目录 &#x1f337;概述 &#x1f33c;1. 绑定域名 &#x1f33c;2. 添加端口 &#x1f33c;3. 安装docker配置docker​​​​​​​ &#x1f33c;4. 软件商店 &#x1f33c;5. 首页 &#x1f337;概述 宝塔面板的安装教程&#xff1a;【服务器】安装宝塔面板 &#x1f…
阅读更多...
绘制太极图 - 使用 PyQt

绘制太极图 - 使用 PyQt

大家好&#xff01;今天我们将一起来探讨一下如何使用PyQt&#xff0c;这是一个强大的Python库&#xff0c;来绘制一个传统的太极图。这个图案代表着古老的阴阳哲学&#xff0c;而我们的代码将以大白话的方式向你揭示它的奥秘。 PyQt&#xff1a;是什么鬼&#xff1f; 首先&a…
阅读更多...
Modelarts零代码体验，一键实现工地钢筋盘点，建筑提效新思维

Modelarts零代码体验，一键实现工地钢筋盘点，建筑提效新思维

前言 最近家附近的好几块地&#xff0c;同时在进行房产开发建设&#xff0c;早晚都能看到建筑师傅们在忙碌。 某天&#xff0c;夜跑中&#xff0c;发现前方的建筑工地&#xff0c;师傅们忙活的热火朝天&#xff0c;塔吊也在吊运钢筋中。 准备绕路的时候&#xff0c;旁边负责…
阅读更多...
解锁创意无限：Adobe Photoshop 2023(PS2023)引领设计革命

解锁创意无限：Adobe Photoshop 2023(PS2023)引领设计革命

Adobe Photoshop 2023 (PS2023)&#xff0c;作为图像处理软件的翘楚&#xff0c;以其卓越的性能和无限的可能性&#xff0c;继续引领着数字创意设计的潮流。对于设计师、摄影师、艺术家以及那些对视觉效果有高要求的人们来说&#xff0c;PS2023无疑是他们的必备工具。 在PS202…
阅读更多...
web前端项目-实现录音功能【附源码】

web前端项目-实现录音功能【附源码】

录音功能 运行效果&#xff1a;本项目可实现录音软件的录音、存储、播放等功能 HTML源码&#xff1a; &#xff08;1&#xff09;index.html&#xff1a; <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/h…
阅读更多...
算法基础课-数据结构

算法基础课-数据结构

单链表 题目链接&#xff1a;826. 单链表 - AcWing题库 思路&#xff1a;AcWing 826. 单链表---图解 - AcWing 需要注意的点在于理解ne[idx] head&#xff0c;idx表示当前的点&#xff0c;意思是将当前的点链到头结点的后面&#xff0c;再将头结点链在当前idx的前面。 #inc…
阅读更多...
Qt|大小端数据转换

Qt|大小端数据转换

后面打算写Qt关于网络编程的博客&#xff0c;网络编程就绕不开字节流数据传输&#xff0c;字节流数据的传输一般是根据协议来定义对应的报文该如何组包&#xff0c;那这就必然牵扯到了大端字节序和小端字节序的问题了。不清楚的大小端的可以看一下相关资料&#xff1a;大小端模…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023