AI全栈开发之零基础Vue3教程教学

UP主: 三分钟实验室 · 时长: 26:18 · 🔗 B站原视频

发布: 2024-05-28 · 收录: 2024-06-09

标签: Vue3 · 前端开发 · 编程教程 · JavaScript

开场：要做的效果与两步实现思路

这是一个盒子，点它会变大、变颜色，再点会变回来。实现这个功能只需要两步：声明一个布尔变量，然后按照布尔值是 true 或 false 动态绑定 class，最后监听这个盒子的点击事件，点击时把布尔值取反即可。

这是一个输入框，输入字符，下方实时显示输入的值。这个功能也需要两步：首先创建一个变量，用 v-model 绑定到输入框中，然后用两个大括号把变量放在下面的盒子中即可。

我有一个数组，希望根据数组长度动态创建盒子，可以这样写：在 div 后面写上 v-for="item in list"，然后用两个大括号把变量放在盒子中，就会出现这样的效果。

基于刚刚的逻辑，我们拿出上期视频写的静态页面：创建一个字符串变量用来保存输入框的值；创建一个数组代表下面的代办事项列表，每一项有两个字段，isCompleted 表示是否完成，text 代表中间的文字；写一个添加函数，往数组中添加一个新的值，添加完毕后清空变量；再写一个删除函数，接收一个参数（数组下标），根据下标移除数组中的某一项。然后给输入框绑定变量，给按钮点击事件绑定添加函数，通过数组渲染下面的列表；给单选框绑定是否完成字段，根据是否完成动态绑定样式；表中展示每项文字；最后监听删除按钮点击事件绑定删除函数，测试添加、完成、删除。

介绍：Vue 是什么

大家好，欢迎来到三分钟实验室。今天我们一起来学习 Vue。

正如 Vue 官网介绍所说，它是一个 JavaScript 框架，易学易用。它的作用是让 JS 和 HTML 连接起来，让网页能动起来，就像我们前面展示的那样。

环境安装：Node + NVM

开始之前需要安装环境，也就是 Node。

先安装 NVM。安装包我放在 QQ 群里，按需自取，一直下一步安装就行。

安装好之后打开命令行：

• nvm install 20：安装 Node 的 20 版本
• nvm ls：看一下版本号
• 我这里是 20.13.1，所以输入 nvm use 20.13.1：使用这个版本
• 再输入 node -v、npm -v，如果成功输出版本号就说明安装成功

项目代码与启动：npm i / npm run dev

Node 安装完之后，我准备了一个模板代码（之前教程写过的静态页面），也放在 QQ 群里。完整代码也会放群里方便对照改错。

把代码拖入 VS Code 打开，会得到一个项目。其他文件先不管，找到 src 下面的 App.vue，本期视频所有内容都基于这个页面操作。

一个 vue 页面分为三部分：

• script：写 JS
• template：写 HTML
• style：写 CSS

把项目跑起来：

• command + 反引号 或 control + 反引号 打开命令行（反引号是键盘上 K 左边那个键）
• npm i：安装依赖
• npm run dev：启动项目

看到成功界面后，按住 Ctrl 点击网址就能打开页面。修改页面文字保存，会实时更新，说明运行成功。

Vue3 创建变量与使用：ref 与 .value

Vue3 创建变量跟普通 JS 或 Vue2 不太一样，需要通过 ref 来创建。

比如创建一个字符串：先用 ref(值)。ref 一定要从 vue 引入，不引入没法用。数字、对象、数组都一样，写在小括号里。

使用分两种情况：

• 在 script 中使用：访问值需要 .value
  例如打印变量，必须 变量.value。如果不加 .value，打印出来会是一个对象。写 Vue3 时如果变量值不对，先检查是不是忘记 .value。
• 在 template 中使用：直接写变量名，不需要 .value

事件监听：@click / @mouseenter / @mouseleave

先写一个函数，里面打印变量值。需求是点击按钮执行这个函数。

在按钮上写：

• @click="函数名"

保存后点击就会触发。打印变量值时别忘了 .value。

除了 click 还可以监听：

• @mouseenter：鼠标移入
• @mouseleave：鼠标移出

想监听其他事件，直接在 @ 后面写事件名就可以。

双向绑定：v-model（输入框与单选框）

需求：输入框输入的值实时保存到刚创建的字符串变量中。

在输入框标签上写：

• v-model="变量名"

验证方式：点击按钮时打印变量值，输入什么就打印什么。

什么叫双向绑定：输入框的值会实时保存到变量中，变量的值也会实时传入输入框。

验证：在点击函数里把变量改成 8888，点击后你会发现输入框也变成 8888。

双向绑定不仅输入框能用，单选框也可以用：

• 把变量改成布尔值
• 点击时赋值为它的相反值
• 在单选框上 v-model="变量名"

变量为 true 就勾上，为 false 就不勾；手动勾选也会同步改变变量。

动态绑定：:class 与三元表达式

比如盒子默认 class 是 item，还有一个样式叫 completed（灰色带划线）。

如果要动态绑定 class：

• :class="变量名"：变量值为 completed 就用 completed 样式，改成 item 就用 item 样式。

更常见的写法是用三元表达式：

