Vue
- 一、配置环境
-
- [1.1 安装node.js](#1.1 安装node.js)
-
- [1.1.1 node.js 下载](#1.1.1 node.js 下载)
- [1.1.2 node.js 安装](#1.1.2 node.js 安装)
- [1.1.3 node.js 配置](#1.1.3 node.js 配置)
- [1.2 安装VSCode](#1.2 安装VSCode)
-
- [1.2.1 VSCode 下载](#1.2.1 VSCode 下载)
- [1.2.2 VSCode 安装](#1.2.2 VSCode 安装)
- [1.2.3 VSCode 配置](#1.2.3 VSCode 配置)
- 二、创建Vue项目
-
- [2.1 使用命令行创建Vue项目](#2.1 使用命令行创建Vue项目)
- [2.2 使用VSCode运行Vue项目](#2.2 使用VSCode运行Vue项目)
- [2.3 尝试编写Vue项目](#2.3 尝试编写Vue项目)
-
- [2.3.1 准备工作](#2.3.1 准备工作)
- [2.3.2 完成一个小任务](#2.3.2 完成一个小任务)
- [2.3.3 额外练习](#2.3.3 额外练习)
- [2.3.4 加个班,再写一个任务](#2.3.4 加个班,再写一个任务)
- [2.4 Vue 3 启动!](#2.4 Vue 3 启动!)
-
- [2.4.1 Vue 2 升级为Vue 3](#2.4.1 Vue 2 升级为Vue 3)
- [2.4.2 小小改进](#2.4.2 小小改进)
- [2.4.3 响应吧!对象与对象数组](#2.4.3 响应吧!对象与对象数组)
一、配置环境
1.1 安装node.js
1.1.1 node.js 下载
点击上面链接,即可访问node.js的官网,如下图:
![](https://file.jishuzhan.net/article/1766623680701403138/981c60320ad05175c1150fb4bcd79740.webp)
点击绿色按钮,下载node.js的安装程序。
1.1.2 node.js 安装
下载完成后,打开安装程序,会弹出以下面界面,【我下载的版本是node-v20.11.1-x64,建议版本高于10以上】
![](https://file.jishuzhan.net/article/1766623680701403138/7381ce6b4f4e6291fe30c1774e31279f.webp)
点击Next,弹出用户协议界面(经典我不清楚但同意)
![](https://file.jishuzhan.net/article/1766623680701403138/6ae33f734a34c031337a774e5172bbd6.webp)
先勾选同意,然后再点击Next,弹出安装路径界面,
![](https://file.jishuzhan.net/article/1766623680701403138/bdfa347b3be8be2bfa9aa0f6727ba101.webp)
默认是C盘,我的选择是把C盘改为D盘,其他文件路径不变,安装路径要自己可以找的到。
确定完安装路径,点击Next,弹出安装结构界面,
![](https://file.jishuzhan.net/article/1766623680701403138/e524e82ca5d4450c32f1ea0346ff7557.webp)
直接点击Next,弹出下面界面,询问要不要自动安装必须的工具。
![](https://file.jishuzhan.net/article/1766623680701403138/e5d7752b474c858bf2c2a365491dc700.webp)
不勾选,直接点击Next,弹出点击安装界面,
![](https://file.jishuzhan.net/article/1766623680701403138/600c6792454d80cf92966a5a9866a8a2.webp)
点击Install,弹出正在安装界面
![](https://file.jishuzhan.net/article/1766623680701403138/185c1df08a86baffe665eac950172a27.webp)
安装结束后点击Finish即可,到此为止,node.js算是安装成功了。
![](https://file.jishuzhan.net/article/1766623680701403138/42ed91d62b9151204ed9fe405cf504e1.webp)
安装完成后,根据自己的安装路径,找到node.js的安装位置。
![](https://file.jishuzhan.net/article/1766623680701403138/25ae2a49f76f4b51e643af6051778767.webp)
在该位置,新建node_cache
和node_global
两个文件夹。
1.1.3 node.js 配置
点击电脑中心或者我的电脑,
进入电脑中心后,鼠标右击空白处,弹出以下界面。
![](https://file.jishuzhan.net/article/1766623680701403138/914babe11073905583626c2d1f058109.webp)
点击属性,进入以下界面
![](https://file.jishuzhan.net/article/1766623680701403138/aacd08813bf0e3c9fecf1b249bbafe35.webp)
点击高级系统设置,进入下面界面
![](https://file.jishuzhan.net/article/1766623680701403138/90f93a596e5b4b6193502213a6bf17f9.webp)
点击环境变量,进入下面界面
![](https://file.jishuzhan.net/article/1766623680701403138/d026c1705901eba09623f0ca16b0fb4f.webp)
在用户变量的框中下滑,找到Path变量,双击Path变量,弹出下面界面
![](https://file.jishuzhan.net/article/1766623680701403138/dbb50a71e28131b7ff79e0b81728f947.webp)
点击新建,将下面路径输入进去,
powershell
D:\Program Files\nodejs\node_global
其中D:\Program Files\nodejs
是你的node.js的安装路径,node_global
是前面在安装步骤新建的文件夹。
如果node.js的安装路径与我选择的不一样,请将路径替换为自己的node.js的安装路径。
![](https://file.jishuzhan.net/article/1766623680701403138/2330e23b029799bfc1c356de726f57ff.webp)
输入完后点击确定,一定要点击确定,点击取消和右上角的x都是相当于没有做以上步骤。
点击确定后,会退回到以下界面。
![](https://file.jishuzhan.net/article/1766623680701403138/3a0a2115b7747a305deae4110d5eec2a.webp)
点击系统变量下面的新建,弹出下面界面
![](https://file.jishuzhan.net/article/1766623680701403138/bbc8319a321b7ff773ebb721a5c88782.webp)
变量名输入:NODE_PATH
变量值输入:D:\Program Files\nodejs\node_modules
其中,D:\Program Files\nodejs
是你的node.js的安装路径,node_modules
是node.js中的文件夹。
如果node.js的安装路径与我选择的不一样,请将路径替换为自己的node.js的安装路径。
![](https://file.jishuzhan.net/article/1766623680701403138/7930f9cbc4feaa594c660dc626e30d6f.webp)
输入完后点击确定,一定要点击确定,点击取消和右上角的x都是相当于没有做以上步骤。
点击确定后,会退回到以下界面。
![](https://file.jishuzhan.net/article/1766623680701403138/beb8a3495fe3cdf6d8597dd72d363ee4.webp)
检查一下系统变量是否有前面输入的,如果有,那就点击确定;
如果没有那就是上一步不是点击确定退出来的,而是点击取消或右上角的x退出来的,这种情况重新做上一步即可。
点击确定后,会退回的一下界面
![](https://file.jishuzhan.net/article/1766623680701403138/d61c30aa290778e0c24096deaec54444.webp)
再次点击确定,环境变量就配置完成了。
接下来,键盘按下Win+R,【Win键就是键盘左下角window图标的那个按键】打开运行界面
![](https://file.jishuzhan.net/article/1766623680701403138/7885875920bb5e875574fc35be8d13d6.webp)
输入cmd,点击确定,进入命令行界面。
![](https://file.jishuzhan.net/article/1766623680701403138/d93ace180974a5274c5bc195c03d287d.webp)
输入node,按下回车,弹出以下界面,则表示node.js安装成功!
![](https://file.jishuzhan.net/article/1766623680701403138/f43479efa13edcd040e6a0c95235bfdb.webp)
如果没有,则表示安装失败,建议重新按照上面步骤检查一遍,尤其是配置环境变量步骤,看看是不是哪里漏了或者输错了安装路径。
1.2 安装VSCode
1.2.1 VSCode 下载
点击上面链接,即可访问VSCode的官网,如下图:
![](https://file.jishuzhan.net/article/1766623680701403138/9dab1f0c86549c5dcb8b1a40439bfb65.webp)
点击Download for Window,下载VSCode。
![](https://file.jishuzhan.net/article/1766623680701403138/91473c56b89e1b917d18c4861f81fc56.webp)
1.2.2 VSCode 安装
下载完后安装即可,安装过程点击下一步,我同意之类的即可,没有什么特别的。
1.2.3 VSCode 配置
安装完成后打开VSCode,如果觉得字体小,可以按ctrl和+键,可以放大字体,相反,ctrl和-键可以缩小字体。
![](https://file.jishuzhan.net/article/1766623680701403138/09dd8254b7027f1743821bdd24a2f6f1.webp)
点击该按钮,进入扩展工具下载界面
![](https://file.jishuzhan.net/article/1766623680701403138/d488704ebf60509290450849ce99b6f6.webp)
在搜索框里输入TypeScript Vue Plugin
,点击安装【Install】,安装成功后会显示下面界面
![](https://file.jishuzhan.net/article/1766623680701403138/eb80a4f97f746482e274adaf0eb874e4.webp)
然后在搜索框输入Vue - Official
,点击安装【Install】,安装成功后会显示下面界面。
![](https://file.jishuzhan.net/article/1766623680701403138/9ea9d5517b2df96eabf2eab80dae495e.webp)
到此准备工作都结束了。
二、创建Vue项目
2.1 使用命令行创建Vue项目
在D盘创建一个文件夹,用于存放Vue项目,文件夹命名随意,路径不宜太深。
![](https://file.jishuzhan.net/article/1766623680701403138/b6071cbb94c75a4e080119a49dedc605.webp)
进入新建的文件夹,在路径处输入cmd,按下回车,进入命令行界面。
![](https://file.jishuzhan.net/article/1766623680701403138/7bfa2df246fdd60524ba807b8214d008.webp)
在命令行界面输入 npm config set registry https://registry.npm.taobao.org/
,按下回车
【npm是node.js下载时一起下载的包管理工具,用来下载node.js的扩展包。】
![](https://file.jishuzhan.net/article/1766623680701403138/3eb72efea06652544fd241a453cb9515.webp)
接着输入 npm init vue@latest
,按下回车。
【该命令表示要创建一个Vue项目工程,该命令会根据Vue自己的工程模板,调用Vue的工程创建工具Vite创建一个工程模板。】
等待一段时间,此时可能会报下面错误。
![](https://file.jishuzhan.net/article/1766623680701403138/cad2abf3b33b961567a67dd95235060a.webp)
这时输入 npm config set strict-ssl false
,来关闭npm的SSL验证。
![](https://file.jishuzhan.net/article/1766623680701403138/a2be94207a544fabb4bee235991f1ccf.webp)
关闭后再次输入 npm init vue@latest
,按下回车
![](https://file.jishuzhan.net/article/1766623680701403138/37216ce623d5adac60131982bd2751be.webp)
按下y,则开始下载。
![](https://file.jishuzhan.net/article/1766623680701403138/ea486a16a53f730a14bd02f0eeacf379.webp)
等待一段时间,下载结束后,就开始创建项目【如果没有反应,可以按一下回车】
![](https://file.jishuzhan.net/article/1766623680701403138/2fddacf05eed22e7ee9d72d992e9e857.webp)
项目名默认为vue-project,直接按下回车
![](https://file.jishuzhan.net/article/1766623680701403138/fd35a6bd7b27f35dc09582346955d811.webp)
询问是否使用TS语法,选择是。
接下来所有选择都选择否和不需要
![](https://file.jishuzhan.net/article/1766623680701403138/a89313716dd1c976b43f454b5e4361cd.webp)
所有选择都选择结束后,项目就创建成功,会显示下面界面。
![](https://file.jishuzhan.net/article/1766623680701403138/e50479076a259ae3b646be3ab9c4d9a4.webp)
此时输入cd vue-project
,进入vue-project文件夹。
![](https://file.jishuzhan.net/article/1766623680701403138/09614639050a42a1e436485e9fe6204e.webp)
输入 npm install
,就会自动下载项目所需要的扩展包了。
![](https://file.jishuzhan.net/article/1766623680701403138/78dd389458b70287658e6a1aea08cb93.webp)
等待一段时间,下载结束后会显示下面界面。
![](https://file.jishuzhan.net/article/1766623680701403138/e4d29395880721ab7f1f373c22d46578.webp)
此时可以打开前面新建的用于存放Vue项目的文件夹,发现里面多了一个vue-project的文件夹,这个文件夹就是我们建立的Vue项目
![](https://file.jishuzhan.net/article/1766623680701403138/6a9b82d945b7b2441a2a29a1a835eccc.webp)
文件夹内部情况如下图:
![](https://file.jishuzhan.net/article/1766623680701403138/f8990d5a56386c0676ace9cf619232c6.webp)
2.2 使用VSCode运行Vue项目
打开VSCode,点击打开文件夹
![](https://file.jishuzhan.net/article/1766623680701403138/f2e0649cb3f24dc4dda179e0a3cbbf59.webp)
选择前面建立的Vue项目,
![](https://file.jishuzhan.net/article/1766623680701403138/70eb15e491f2cb206808be56ced7d9e5.webp)
选择后,就可以看见前面创建的Vue项目的项目结构
![](https://file.jishuzhan.net/article/1766623680701403138/4b50b5ed724eff8af7cfc0355e1db19b.webp)
点击终端【英文模式下是 Terminal 】,点击新建终端
![](https://file.jishuzhan.net/article/1766623680701403138/970d8386081c39ef5d84cefb4827d247.webp)
在终端输入 npm run dev
,按下回车
![](https://file.jishuzhan.net/article/1766623680701403138/d01c0776e4308d3a3e238c8a08783457.webp)
按住ctrl,鼠标点击连接
![](https://file.jishuzhan.net/article/1766623680701403138/57c9fbb6b3e01197c5dbb681f55cc989.webp)
弹出下面界面,则表示Vue项目没有问题
![](https://file.jishuzhan.net/article/1766623680701403138/554b696f5d63f1ff73390a209cbeff6c.webp)
2.3 尝试编写Vue项目
2.3.1 准备工作
鼠标右击src文件夹,点击删除,将src文件夹删除。【为了方便了解Vue项目,所以先删除src文件夹,然后手动编写src文件夹里面的文件】
![](https://file.jishuzhan.net/article/1766623680701403138/da6d88db57c5e6a50f7182b790e8fb10.webp)
右击空白地方,选择新建文件夹
![](https://file.jishuzhan.net/article/1766623680701403138/5600c648758e01cf29999fbe14ae39c4.webp)
新建一个文件夹,命名为src
![](https://file.jishuzhan.net/article/1766623680701403138/4e699b8b0ff849197abfef3b93109c60.webp)
在src文件夹下,新建main.ts和APP.vue两个文件,在建立components文件夹
【main.ts是用于写ts脚本,APP.vue是vue程序的主文件,components文件夹用于存放其他Vue组件】
![](https://file.jishuzhan.net/article/1766623680701403138/a090d5be1b6df6dbced7f161b0b47392.webp)
2.3.2 完成一个小任务
任务 | 显示学生信息 |
---|---|
描述 | 显示学生的姓名,年龄,点击按钮可以修改学生的姓名、年龄和联系方式 |
项目结构
![](https://file.jishuzhan.net/article/1766623680701403138/f866b8f0aaaf14c57cdd1df65a96197b.webp)
代码如下:
main.ts 代码
typescript
import { createApp } from "vue";
import App from './App.vue'
createApp(App).mount('#app');
APP.vue 代码
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Student/>
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 使用Student就定义export
export default{
name:'App',
components:{Student}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
Student.vue 代码
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts">
export default{
name:'student',
data() {
return{
name:'张三三',
age:18,
tel:'1008611'
}
},
methods:{
changeAge(){
this.age+=1;
},
changeName(){
this.name='李四四';
},
showTel(){
alert(this.tel);
},
}
}
</script>
运行方式如下:
新建Terminal(终端),输入代码:npm run dev
![](https://file.jishuzhan.net/article/1766623680701403138/a9828c4b0c04bffac1afa790bceab0d3.webp)
ctrl+鼠标单击链接
![](https://file.jishuzhan.net/article/1766623680701403138/ced81543be4b7601a6cab49d76946323.webp)
运行结果如下:
![](https://file.jishuzhan.net/article/1766623680701403138/8d8c65cc54a0ab30deefef159c01a9ce.webp)
2.3.3 额外练习
任务 | 显示学校信息 |
---|---|
描述 | 显示学校的名字,班级数量,所在地址,老师的数量、学生数量 |
在components文件夹下新建一个School.vue 文件,按照任务描述编写代码
html
<template>
<div class="school">
<h2>名字:{{ name }}</h2>
<h2>班级数量:{{ count }}</h2>
<h2>所在地址:{{ addr }}</h2>
<h2>老师数量:{{ t_count }}</h2>
<h2>学生数量:{{ s_count }}</h2>
</div>
</template>
<script lang="ts">
export default{
name:'school',
data() {
return{
name:'福州大学',
count:40,
addr:'福建省福州市xxxxx',
t_count:10000,
s_count:1000000
}
},
methods:{
}
}
</script>
<style scoped>
.school{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
然后在App.vue 文件中引入School.vue ,然后使用该组件
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Student/>
<School/> // 使用School.vue组件
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 把School.vue导入
import School from './components/School.vue';
// 使用Student,School就定义export
export default{
name:'App',
components:{Student,School}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
按照上次运行方式,再次运行,运行结果如下:
![](https://file.jishuzhan.net/article/1766623680701403138/bc8300c95018e2de5dd44c05ab4490d6.webp)
2.3.4 加个班,再写一个任务
任务 | 显示注册界面 |
---|---|
描述 | 显示注册界面,包括用户名,密码,再次输入密码,注册按钮 |
在components文件夹下新建一个Login.vue 文件,按照任务描述编写代码
html
<template>
<body>
<form action="/register" method="post">
<fieldset>
<legend>注册</legend>
<label>用户名:</label><input type="text" name="user" required>
<br>
<label>密码:</label><input type="text" name="pwd" required>
<br>
<label>再次输入密码:</label><input type="text" name="pwd2" required>
<br>
<input type="submit" value="注册">
</fieldset>
</form>
</body>
</template>
<script lang="ts">
export default{
name:'Login',
data(vm) {
return{
}
},
}
</script>
然后在App.vue 文件中引入Login.vue ,然后使用该组件
html
<template>
<div class="app">
<h1>Hello Vue !</h1>
<Login/>
<Student/>
<School/>
</div>
</template>
<script lang="ts">
// 把Student.vue导入
import Student from './components/Student.vue';
// 把School.vue导入
import School from './components/School.vue';
// 把Login.vue导入
import Login from './components/Login.vue';
// 其他文件使用Student就定义export
export default{
name:'App',
components:{Student,School,Login}
}
</script>
<style>
.app{
background-color: aqua;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
运行,界面如下:
![](https://file.jishuzhan.net/article/1766623680701403138/437821d161391468e82df506b78d4e77.webp)
2.4 Vue 3 启动!
上面所写的代码是 Vue 2 的形式,Option API 是 vue 2 特性,其缺点在于不利于对方法、数据进行管理,在数据较多时造成管理混乱;而 Compostion API 是 vue 3 特性,它将所有相同功能的数据、方法、计算等属性放在一个 setup 中。
在默认情况下,setup中的变量是非响应式,若需改为响应式,使用 ref
关键字将数据组装。ref
是 vue 3 是对 ts 的基本数据类型进行打包转成对象,这样才能转换为响应式。
2.4.1 Vue 2 升级为Vue 3
Student.vue 文件代码
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts">
import {ref} from 'vue'
export default{
name:'Student',
setup() {
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
return {name,age,addr,changeAge,changeName,showTel,changeAddr};
},
}
</script>
2.4.2 小小改进
如果后期数据量过多,Vue 3 的 setup 要返回一堆的变量和方法名,非常的不方便!
于是可以采用下面写法:
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts" setup name="Student">
import {ref} from 'vue'
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
</script>
如果node.js版本低于18的话,需要安装下面插件:
先在终端按下 ctrl+c,输入 y 结束进程
然后输入代码:npm install vite-plugin-vue-setup-extend -D
![](https://file.jishuzhan.net/article/1766623680701403138/0e794f82900c589cb4ae34c4677680a9.webp)
安装完后,找到 vite.config.ts 文件,导入该插件,只要在里面添加下面代码即可:
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
![](https://file.jishuzhan.net/article/1766623680701403138/882d9551a5076e6a0a1dfc8e37bf11b1.webp)
安装完后,运行该程序【即新建终端,输入:npm run dev
】,运行界面如下:
![](https://file.jishuzhan.net/article/1766623680701403138/c53894db985a81ab4af8273b7855294e.webp)
2.4.3 响应吧!对象与对象数组
前面提到的 ref
关键字只能将基本数据类型转换为响应式对象,如果要把对象和对象数组转变为响应式,则需要关键字 reactive
。
如果变量前面不加 ref
或者 reactive
,你会发现,点击按钮,界面数据没有变化!
html
<template>
<div class="student">
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>地址:{{ addr }}</h2>
<h2>拥有一辆{{ car.brand }},价值为{{ car.price }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">显式联系方式</button>
<button @click="changeAddr">修改地址</button>
<button @click="changePrice">加钱</button>
<h2>游戏列表</h2>
<ul>
<li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
</ul>
<button @click="changeFirstGame">修改第一个游戏</button>
</div>
</template>
<style scoped>
.student{
background-color: blueviolet;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
<script lang="ts" setup name="Student">
import {ref} from 'vue' // 把基本数据类型转换成响应式对象
import { reactive } from 'vue'; // 把对象转换为响应式对象
let name = ref('张三')
let age = ref(21)
let tel = ref('1008611')
let addr = ref('福建省福州市福州大学计算机与大数据学院')
let car = reactive({brand:'五菱宏光 pro max 天空紫' , price:110})
let games = reactive([
{id:'game01',name:'原神'},
{id:'game02',name:'碧蓝航线'},
{id:'game03',name:'明日方舟'}
])
function changeName(){
name.value = "李四";
console.log(name);
}
function changeAge(){
age.value+=1;
console.log(age);
}
function showTel(){
alert(tel.value);
}
function changeAddr(){
addr.value='中国';
}
function changePrice(){
car.price+=10;
console.log(car.price);
}
function changeFirstGame(){
games[0].name='黑神话悟空';
}
</script>
运行结果如下:
![](https://file.jishuzhan.net/article/1766623680701403138/10e772070289409d1aa9830368a5d39a.webp)