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 控制台：

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JVM系列——对象管理

JVM系列——对象管理

JVM对象分布 对象头 第一类是用于存储对象自身的运行时数据&#xff0c;如哈希码&#xff08;HashCode&#xff09;、GC 分代年龄、锁状态标志、线程持有的锁、偏向线程 ID、偏向时间戳等 另外一部分是类型指针&#xff0c;即对象指向它的类型元数据的指针&#xff0c;Java 虚…
阅读更多...
【ArcGIS微课1000例】0096：dem三维块状表达（层次地形模型）

【ArcGIS微课1000例】0096：dem三维块状表达（层次地形模型）

文章目录 一、DEM表达方式二、层次模型表达三、注意事项一、DEM表达方式 DEM数字高程模型的表达方式通常有以下4种： 1. 规则格网 2. 不规则三角网 3. 等高线 4. 层次地形模型 作为栅格地理数据，DEM 数据具有2.5维的特征，能够以三维表面的形式进行三维空间表达。但受其数…
阅读更多...
Web 开发 6：Redis 缓存（Flask项目使用Redis并同时部署到Docker详细流程 附项目源码）

Web 开发 6：Redis 缓存（Flask项目使用Redis并同时部署到Docker详细流程 附项目源码）

大家好&#xff01;欢迎来到第六篇 Web 开发教程&#xff0c;今天我们将探讨一个非常重要的话题&#xff1a;Redis 缓存。作为一个互联网开发者&#xff0c;你一定知道在处理大量请求时&#xff0c;性能优化是至关重要的。而 Redis 缓存正是帮助我们提升系统性能的利器。Redis …
阅读更多...
爬虫基础-计算机网络协议

爬虫基础-计算机网络协议

一个数据的传输 这些设备的数据转发是通过协议来完成的&#xff0c;整个互联网可以说是完全由网络协议来维持的 不同的协议分工不同&#xff0c;比如ip协议确保了ip寻址&#xff0c;tcp协议确保了数据完整性 IP地址和URL ip地址 整个网络传输可以比作快递&#xff0c;数据就…
阅读更多...
2023年度总结——忙忙碌碌，终有归章

2023年度总结——忙忙碌碌，终有归章

思来想去&#xff0c;还是决定写一篇年终总结&#xff0c;一来算是对23年的一年的回顾&#xff0c;二来是对24年的展望。记得22年也写过一篇年度总结&#xff0c;题目是《2022年度总结——一切都在慢慢变好》。今年&#xff0c;我想起的题目是《2023年度总结——忙忙碌碌&#…
阅读更多...
在Temu跨境电商平台上，如何快速出单？

在Temu跨境电商平台上，如何快速出单？

随着越来越多的商家选择入驻Temu跨境电商平台&#xff0c;一旦入驻申请通过&#xff0c;商家就可以开始上架商品并等待订单的产生。然而&#xff0c;很多新手跨境电商卖家都面临一个共同的问题&#xff0c;那就是&#xff1a;Temu出单快吗&#xff1f;Temu上架多久能出单&#…
阅读更多...
STM32CubeMX教程27 SDIO - 读写SD卡

STM32CubeMX教程27 SDIO - 读写SD卡

目录 1、准备材料 2、实验目标 3、轮询方式读取SD卡流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.0、工程基本配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.0、配置Project Manager页面 3.2.1、外设初始化调用流程 3.2.2、外设中断调用流…
阅读更多...
激光雷达，角力「降本增效」

激光雷达，角力「降本增效」

高工智能汽车研究院最新发布的数据显示&#xff0c;2023年1-11月&#xff0c;中国市场&#xff08;不含进出口&#xff09;乘用车前装标配激光雷达搭载量为46.48万颗&#xff0c;同比增长372.35%&#xff0c;继续保持高增长态势。 随着激光雷达在中国市场完成规模化上量的节点&…
阅读更多...
Promethues是什么？

Promethues是什么？

什么是Prometheus&#xff1f; Prometheus是一个开源的系统监控以及报警系统。整和zabbix的功能&#xff0c;系统&#xff0c;网络&#xff0c;设备。 promethues可以兼容网络、设备、容器监控、告警系统。因为和k8s是一个项目基金开发的产品&#xff0c;天生就匹配k8s的原生…
阅读更多...
离线安装nginx_银河麒麟系统_nginx报错_503_500 Internal Server Error----nginx工作笔记007

离线安装nginx_银河麒麟系统_nginx报错_503_500 Internal Server Error----nginx工作笔记007