• :class="[布尔值 ? 'completed' : 'item']"

布尔值为 true 用 completed，为 false 用 item。把这个布尔值换成变量，点击时取反，就能动态改变样式。

动态绑定也常用于图片：

• :src="url变量"
  图片一般不会写死，后端请求回来改变变量，图片就跟着变。

列表渲染：v-for 与 {{ }}

创建一个数组：['吃饭', '睡觉', '打豆豆']。

需求：根据数组个数动态创建代办事项。

写法：

• v-for="item in list"

保存后会根据数组长度创建对应条数。

展示变量用两个大括号：

• \{\{ item \}\}

v-for 还能加第二个参数下标：

• v-for="(item, index) in list"

在标签中展示 \{\{ index \}\} 就会看到 0、1、2。

实战：完成 Todo List（添加 / 删除 / 完成样式）

基于前面的知识把小案例写完。

数据准备：输入值 + 列表数据

1. 一个变量与输入框双向绑定，获取输入值，默认空字符串。
2. 一个数组渲染列表。数组里每一项用对象表示，因为有两项数据：

• isCompleted：是否完成（默认 false）
• text：文本（比如 吃饭、睡觉、打豆豆）

添加函数：push 新对象并清空输入框

添加函数：往 list.value 里 push 一个对象：

• isCompleted: false
• text：输入框变量的 .value

添加完后把输入框绑定的变量清空为 ''。

删除函数：按下标删除

删除函数 del(index)：根据下标删除某一项：

• list.value.splice(index, 1)

绑定到页面：v-model / @click / v-for / 动态 class

• 输入框：v-model="输入变量"
• Add 按钮：@click="add"
• 列表：v-for="(item, index) in list"
• 文本展示：\{\{ item.text \}\}
• 单选框：v-model="item.isCompleted"
• 删除按钮：@click="del(index)"
• 动态样式：根据 item.isCompleted 绑定 completed 或 item

测试：添加、划线、删除都 OK；添加后输入框清空也 OK。Todo List 完成。

监听器：watch（新值、旧值、深度监听）

有时候需要监听某个变量的变化，变化时执行一些代码。比如变量双向绑定在输入框上，输入时变量变化，希望执行函数。

Vue 中用监听器 watch，需要先从 vue 引入。调用时带小括号，两个参数：

1. 监听的变量
2. 变化时执行的函数

如果还需要变化前后的值，可以在函数里写两个参数：

• newValue
• oldValue

然后打印，就能看到新值和旧值。

如果监听的是对象，比如 \{ text: '' \}，你绑定的是 obj.text，但 watch 监听的是整个对象时，输入后可能不会触发，因为对象本身没变，变的是对象内部属性。

解决：watch 增加第三个参数，传对象并开启深度监听：

• \{ deep: true \}

这叫深度监听。

条件渲染：v-show 与 v-if 的区别

动态展示很常见，比如性别图标：男显示男图标，女显示女图标。两种图标都在代码里，只是动态选择展示哪一个。

Vue 里：

• v-show="布尔值"：true 展示，false 不展示
• v-if="布尔值"：true 才创建并展示，false 直接不创建

区别：

• v-if="false"：检查元素会发现标签都没了，根本没创建
• v-show="false"：标签还在，只是加了 display: none 隐藏

使用建议：

• 需要频繁切换显示/隐藏：用 v-show
• 从第一次渲染就决定是否创建：用 v-if

组件：创建、注册、Props、Emit（父子通信）

组件是什么

比如一个按钮，项目里要用很多次，每次都重新写很麻烦，就可以封装成一个组件。组件可大可小，只要能复用都可以封装。

创建组件与使用

在 components 文件夹里新建 Button.vue（vue 文件以 .vue 结尾），把按钮代码拷贝进去保存。

回到主页面，删除原来的代码，使用组件：

• import MyButton from './components/Button.vue'
  注意引入路径要带 .vue，不带可能报错。
• 在 template 里像写 div 一样写：\<MyButton />

想用多个就写多个。

外面使用组件的叫父组件，里面被使用的叫子组件。

父传子：props

需求：父组件使用子组件时，希望按钮文字是传进去的，不是写死的。

在子组件中定义 props，需要从 vue 引入 defineProps：

• const props = defineProps(['text'])

子组件使用：

• \{\{ props.text \}\}

父组件传入：

• \<MyButton text="你好" />

不同子组件传不同 props，就会显示不同文字。没定义过的 prop，传了也用不了。

子传父：emit 事件

需求：按钮点击后子组件处理数据，处理完通知父组件，并带上参数。

在子组件中注册事件，需要引入 defineEmits：

• const emit = defineEmits(['ok'])

点击按钮执行函数，在函数里发射事件并带参数：

• emit('ok', 'hello')

父组件监听子组件事件：

• \<MyButton @ok="add" />

父组件函数 add(param) 接收参数并打印，就能拿到子组件传出来的值。

这就是子往父的通信，并携带参数。

总结

今天学了 Vue 的事件监听、动态绑定、双向绑定、监听器、列表渲染、条件渲染，以及组件的注册和使用、父子组件的相互通信。

以上就是本期视频的所有内容。如果对你有帮助，记得点赞投币关注，我们下期视频再见。拜拜。