Vue3学习（后端开发）

翰戈.summer2023-12-25 8:33

目录

一、安装Node.js

二、创建Vue3工程

三、用VSCode打开

四、源代码目录src

五、入门案例------手写src

六、测试案例

七、ref和reactive的区别

一、安装Node.js

下载20.10.0 LTS版本

https://nodejs.org/en

使用node命令检验安装是否成功

XML 复制代码 
node

二、创建Vue3工程

在桌面右键打开终端，输入创建命令。

XML 复制代码 
npm create vue@latest

输入项目名称，用小写字母和数字，用 _ 或 - 分隔。

接下来就是一些选项配置，这里只选使用TypeScript语法。

到这里Vue3项目就创建好了，可以在桌面上找到。

三、用VSCode打开

使用VSCode打开刚才建好的项目

这里会推荐两个官方插件，点击安装即可。

打开env.d.ts文件，发现报错，原因是没有下载依赖。

打开终端，使用npm i命令下载依赖。

XML 复制代码 
npm i

新增了一个node_modules目录

下载好后重新打开VSCode

项目中的index.html文件是入口文件，类似于SpringBoot项目中的启动类。

我们先将index.html文件里面的内容全部注释，然后自己简单的写一个html页面。

打开终端，使用npm run dev命令启动项目。

XML 复制代码 
npm run dev

按住Ctrl键然后单击http://localhost:5173/打开

四、源代码目录src

和后端项目一样，src目录用于存放源代码。

在入口文件index.html 中，引入了src 目录下的main.ts文件。

main.ts文件内容

其中import的作用就是导入，类似于Java中的导包。

TypeScript 复制代码 
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

导入样式

TypeScript 复制代码 
import './assets/main.css'

从vue中导入createApp，然后下面就能用createApp了。

TypeScript 复制代码 
import { createApp } from 'vue'

导入App组件，App组件是根组件，我们写的其他组件放到根组件中。

TypeScript 复制代码 
import App from './App.vue'

用根组件App创建应用，挂载到一个id为app的容器中。

TypeScript 复制代码 
createApp(App).mount('#app')

这个id为app的容器就在index.html中

components 目录存放我们自己写的组件，这些组件要引入到App.vue 根组件中，assets目录里面是一些样式。

在src 中main.ts 和App.vue是必不可少的

五、入门案例------手写src

创建src目录，新建main.ts和App.vue

main.ts

TypeScript 复制代码 
// 引入createApp用于创建应用
import { createApp } from 'vue'
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

在**.vue**文件中可以写什么呢？

html 复制代码 
<template>
    <!-- html -->
</template>

<script lang="ts">
    // JS或TS
</script>

<style>
    /* 样式 */
</style>

Person.vue

我们在src 中创建components 目录，存放我们自己写的组件Person.vue ，然后引入到App.vue根组件中。

html 复制代码 
<template>
    <div class="app">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showNumber">查看联系方式</button>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'

    let name = ref('艾伦')
    let age = ref(20)
    let number = '12345678910'

    function changeName() {
        name.value += '~'
    }

    function changeAge() {
        age.value += 1
    }

    function showNumber() {
        alert(number)
    }
</script>