如果报这个错误,意思就是,对于nginx.conf文件中指定的,文件夹没有权限 那么这个是去给对应的文件夹赋权限: chmod 777 /opt/module/test_web 就可以了,然后再去访问就不会报错了,还有 503的错误都可以这样解决 然后关于离线安装nginx,尝试了一下如果把之前安装过的nginx,直接…
阅读更多...
AI-数学-高中-10-2-分数指数幂计算

AI-数学-高中-10-2-分数指数幂计算

原作者视频&#xff1a;初等函数】2分数指数幂的计算&#xff08;基础&#xff09;_哔哩哔哩_bilibili 方法1&#xff1a; 方法2&#xff1a;
阅读更多...
Matlab绘图技巧-NAN元素绘图出现锯齿状解决办法

Matlab绘图技巧-NAN元素绘图出现锯齿状解决办法

Matlab绘图技巧-NAN元素绘图出现锯齿状解决办法 想必有很多同学遇到绘制3维曲面热力图&#xff0c;有一些数据是nan&#xff0c;绘制出来的图会出现锯齿状&#xff1a;如下图&#xff1a;    如果用matlab直接绘制带nan的矩阵的话&#xff0c;则会像上图一样&#xff0c;当然…
阅读更多...
【教程】iOS 手机抓包工具介绍及教程

【教程】iOS 手机抓包工具介绍及教程

&#x1f4f1; 最近又发现APP Store一款宝藏软件&#xff0c;克魔助手抓包工具&#xff0c;app刚上架&#xff0c;功能不断迭代中&#xff0c;目前18软妹币实惠价可享受终身版&#xff01;现在是下手的最好时机。 引言 移动端开发中&#xff0c;抓包工具已成为必备的工具之一…
阅读更多...
电脑文件夹怎么加密保护？文件夹加密软件推荐

电脑文件夹怎么加密保护？文件夹加密软件推荐

电脑文件夹可以帮助我们管理各种文件&#xff0c;而文件夹加密则可以有效地保护数据安全。那么&#xff0c;电脑文件夹该怎么加密保护呢&#xff1f;下面我们就一起来了解一下。 超大文件夹加密 电脑中会有一些存放着视频、图纸等大文件的文件夹。这些文件夹体积庞大&#xff…
阅读更多...
面试官：Mysql中EXISTS与IN的使用有哪些差异

面试官：Mysql中EXISTS与IN的使用有哪些差异

在数据库查询优化中&#xff0c;查询效率直接关系到应用程序性能。其中&#xff0c;IN和EXISTS是两种常见的子查询操作符&#xff0c;广泛应用于SQL查询语句&#xff0c;但它们在执行效率上有所不同。 本文深入探讨IN和EXISTS的工作原理&#xff0c;以及在何种情境下选择更为合…
阅读更多...
QGIS使用地理配准将3857坐标系转成上海城建坐标

QGIS使用地理配准将3857坐标系转成上海城建坐标

控制点格式 如 mapX mapY sourceX sourceY enable dX dY residual -58653 70641 13452659.39 3746386.025 1 0 0 0 -58653 65641 13452693.09 3740477.283 1 0 0 0 ......保存为.points格式 图层预处理 图层投影为3857坐标系 地理配准 1. 打开图层-地理配准 工具 2. 导入…
阅读更多...
ATAC-seq发篇测序文章就结束了吗？看如何利用ATAC-seq数据为后续关键基因的转录调控研究提供重要依据

ATAC-seq发篇测序文章就结束了吗？看如何利用ATAC-seq数据为后续关键基因的转录调控研究提供重要依据

染色质可及性&#xff08;Chromatin Accessibility&#xff09;是染色质的一种特性&#xff0c;为转录因子结合靶基因提供了空间。转座酶可及染色质测序分析&#xff08;ATAC-seq&#xff09;是常见的研究染色质可及性的方法&#xff0c;ATAC-seq联合RNA-seq是一种新的研究思路…
阅读更多...
day10 Javaweb

day10 Javaweb

第一章 WEB概述 1.1 JAVAWEB简介 用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念 客户端 :与用户进行交互&#xff0c;用于接收用户的…
阅读更多...
解决ubuntu 在VMware Workstation Pro下显示不完整的问题

解决ubuntu 在VMware Workstation Pro下显示不完整的问题

步骤一 ctrlaltT 打开终端&#xff0c;输入&#xff1a; xrandr -s 1920x1080如果报错就输入xrandr,从里面选择适合的分辨率 注意是字母x不是乘号 步骤二 按win键&#xff0c;在搜索框搜索resolution更改显示器分辨率&#xff1a; 选择与电脑相同的分辨率&#xff0c;点击…
阅读更多...
（二十一）Flask之上下文管理第二篇（细细扣一遍源码）

（二十一）Flask之上下文管理第二篇（细细扣一遍源码）

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…
阅读更多...
最新文章

Copyright @ 2022~2023