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

雾眠气泡水:)

已于 2024-01-29 20:46:38 修改

阅读量2k

点赞数 40

分类专栏： Vue 文章标签：前端 Vue 基本使用

于 2024-01-28 23:41:44 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44378854/article/details/135887342

版权

本文介绍了如何使用Vue3进行快速入门，包括v-for遍历数组、v-bind动态绑定属性、v-if/v-show条件渲染、v-on绑定事件和v-model双向数据绑定。此外，还涉及了Vue的生命周期和使用Axios进行Ajax请求的实战示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章