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

文章目录

  • 1. 快速入门
  • 2. 常用指令
    • 2.1 v-for
    • 2.2 v-bind
    • 2.3 v-if 与 v-show
    • 2.4 v-on
    • 2.5 v-model
  • 3. 生命周期
  • 4. Ajax 函数库 Axios
    • 4.1 Axios 基本使用
    • 4.2 Axios 请求方式别名

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.mzph.cn/news/653992.shtml

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

相关文章

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程

Vue-Cli3 - 从安装 nodejs 配置环境 ~ 搭建 cli 脚手架项目全过程

目录 前言提示 一、安装 & 配置 nodejs 1.1、安装 nodejs 1.2、配置必要目录 1.3、配置环境变量 1.4、测试 安装&配置 是否成功 1.5、安装淘宝镜像 1.5、cnpm 安装&#xff08;推荐安装&#xff09; 二、vue-cli3 创建项目 2.1、vue-cli2 和 vue-cli3 主要区…
阅读更多...
C语言——N / 自定义类型：联合和枚举

C语言——N / 自定义类型：联合和枚举

目录 一、联合体 1、联合体类型的声明 2、联合体的特点 3、相同成员的结构体和联合体对比 4、联合体大小的计算 5、联合的一个练习 二、枚举类型 1、枚举类型的声明 2、枚举类型的优点 3、枚举类型的使用 一、联合体 1、联合体类型的声明 像结构体⼀样&#xff0c;…
阅读更多...
批量导出域控用户及其所在OU和组

批量导出域控用户及其所在OU和组

在Windows域环境中&#xff0c;批量导出域控用户及其所在OU&#xff08;组织单位&#xff09;和组成员身份信息&#xff0c;可以使用PowerShell脚本实现。以下是一个基本的示例脚本&#xff1a; Import-Module ActiveDirectory# 遍历所有用户 Get-ADUser -Filter * -Propertie…
阅读更多...
GitLab16.8配置webhooks、Jenkins2.4配置GitLab插件实现持续集成、配置宝塔面板实现持续部署（其三）

GitLab16.8配置webhooks、Jenkins2.4配置GitLab插件实现持续集成、配置宝塔面板实现持续部署（其三）

看本篇文章的前提是已经部署完GItlab和Jenkins服务器&#xff0c;已经可以手动构建成功&#xff0c;并且经过了很多次实践&#xff0c;对这两款软件基本熟悉。 建议大家按以下顺序看 前端自动化&#xff08;其一&#xff09;部署gitlab 前端自动化&#xff08;其二&#xff0…
阅读更多...
05.领域驱动设计：认识领域事件，解耦微服务的关键

05.领域驱动设计：认识领域事件，解耦微服务的关键

目录 1、概述 2、领域事件 2.1 如何识别领域事件 1.微服务内的领域事件 2.微服务之间的领域事件 3、领域事件总体架构 3.1 事件构建和发布 3.2 事件数据持久化 3.3 事件总线 (EventBus) 3.4 消息中间件 3.5 事件接收和处理 4、案例 5、总结 1、概述 在事件风暴&a…
阅读更多...
百川智能发布超千亿大模型Baichuan 3

百川智能发布超千亿大模型Baichuan 3

1月29日&#xff0c;百川智能发布超千亿参数的大语言模型Baichuan 3。在多个权威通用能力评测如CMMLU、GAOKAO和AGI-Eval中&#xff0c;Baichuan 3都展现了出色的能力&#xff0c;尤其在中文任务上更是超越了GPT-4。而在数学和代码专项评测如MATH、HumanEval和MBPP中同样表现出…
阅读更多...
【Delphi】系统菜单中增加菜单项

【Delphi】系统菜单中增加菜单项

目录 一、问题提出 二、程序截图 ​编辑 ​编辑 三、程序代码&#xff1a; 一、问题提出 我们在开发windows程序的时候&#xff0c;可能会希望在窗体的系统菜单中增加一个菜单项&#xff0c;那么如何实现呢&#xff0c;实际上通过调用windows API是可以实现的&#xff0c;…
阅读更多...
go学习之air库的使用

go学习之air库的使用

首先下载air库 go install github.com/cosmtrek/air之后你需要去找到库下载的地方&#xff0c;若使用的是go mod可以使用命令 go env GOPATH找到下载库的位置 进入后&#xff0c;有bin&#xff0c;pkg目录&#xff0c;进入bin目录&#xff0c;你能看到air.exe文件 这时候将此…
阅读更多...
备战蓝桥杯---二分（入门）

备战蓝桥杯---二分（入门）

话不多说&#xff0c;先来个模板题来回顾一下上次讲的&#xff1a; 下面是AC代码&#xff1a; 下面进入正题&#xff1a; 本题对1&#xff0c;2行与3&#xff0c;4行组合&#xff0c;再用二分查找即可实现n^2logn的复杂度。 下面是AC代码&#xff1a; 接题&#xff1a; 让我们…
阅读更多...
【更新】中国各省市是否属于“宽带中国”试点及“千兆城市”DID数据（2010-2023）

【更新】中国各省市是否属于“宽带中国”试点及“千兆城市”DID数据（2010-2023）

