1.在此次教学之前我们先来学习怎么配置环境并且创建vue3
1.1按照以下步骤安装并配置环境
【Node.js官网】
https://nodejs.org
直接不断下一步安装即可！！！很简单！！！
【npm官网】
https://www.npmjs.com
【查看安装的版本】
node -v
npm -v
【查看当前镜像源】
npm get registry
【设置淘宝镜像源（默认镜像源是国外网址，国内访问经常失败，所以要设置淘宝镜像源）】
npm config set registry https://registry.npmmirror.com/
【其他】
1.安装pnpm包管理工具： npm install -g pnpm
2.安装网络请求库axios： npm install axios
1.2创建vue3
1.首先确保已经安装pnpm工具包： npm install -g pnpm (npm install -g xxxx 全局安装工具包，可以直接在命令行使用，否则无法使用)
2.创建脚手架：pnpm create vue
3.配置脚手架相关插件（按需配置）
4.执行以下指令
cd vue-project
pnpm install
pnpm format
pnpm dev
在命令提示符中完成全部操作大概是如图所示
2.标签属性动态绑定
复制图上local到浏览器回车打开网页，然后在打开visual studio code 点击左上角 文件 在下拉窗口选择打开文件夹 选中你项目。
我直接用课堂上老师的代码展示
<template> <!-- ================================================== --> <!-- 第 1 步：为什么需要 v-bind？ --> <!-- 已学的 {{ }} 只能写在"标签之间"， --> <!-- 不能写在"属性里"！属性想使用 JS 数据，必须用 v-bind --> <!-- ================================================== --> <!-- 【错误示范】href 会变成字面量 "{{ url }}"，无法跳转 --> <!-- <a href="{{ url }}">错误写法</a> --> <!-- 【正确写法】v-bind:属性名="JS表达式"，属性值不再是写死的字符串 --> <!-- 本来HTML的标签属性，他的值是写死的 通过v-bind修饰后，该标签属性可以被Vue实例动态更新 --> <a v-bind:href="url"> 去 Vue 官网（v-bind 完整写法） </a> <br> <!-- ================================================== --> <!-- 第 2 步：简写形式 --> <!-- v-bind: 可以简写成一个冒号 :，实际开发 99% 都用简写 --> <!-- 冒号后面跟属性名，引号里写 JS 表达式 --> <!-- ================================================== --> <img :src="imgUrl" width="100"> <hr> <!-- ================================================== --> <!-- 第 3 步：动态绑定 class（对象语法，最常用！） --> <!-- :class="{ 类名: 布尔表达式 }" 值为 true 时该类生效 --> <!-- 结合已学的 v-on：数据一变，样式自动变 —— 数据驱动视图 --> <!-- ================================================== --> <!-- 类名hot有时候被激活，有时候失效 --> <p v-bind:class="{ hot: temp >= 30 }"> 气温：{{ temp }}℃ </p> <!-- 当该类生效时，类选择器激活：文字变红加粗 --> <button @click="temp = temp + 5"> +5℃ </button> <button @click="temp = temp - 5"> -5℃ </button> <hr> <!-- ================================================== --> <!-- 第 4 步：绑定布尔属性 disabled --> <!-- :disabled="false" 时按钮可用，为 true 时按钮被禁用 --> <!-- 注意：引号里是 JS 表达式，可以做运算判断 --> <!-- ================================================== --> <p>高温预警时才能点击「一键降温」</p> <button :disabled="temp < 30" @click="temp = 25"> 一键降温至25℃ </button> </template> <script setup> // 组合式 API：ref 创建响应式数据（已学知识点） import { ref } from 'vue' const url = ref('https://cn.vuejs.org/') // 第1步：绑给 a 标签的 href const imgUrl = ref('https://cn.vuejs.org/logo.svg') // 第2步：绑给 img 的 src const temp = ref(25) // 第3、4步：气温数据 </script> <style scoped> /* 唯一的 CSS：气温达到 30℃ 时文字变红加粗 */ .hot { color: red; font-weight: bold; } </style> <!-- ================================================== --> <!-- 课堂总结：v-bind 到底是干嘛的？ --> <!-- ================================================== --> <!-- 一句话：{{ }} 管标签内容，v-bind 管标签属性 —— 把 JS 数据绑到属性上，让属性"活"起来 (让只能写死的标签属性变得可动态更新) 【核心对比】 不用 v-bind：属性值是写死的字符串 href="https://vuejs.org" 用了 v-bind：属性值是 JS 表达式 :href="url" 【三个要点】 1. 用途：属性想用变量/表达式，必须加 v-bind（或简写冒号） 2. 本质：引号里从"字符串"变成"JS 表达式"，数据一变视图自动更新 3. 简写：v-bind:src 等价于 :src，开发中只用冒号写法 -->以下是运行结果
最后总结一下
- 分工对比
{{ }}：作用在标签内容中间，展示文本v-bind：作用在标签属性，动态给属性赋值
- 不加
v-bind：属性值是固定字符串；加v-bind，引号内变成JS 表达式，支持变量、判断运算 - 简写：
v-bind:xxx→:xxx，开发一律用冒号简写 - 常用场景：绑定
href、src、动态 class、disabled、style等属性
核心：v-bind 让原本写死的 HTML 属性，变成跟随 JS 数据动态变化的属性，这就是 Vue 声明式渲染的魅力。
