Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)

目录

（1）Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接)

（2）Vue3的基础语法学习与使用。

（1）"{{}}"绑定数据。

<1>ref()函数定义变量——绑定数据。

<2>reactive({...})函数定义变量——绑定数据。

（2）定义数据的两种方式。(常用)

<1>ref()函数。

<2>reactive({...})——Vue实例定义中再定义变量。

（3）v-model。(绑定数据、双向绑定)

（4）v-if、v-else-if、v-else。(根据变量值动态地改变页面渲染)

（5）v-for。

<1>绑定数组变量动态渲染盒子(卡片)。

<2>绑定数组变量动态渲染"选择下拉框"。

（6）"v-on："(原生写法)或"@"(简写)。（事件绑定）

（7）v-bind。(动态绑定属性)

（8）onMounted。(页面元素加载后触发)

---

（1）Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接)

• Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
• Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客

（2）Vue3的基础语法学习与使用。

（1）"{{}}"绑定数据。

• 结合下面的定义数据的两种方式——>展示"{{}}"绑定数据。
• 当Vue实例中的变量的数据变化时，页面上的内容也会随之更新。

---

<1>ref()函数定义变量——绑定数据。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div style="font-size: 25px">{{ a }} {{ b }}</div></div>
</template><script setup>import {ref} from "vue";//第一种定义数据的方式
const a = ref(666)
const b = ref("岁岁岁平安真的很帅！")</script>

---

• 页面渲染后如下所示。

---

<2>reactive({...})函数定义变量——绑定数据。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div style="font-size: 25px;margin-bottom: 20px">{{ a }} {{ b }}</div><div style="font-size: 25px;font-weight: bold;margin-bottom: 20px">{{ data.c }} {{ data.d }}</div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("岁岁岁平安真的很帅！")//第二种定义数据的方式
const data = reactive({c: 123,d:"岁岁岁平安加油学Vue3！"
})</script>

---

---

• 页面渲染后如下所示。

---

• 不要直接绑定Vue对象。不然整个对象全部渲染出来了。

<div style="font-size: 25px;font-weight: bold;margin-bottom: 20px">{{ data.c }} {{ data.d }}{{data}}
</div>

---

（2）定义数据的两种方式。(常用)

• 注意：两种方式的使用都需要导包才能使用！

<1>ref()函数。

---

<2>reactive({...})——Vue实例定义中再定义变量。

---

（3）v-model。(绑定数据、双向绑定)

• v-model：通常用于表单绑定数据。
• 使用"输入框"(<input/>)进行绑定数据演示。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div style="margin-bottom: 20px"><input v-model="data.c" /></div></div>
</template><script setup>import {reactive, ref} from "vue";//第二种定义数据的方式
const data = reactive({c: 123,d:"岁岁岁平安加油学Vue3！"
})</script>

---

• 双向绑定。数据可以在用户输入的时候发生实时的变化。

---

（4）v-if、v-else-if、v-else。(根据变量值动态地改变页面渲染)

• 需求：当data.name的值改变时，渲染的<span>也跟着改变。

---

---

---

• 使用v-if、v-else-if、v-else完成变量的值动态改变页面渲染。
• 注意：当双引号中需要再使用双引号时，需要将内部的双引号改成单引号。否则无法识别内部的双引号。

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div><span style="font-weight: bold;color: red" v-if="data.name === '佩奇'">小猪佩奇</span><span style="font-weight: bold;color: gold" v-else-if="data.name === '美猴王'">美猴王</span><span style="font-weight: bold;color: black" v-else>科比</span></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("岁岁岁平安真的很帅！")//第二种定义数据的方式
const data = reactive({c: 123,d:"岁岁岁平安加油学Vue3！",name:"佩奇"
})</script>

---

• 修改data.name的值。观察页面渲染结果。

---

---

（5）v-for。

<1>绑定数组变量动态渲染盒子(卡片)。

• Vue实例data中定义一个数组变量arr。数组变量里面有三个数字。需要实现的操作：让这三个数字渲染到三个<div>盒子中并显示在页面中。

---

• 将三个div盒子的样式设计好后。