一、数据介绍 数据名称&#xff1a;【更新】中国各省市是否属于“宽带中国”试点及“千兆城市”DID数据 数据范围&#xff1a;全国所有地市 数据年份&#xff1a;2010-2023年 数据来源&#xff1a; “宽带中国”试点城市&#xff0c;来自工信部和国家发改委在2014年、2015…
阅读更多...
幻兽帕鲁个人服务器怎么创建？

幻兽帕鲁个人服务器怎么创建？

成功创建幻兽帕鲁服务器教程分享&#xff0c;阿里云和腾讯云均可以&#xff0c;总花费32元即可获得一台换手帕服务器4核16G配置&#xff0c;32人幻兽帕鲁服务器&#xff0c;阿腾云atengyun.com分享当前头部云厂商的Palworld服务器搭建教程&#xff0c;亲测可以&#xff01; 阿…
阅读更多...
【JavaScript基础入门】05 JavaScript基础语法（三）

【JavaScript基础入门】05 JavaScript基础语法（三）

JavaScript基础语法&#xff08;三&#xff09; 目录 JavaScript基础语法&#xff08;三&#xff09;数组概述数组语法多维数组 操作数组修改数组获取数组长度数组和字符串之间的转换添加和删除数组项 Null 和 Undefined字符串连接字符串字符串转换获取字符串的长度在字符串中查…
阅读更多...
代码随想录刷题笔记-Day13

代码随想录刷题笔记-Day13

1. 二叉树的层序遍历 102. 二叉树的层序遍历https://leetcode.cn/problems/binary-tree-level-order-traversal/层次遍历依靠队列的先进先出特点实现。 解题思路 层序遍历的本质就是对每一个pop出来的处理节点&#xff0c;处理后把他的左右节点放进去。 对于每一层来说&…
阅读更多...
Hutool改变我们的coding方式(四)

Hutool改变我们的coding方式(四)

Hutool改变我们的coding方式 1、随机工具RandomUtil2、唯一ID工具IdUtil3、身份证工具IdcardUtil4、信息脱敏工具DesensitizedUtil 测试代码地址&#xff1a;https://gitee.com/Augenstern-creator/kuang-study_-hutools 1、随机工具RandomUtil RandomUtil主要针对JDK中Rando…
阅读更多...
技法和原理：如何找到你需要的菜单项?

技法和原理：如何找到你需要的菜单项?

你一定碰到过查找某个菜单项的场景&#xff0c;通常我们会使用类似于 GetMenuItemInfo 这样的菜单函数&#xff0c; 在这类函数中&#xff0c;有一个参数允许你指定要查找的菜单项目的信息&#xff1a;MF_BYPOSITION 或者 MF_BYCOMMAND。 至此&#xff0c;是不是很眼熟了。今天…
阅读更多...
一定用得到的时频分析方法！广义S变换、小波变换、短时傅里叶变换（STFT）、Wigner-Ville 分布，直接运行！

一定用得到的时频分析方法！广义S变换、小波变换、短时傅里叶变换（STFT）、Wigner-Ville 分布，直接运行！

适用平台&#xff1a;Matlab2020版本及以上 在实际应用中&#xff0c;时频分析通常与机器学习/深度学习技术结合&#xff0c;以提高故障识别的性能。时频分析可以捕捉信号在时间和频率上的瞬时变化&#xff0c;有助于检测到与故障相关的瞬时特征&#xff0c;如脉冲、振动或其它…
阅读更多...
༺༽༾ཊ—Unity之-05-抽象工厂模式—ཏ༿༼༻

༺༽༾ཊ—Unity之-05-抽象工厂模式—ཏ༿༼༻

首先创建一个项目&#xff0c; 在这个初始界面我们需要做一些准备工作&#xff0c; 建基础通用文件夹&#xff0c; 创建一个Plane 重置后 缩放100倍 加一个颜色&#xff0c; 任务&#xff1a;使用 抽象工厂模式 创建 人物与宠物 模型&#xff0c; 首先资源商店下载 人物与宠物…
阅读更多...
智能语音识别源码系统+语义理解+对话管理+语音合成 带完整的搭建教程

智能语音识别源码系统+语义理解+对话管理+语音合成 带完整的搭建教程

人工智能技术的不断发展&#xff0c;智能语音识别技术逐渐成为人们日常生活和工作中不可或缺的一部分。然而&#xff0c;目前市场上的智能语音识别产品大多存在一定的局限性&#xff0c;如识别率不高、功能单一等。为了解决这些问题&#xff0c;罗峰给大家分享一款基于智能语音…
阅读更多...
Ps：段落面板

Ps：段落面板

Ps菜单&#xff1a;窗口/段落 Window/Paragraph Ps菜单&#xff1a;文字/面板/段落面板 Type/Panels/Paragraph Panel 对于“点文本”&#xff0c;默认一行为一个段落。每按一次回车键&#xff0c;就多出一个段落。 对于“段落文本”&#xff0c;一段可能有多行&#xff0c;具体…
阅读更多...
汽车网络安全管理体系框架与评价-汽车网络安全管理体系评价

汽车网络安全管理体系框架与评价-汽车网络安全管理体系评价

当前 &#xff0c; 随若汽车联网产品渗透率、 智能传感设备搭载率的提升&#xff0c; 以及汽车与通信、互联网等行业的融合创新发展&#xff0c; 汽车行业面临愈发严峻的网络安全风险&#xff0c; 对消费者人身财产安全、 社会安全乃至国家安全产生威胁&#xff0c; 是产业发展…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023