技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 Vue
   约 3099 字   预计阅读 7 分钟 
https://bing.ee123.net/img/rand?artid=146116901

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

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

（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>

https://i-blog.csdnimg.cn/direct/823e56d7b6b248e985e56ef02eafd7b9.png

  • 页面渲染后如下所示。
  • 不要直接绑定Vue对象。不然整个对象全部渲染出来了。
<div style="font-size: 25px;font-weight: bold;margin-bottom: 20px">
      {{ data.c }} {{ data.d }}
      {{data}}
</div>
（2）定义数据的两种方式。(常用)
  • 注意： 两种方式的使用都需要导包才能使用 ！
<1>ref()函数。

https://i-blog.csdnimg.cn/direct/2897f37ffb3c4292b19399d66e7671db.png

<2>reactive({…})——Vue实例定义中再定义变量。
（3）v-model。(绑定数据、双向绑定)
  • v-model：通常用于表单绑定数据 。
  • 使用"输入框”()进行绑定数据演示。
<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>

https://i-blog.csdnimg.cn/direct/c5d0bd692c9e4b44af4e54d5f8f4c045.png

  • 双向绑定。

    数据可以在用户输入的时候发生实时的变化。

https://i-blog.csdnimg.cn/direct/081f86cc26754a9496f34dd3baeebb49.png

（4）v-if、v-else-if、v-else。(根据变量值动态地改变页面渲染)
  • 需求：当data.name的值改变时，渲染的也跟着改变。

https://i-blog.csdnimg.cn/direct/54122283bc2b4b7b8e8b8092a628cca5.png

https://i-blog.csdnimg.cn/direct/0b891ed8d5904a85b6c004ed6dff99e0.png

https://i-blog.csdnimg.cn/direct/137c7c56224c4347b75ee0f64a38ae57.png

  • 使用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>

https://i-blog.csdnimg.cn/direct/81e0800d2f124cd28cbd23821c3deefc.png

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

https://i-blog.csdnimg.cn/direct/f4caef7258bb40e6a21dea10b895b205.png

https://i-blog.csdnimg.cn/direct/eec10538baa64acf8776df4aedc2a3e9.png

（5）v-for。
<1>绑定数组变量动态渲染盒子(卡片)。
  • Vue实例data中定义一个数组变量arr。数组变量里面有三个数字。需要实现的操作：让这三个数字渲染到三个
    盒子中并显示在页面中。

https://i-blog.csdnimg.cn/direct/dcc902fddecd456a85929b7ab38610aa.png

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

https://i-blog.csdnimg.cn/direct/759b382c548341bdab5878c72a26b21b.png

https://i-blog.csdnimg.cn/direct/38a1593067fb41e48926bfff457bc6fa.png

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

https://i-blog.csdnimg.cn/direct/17f4f0955fc94d73973ef5ba7ee83ec1.png

<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>

https://i-blog.csdnimg.cn/direct/3d65d82c1f08431cbee948e4850b4d6a.png

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

https://i-blog.csdnimg.cn/direct/39bf208c52f149768a33760531d7b51b.png

https://i-blog.csdnimg.cn/direct/98b65885463546feb47429e90ce458cb.png

<2>绑定数组变量动态渲染"选择下拉框"。
  • 让下拉选择框动态绑定数组变量：data.fruits。

https://i-blog.csdnimg.cn/direct/7d99da8c430c4025985d866ba6330560.png

<div style="margin-bottom: 25px">
      <select style="width: 100px">
        <option v-for="item in data.fruits">{{item}}</option>
      </select>
</div>
  • 页面的最终渲染结果。

https://i-blog.csdnimg.cn/direct/165e835afdf340e4a2eb4dcd9df5a5f7.png

（6）“v-on："(原生写法)或”@"(简写)。（事件绑定）
  • 像鼠标移动、鼠标移入输入框聚集事件、点击
    盒子、点击按钮、失焦事件、键盘输入事件等等都是一种事件。
  • 本次案例：点击按钮，触发事件，弹出一个网页提示。

https://i-blog.csdnimg.cn/direct/d1982f93817645799ad4a3c8e23da9ab.png

<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>

https://i-blog.csdnimg.cn/direct/339539114212447a817f02c82a07d04b.png

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

https://i-blog.csdnimg.cn/direct/5690f31277c34d72a233abc9f7089ef4.png

https://i-blog.csdnimg.cn/direct/237ef6b6d68c4ba8933b9e4f05071f26.png

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

https://i-blog.csdnimg.cn/direct/05d5b0f5e2da47528e5899d50c54f91a.png

https://i-blog.csdnimg.cn/direct/f4223a6f17944f41bc73a1ed95286610.png

<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函数。在函数中拿到参数值后，在网页弹出提示！

https://i-blog.csdnimg.cn/direct/88f52703b7214a4cbb5241a292a7458d.png

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

https://i-blog.csdnimg.cn/direct/ac1de816eb134750b97313a8a8cd9ec4.png

https://i-blog.csdnimg.cn/direct/92042de3a2aa4eb98e145dfd5c38f6b1.png

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

https://i-blog.csdnimg.cn/direct/0a67a6da07664347aa4a138df04f0def.png

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

https://i-blog.csdnimg.cn/direct/65e372da3f1b4dffa62b8008a68fd5a0.png

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

https://i-blog.csdnimg.cn/direct/f5bd3af9340f467d94110b45eb0504c9.png

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

https://i-blog.csdnimg.cn/direct/0d8ba541b5dc4b7885c1038eaa12561b.png

  • 使用标签动态绑定链接。渲染页面。
  • 图片地址：

https://i-blog.csdnimg.cn/direct/93b2144223b74bc59c2d4e8421acade2.png

https://i-blog.csdnimg.cn/direct/fdeec14167e0411784f3f3e1e268d218.png

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

https://i-blog.csdnimg.cn/direct/6f8ff618bf984bdf99f7b840a8dc6b98.png

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

https://i-blog.csdnimg.cn/direct/60d13e3db0a44ef29f0c67686c511a23.png

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

https://i-blog.csdnimg.cn/direct/6dadf440673e49688c0882953ee97ba7.png

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

https://i-blog.csdnimg.cn/direct/ff19dc3d4fe745ed9f56b06c42e733ed.png

https://i-blog.csdnimg.cn/direct/33b69dc6fc234fc489d7f12470310702.png

更新于 2025-03-08
 Vue, Vue, Vue, Javascript, Java, Idae
返回 | 主页