---

---

• 使用v-for完成数组变量的数据的依次绑定。
• 原理：临时变量item，通过循环依次将data.arr的数组变量内的值赋值给item。

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><!--   三个div盒子横着排列 --><div style="display: flex"><div style="width: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px" v-for="item in data.arr">{{item}}</div></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("岁岁岁平安真的很帅！")//第二种定义数据的方式
const data = reactive({c: 123,d:"岁岁岁平安加油学Vue3！",name:"",arr:[1,2,3],
})</script>

---

• 修改data.arr里的值。再查看页面的渲染结果。

---

---

<2>绑定数组变量动态渲染"选择下拉框"。

• 让下拉选择框动态绑定数组变量：data.fruits。

---

<div style="margin-bottom: 25px"><select style="width: 100px"><option v-for="item in data.fruits">{{item}}</option></select>
</div>

---

• 页面的最终渲染结果。

---

（6）"v-on："(原生写法)或"@"(简写)。（事件绑定）

• 像鼠标移动、鼠标移入输入框聚集事件、点击<div>盒子、点击按钮、失焦事件、键盘输入事件等等都是一种事件。

---

• 本次案例：点击按钮，触发事件，弹出一个网页提示。

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><div><button v-on:click="onClick">点我加好运</button></div></div>
</template><script setup>import {reactive, ref} from "vue";const a = ref(666)
const b = ref("岁岁岁平安真的很帅！")//第二种定义数据的方式
const data = reactive({c: 123,d:"岁岁岁平安加油学Vue3！",name:"",arr:[4,5,6,7],fruits:["苹果","香蕉","橘子","草莓"]
})//定义一个点击方法（js内容）
const onClick =()=>{alert("好运+1！")
}</script>

---

---

• 使用简化写法。使用"@"代替v-on：。

---

---

• 将上面的v-for的数组变量动态渲染页面div盒子案例，再添加点击div盒子事件，然后网页弹窗提示点击的div盒子对应的数字。

---

---

<template><div><div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px" >欢迎来到hyl的第一个Vue3项目主页！加油学习吧！</div><!--   div盒子横着排列 --><div style="display: flex;margin-bottom: 25px"><div v-on:click="show(item)" style="width: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px" v-for="item in data.arr">{{item}}</div></div></div>
</template><script setup>import {reactive, ref} from "vue";//定义一个点击方法（js内容）
const onClick =()=>{alert("好运+1！")
}const show = (item) =>{alert(item)
}</script>

---

• 这样每当点击div盒子时，就会拿到对应它渲染时的item值并传给show函数。在函数中拿到参数值后，在网页弹出提示！

---

（7）v-bind。(动态绑定属性)

• 验证了HTML元素是可以被数据动态渲染的！
• 给一个div盒子绑定一个基础的css样式属性。

---

---

• 将width(宽)、height(高)、backgroundColor(背景颜色)设置成data对象里的对象数据，通过v-bind动态绑定对象并完成指定的div盒子基础样式设置。

---

• 将{'width':'100px','height':'100px','backgroundColor':'yellow'}替换成对象（data.box）。

---

• 动态绑定基础样式成功渲染页面。

---

• 可以使用简写（":"）代替"v-bind"。

---

• 使用<img>标签动态绑定链接。渲染页面。
• 图片地址：https://www.runoob.com/wp-content/uploads/2017/01/vue.png

---

---

• 成功动态的渲染了图片的显示。因为以后data.img数据值肯定不是直接定义在对象data中的，而是存储在数据库中的。

---

（8）onMounted。(页面元素加载后触发)

• 因为网页的所有元素加载并渲染出来是需要一点点时间的。
• 如果想让网页的元素加载后，再执行某些操作时就需要用到。（实现渲染数据图、表时常用：渲染出页面数据图、表基本结构后，才会去数据库拿取数据完成剩下的渲染...）

---

• 导入包。

---

• onMounted(()=>{...})。(hook：钩子函数？？)

---

• 点击刷新按钮。当页面刷新后并加载完成就会弹出网页提示！点击确定后立马显示网页完整渲染。

---