Vue 3 单文件组件与模板语法一、单文件组件是什么Vue 项目通常使用.vue单文件组件。一个组件可以把结构、逻辑和样式放在同一个文件中template div classpage h1{{ title }}/h1 /div /template script setup langts const title Vue 3 页面; /script style scoped .page { padding: 24px; } /style三个部分分别承担template 页面结构 script setup 状态、函数和业务逻辑 style scoped 当前组件样式二、script setup的作用Vue 3 中常见写法是script setup langts其中setup表示使用组合式 API 的简化语法langts表示脚本使用 TypeScript在脚本中声明的变量和函数可以直接在模板中使用。例如template button clickincrease{{ count }}/button /template script setup langts import { ref } from vue; const count ref(0); function increase() { count.value 1; } /script不需要再手动编写return { count, increase }。三、插值表达式{{ }}模板中使用双大括号显示数据h1{{ title }}/h1 p当前炉次{{ heatId }}/p插值中可以使用简单表达式p{{ heatId || -- }}/p p{{ isRealtime ? 实时模式 : 回放模式 }}/p p{{ warnings.length }}/p也可以调用格式化函数strong{{ formatTemperature(temperature) }}/strong但不建议在模板中编写过于复杂的逻辑。复杂结果应优先放到computed中。四、可选链与默认值接口数据在页面首次渲染时可能还没有返回。下面的写法可以避免读取空对象时报错strong{{ heatMeta?.converter_no || -- }}/strong其中?.表示对象存在时才继续读取|| --表示前面的值为空时显示占位内容。需要注意||会把0、空字符串和false也视为假值。只想处理null和undefined时可以使用??{{ value ?? -- }}五、条件渲染1.v-ifdiv v-ifloading正在加载.../div条件为真时才创建该 DOM。2.v-elsediv v-ifloading正在加载.../div div v-else加载完成/divv-else必须紧跟在v-if或v-else-if后面。3.v-else-ifel-tag v-ifrisk critical typedanger严重/el-tag el-tag v-else-ifrisk warning typewarning预警/el-tag el-tag v-else typesuccess正常/el-tag4.v-showdiv v-showvisible控制面板/divv-show不会销毁 DOM只会改变 CSS 的display。选择建议切换频繁 → v-show 条件很少变化或内容较重 → v-if六、列表渲染v-fordiv v-forsignal in signalCards :keysignal.code span{{ signal.label }}/span strong{{ signal.value }}/strong /div这里的含义是遍历 signalCards ↓ 每次取出一个 signal ↓ 为它生成一组 DOM也可以同时得到索引li v-for(item, index) in list :keyitem.id {{ index 1 }}. {{ item.name }} /li为什么需要:keyVue 在更新列表时需要判断哪些节点被增加、删除或移动。稳定的 Key 可以帮助 Vue 正确复用 DOM。推荐:keyitem.id谨慎使用:keyindex当列表发生排序、插入或删除时索引并不稳定。七、属性绑定v-bind普通 HTML 属性是固定字符串button disabledtrue按钮/button需要绑定 JavaScript 数据时使用v-bindel-button v-bind:loadingloading刷新/el-button简写为el-button :loadingloading刷新/el-button动态类名对象写法div :class{ active: isActive, disabled: isDisabled }/div数组写法div :class[riskClass, { lightweight: lowPerformance }]/div动态样式div :style{ left: positionX px, top: positionY px }/div也可以绑定完整对象div :stylelabelStyles[item.key]/div八、事件绑定v-onel-button clickloadData刷新/el-buttonclick是v-on:click的简写。常见事件包括input inputhandleInput / select changehandleChange/select div dblclickhandleDoubleClick/div div wheelhandleWheel/div获取事件对象button clickhandleClick($event)点击/buttonfunctionhandleClick(event:MouseEvent){console.log(event.clientX,event.clientY);}传递自定义参数button clicksetMode(realtime)实时模式/button九、双向绑定v-modelv-model常用于表单和交互组件input v-modelkeyword / el-switch v-modelautoRotate / el-slider v-modelopacity / el-select v-modelplaybackSpeed /例如template input v-modelname / p输入内容{{ name }}/p /template script setup langts import { ref } from vue; const name ref(); /script用户修改输入框时name自动变化代码修改name时输入框也自动变化。十、模板引用ref...模板引用用于获得真实 DOM 或组件实例div refcontainerRef classcanvas-container/divconstcontainerRefrefHTMLElement();组件挂载后可以访问onMounted((){console.log(containerRef.value);});这在初始化 Three.js、图表库或视频播放器时非常常见。需要区分两种refref() 创建响应式状态 refcontainerRef 在模板中记录 DOM 或组件引用它们相关但不是同一个使用场景。十一、Element Plus 组件也是 Vue 组件下面的标签不是浏览器原生 HTMLel-button / el-tag / el-alert / el-switch / el-slider /它们由 Element Plus 提供本质上仍然遵循 Vue 的属性绑定、事件和v-model规则el-button typeprimary :loadingloading clickloadData 刷新 /el-button十二、一个完整的小案例template section classmonitor-panel h2{{ title }}/h2 el-alert v-iferrorMessage :titleerrorMessage typewarning / div v-ifloading数据加载中.../div div v-else div v-forsignal in signals :keysignal.code :class[signal-card, { danger: signal.value signal.limit }] span{{ signal.label }}/span strong{{ signal.value }} {{ signal.unit }}/strong /div /div el-switch v-modelautoRefresh active-text自动刷新 / el-button :loadingloading clickloadSignals刷新/el-button /section /template script setup langts import { ref } from vue; const title 过程信号; const loading ref(false); const errorMessage ref(); const autoRefresh ref(false); const signals ref([ { code: TEMP, label: 温度, value: 1650, limit: 1700, unit: °C }, { code: FLOW, label: 氧流量, value: 18000, limit: 22000, unit: Nm³/h } ]); function loadSignals() { loading.value true; setTimeout(() { loading.value false; }, 500); } /script十三、常见误区1. 在模板中编写大量业务逻辑模板应以展示为主。复杂条件应放到computed或函数中。2.v-for忘记稳定的 Key列表更新时可能出现状态错位。3. 把v-if和v-for放在同一个元素上优先在计算属性中先过滤数据或使用外层template分开处理。4. 在组件尚未挂载时访问模板 DOM模板引用通常需要在onMounted()后使用。十四、本章小结Vue 模板的核心思想是状态决定页面结构和属性 用户事件修改状态 状态变化后页面自动更新下一章将进入 Vue 的核心ref、reactive和computed响应式数据。