<style>
    .app {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

App.vue

在App.vue中不写内容，而是引入其他组件。

html 复制代码 
<template>
    <Person/>
</template>

<script lang="ts">
    import Person from './components/Person.vue'

    export default {
        name: 'App',
        components: { Person }
    }
</script>

<style>

</style>

在Person.vue 中**<script>** 标签里面的写法和Java相似

import导包，name、age、number是属性，changeName()、changeAge()、showNumber()是方法。

这里用到了ref ，ref是vue里面的，我们要用的话就要先引入进来。ref() 是一个方法，可以将基本类型 的数据或者是对象类型 的数据变成响应式数据。

**响应式数据：**简单理解，如果代码里面的数据改变了，那么展示在页面中的相应数据也要做出改变。

html 复制代码 
<script lang="ts" setup>
    import { ref } from 'vue'

    let name = ref('艾伦')
    let age = ref(20)
    let number = '12345678910'

    function changeName() {
        name.value += '~'
    }

    function changeAge() {
        age.value += 1
    }

    function showNumber() {
        alert(number)
    }
</script>

六、测试案例

我们将项目运行起来，在浏览器中打开。

点击对应的按钮，页面成功地做出了响应。

七、ref和reactive的区别

先来看用ref定义的数据是什么样的

还是用上面的案例，在浏览器控制台中输出name。

html 复制代码 
<template>
    <div class="app">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showNumber">查看联系方式</button>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'

    let name = ref('艾伦')
    let age = ref(20)
    let number = '12345678910'

    console.log(name)

    function changeName() {
        name.value += '~'
    }

    function changeAge() {
        age.value += 1
    }

    function showNumber() {
        alert(number)
    }
</script>

<style>
    .app {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

可以看到是一个RefImpl 对象，name的值变成了这个RefImpl 对象中的属性value的值。所以在案例中我们用name的值是用name.value，但是在插值语法 中是不用**.value**的。

插值语法：

下面就是插值语法，就是把值插进去。

html 复制代码 
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>

再来看用reactive定义的数据是什么样的

下面代码是报错了的，原因是reactive定义的数据必须是对象类型。

TypeScript 复制代码 
let name = reactive('艾伦')

定义对象类型的数据

TypeScript 复制代码 
let person = reactive({"name":"艾伦", "age":20})

查看控制台输出，可以看到是一个**Proxy(Object)**对象。

这个时候案例代码可以修改成下面这样，结果依然是一样的。

html 复制代码 
<template>
    <div class="app">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showNumber">查看联系方式</button>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive } from 'vue'

    let person = reactive({"name":"艾伦", "age":20})
    let number = '12345678910'

    console.log(person)

    function changeName() {
        person.name += '~'
    }

    function changeAge() {
        person.age += 1
    }

    function showNumber() {
        alert(number)
    }
</script>

<style>
    .app {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

那么ref 是用来定义基本类型的数据的，reactive是用来定义对象类型的数据的？

其实ref也可以定义对象类型的数据

TypeScript 复制代码 
let person = ref({"name":"艾伦", "age":20})

查看控制台输出

依然是一个RefImpl 对象，不过里面还有一个Proxy(Object) 对象，所以用ref 定义对象类型的数据本质上是用reactive。

此时案例中的代码应该修改成下面这样的

使用ref 就必须用到**.value**，在插值表达式中不需要。

html 复制代码 
<template>
    <div class="app">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showNumber">查看联系方式</button>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive } from 'vue'

    let person = ref({"name":"艾伦", "age":20})
    let number = '12345678910'

    console.log(person)

    function changeName() {
        person.value.name += '~'
    }

    function changeAge() {
        person.value.age += 1
    }

    function showNumber() {
        alert(number)
    }
</script>

<style>
    .app {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

总结

ref用来定义：基本类型的数据、对象类型的数据

reactive用来定义：对象类型的数据

使用原则

  1. 若需要一个基本类型的响应式数据，必须使用ref
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive
相关推荐
Csvn1 小时前
并发模式：让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_1 小时前
新手梳理：M3U8 线上问题，哪些是前端锅，哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt1 小时前
Linear 用 1000 个 PR 换掉 styled-components，我写了 200 个按钮，把这笔账复现了一遍
前端·css·preact
波力海苔夹心脆6751 小时前
C# 序列化与反序列化详解：System.Text.Json、Newtonsoft.Json、XmlSerializer 用法、特性选项与安全实践
经验分享·后端·c#·json·.net
JavaGuide2 小时前
NVIDIA 又开源了！这次给 AI Agent 加上权限管控
前端·后端
excel2 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
莪_幻尘4 小时前
Skill 体检：30 个 Skill 全凭感觉？体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马4 小时前
AI模型综合能力评测：性能、指令遵循与多场景实测对比
前端
Frag0ut4 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03Telegram APK 下载安装完整指南 — 2026年最新04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享072026 年 9 月国内外主流大模型横向硬核评测：价格、算力、业务场景全维度对比，GPT‑6 Astra横空出世08给AI一张“业务概念地图“：本体如何从哲学走向企业智能09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的