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：钩子函数？？)
- 点击刷新按钮。当页面刷新后并加载完成就会弹出网页提示！点击确定后立马显示网页完整渲染。
