Vue企业开发实战（第2版）-课件 项目6 模板语法与常用指令

《Vue企业开发实战》·Vue3企业级项目教程项目6模板语法与常用指令任务1条件渲染·任务2v-for·任务3事件·任务4v-model授课教师：XXX指令驱动界面·列表·表单·大觅下单区学习目标能做出含条件、列表、事件和表单的一页01条件渲染会v-if/v-else/v-show，能按切换频率选用02列表渲染会v-for遍历数组和对象，能给稳定key03方法与事件会v-on/@，会传参，会用.stop.prevent04表单回写会v-model绑多种控件，会lazy/trim/number05组合收口未登录不能下单、列表可点、数量可改，三样指令叠在一页项目知识导图四个任务：显不显示、怎么铺开、怎么点、怎么填任务1条件渲染v-if、v-else、v-show，登录态/空态/售罄任务2列表渲染v-for、遍历对象、key、网易健康页任务3方法与事件v-on、传参、修饰符任务4v-model文本、单选、复选、下拉、修饰符项目导读数据已经能取到，还要会“画”出来项目4用过v-bind。指令都带v-前缀：表达式一变，就把行为应用到DOM。未登录不能下单、20条票不能复制20段HTML、输入要回写到数据，都靠本项目。指令写在开始标签内，多个指令用空格分隔。显隐登录态、空态、售罄、提示条。铺开数组驱动列表，key保住身份。点击事件进方法，不要在模板堆长逻辑。填写v-model双向绑定，数量用number。TASK01条件渲染指令01v-if02v-else03v-show04怎么选6.1.1v-if：条件为假时不生成DOM才是真正的条件渲染：销毁或重建元素、事件和子组件<template><h1v-if="isShow">表达式的值为真就能显示</h1></template><scriptsetup>import{ref}from'vue'constisShow=ref(true)</script><divv-if="isLogin">欢迎回来，去下单</div><divv-if="list.length">列表</div><pv-else>暂无演出</p>图6.1v-if为真时显示标题语法：<divv-if="表达式"></div>。表达式为真才留下这块。6.1.2v-else/v-else-ifv-else必须紧跟v-if，后面不跟表达式<h1v-if="isShow">表达式的值为真就能显示</h1><h1v-else>v-if不成立的时候就显示</h1><pv-if="status==='onsale'">可售</p><pv-else-if="status==='soldout'">售罄</p><pv-else>未开售</p>//v-if为true：后面的else不会进HTML//v-if为false：才渲染else图6.2v-else：条件不成立时显示6.1.3v-show：只切display无论真假都会编译，靠CSS的display控制显隐<pv-show="status===1">条件为真才看见</p><divv-show="showTip">库存紧张</div>//示例3：status为2时表达式为false//p上会出现内联样式display:none//元素还在，只是看不见图6.3v-show：为假时display:none课上实验：同一条件分别用if/show，打开开发者工具看元素是消失还是display:none。6.1.4怎么选：表6.1v-if切换消耗高；v-show初始渲染消耗高对比项v-ifv-show本质真正条件渲染，销毁/重建CSS切换display初始为假一开始不编译照样编译，先藏起来切换开销大，适合少切开销小，适合常切大觅登录块、空态、整页权限库存紧张提示、筛选面板上机1条件对照实验登录两块用v-if；一条可反复开关的提示用v-show要求•用v-if/v-else做登录/未登录两块•票务状态三分支：可售/售罄/未开售•一条提示用v-show反复开关•打开开发者工具对照DOM是否销毁•不要把v-if和v-show写在同一标签上凑合合格能口头说清：销毁用if，隐藏用show。说不出选用理由不算过。TASK02列表渲染v-for01遍历数组02遍历对象03key6.2.1基本用法商品列表、购票人、评论、订单，都根据数组动态生成DOM<!--遍历数组--><liv-for="(item,index)initems":key="item.id">{{index}}-{{}}</li><!--遍历对象--><liv-for="(value,key,index)inobject":key="key">{{index}}-{{key}}-{{value}}</li>//item：当前元素；index可选//大觅列表页：每条演出都由后台数组渲染不要做的事•20条数据不要复制20段HTML•数据在script，不在模板写死•需要序号再用index•key不要省略•v-if和v-for不要写在同一元素示例4/示例5对象和数组对象每个属性依次迭代；数组里item是对象、index是下标constperson=reactive({name:'张三',age:20})<liv-for="(value,key,index)inperson":key="key">{{index}}-{{key}}-{{value}}</li>constlesson=reactive([{name:'前端三大块',type:['HTML','CSS','JavaScript']},{name:'前端三大框架',type:['Vue.js','React','Angular']}])<liv-for="(item,index)inlesson":key="">{{index}}-{{}}-{{item.type}}</li>图6.5v-for遍历数组6.2.4key保身份让Vue认出“这一项还是原来那一项”，提高更新效率01用id接口有唯一id就用item.id，企业开发最佳实践。02不要用index中间插入、删除、重排时，后面项会错位。列表永远不改顺序才勉强可用。03不要随机数每次渲染都在变，等于没有key。04示例没有id时教材lesson用，前提是name在数组内唯一。能补id就补。上机2列表页雏形教材：网易健康页；也可做大觅列表要求•完成基本布局：图、标题、一句说明、价格或日期•在onMounted用Axios请求本地模拟数据（项目5）•v-for渲染，绑定稳定key•增删一条，看是否错位•空数组时用v-if/v-else给空态合格条数与数据一致，key稳定。用index当key且中间插入错位，不算过。教材效果：网易健康页图6.6：图、标题、一句说明；大觅列表同一套指令TASK03方法与事件01v-on/@02传参03修饰符6.3.1v-on指令用户点击、输入时，触发组件里的方法常用事件：click单击、dblclick双击、keyup按键、change内容改变。语法：@事件名="方法名"。<button@click="toggle">toggle</button><divclass="box"v-show="isShow"></div>import{ref}from'vue'constisShow=ref(false)consttoggle=()=>{isShow.value=!isShow.value}图6.7单击切换显隐示例7事件可以传参两种写法等价：v-on:click与@click<button@click="say('Hello')">Hello</button>constsay=(msg)=>{alert(msg)}<!--等价-->v-on:click="say('Hello')"@click="say('Hello')"图6.8事件带参方法写在scriptsetup顶层即可，模板直接用名字。不要写成@click="sayHello"。6.3.2事件修饰符在@绑定后加小数点再跟后缀<divclass="div-par"@click="parent">parent<divclass="div-child"@click.stop="child">child</div></div>constparent=()=>console.log('parent')constchild=()=>console.log('child')<!--只有点到自己才触发--><divclass="div-par"@click.self="parent">图6.9.stop：点child不再冒泡TASK04v-model与表单01双向绑定02多种控件03修饰符6.4.1基本用法数据变更新视图，视图变同步数据，减少手改DOM<inputtype="text"v-model="msg"/><p>输入的内容是：{{msg}}</p>import{ref}from'vue'constmsg=ref('')图6.10输入框与下方文字同步自定义组件的v-model（modelValue）放到项目7。本课先把原生表单做稳。6.4.2多种表单元素控件不同，绑定的是同一套思路<textareav-model="content"></textarea><inputtype="radio"value="男"v-model="gender">男<inputtype="radio"value="女"v-model="gender">女<inputtype="checkbox"v-model="isAgree"><!--单个：布尔--><inputtype="checkbox"value="Vue"v-model="skills">Vue<!--多个：数组--><selectv-model="city"><optionvalue="">请选择城市</option><optionvalue="北京">北京</option></select>对照：单选绑一个值，多选复选绑数组多个radio共用一个v-model时只能选中其中一个各自声明•textarea→字符串content•radio组→同一个gender•单个checkbox→布尔isAgree•多个checkbox→数组skills•select→当前选中值city•选项本身仍可用v-for生成大觅表单•搜演出：文本v-model•购票须知勾选：单个checkbox•配送方式：radio组•城市站：select•兴趣栏目：多个checkbox数组6.4.3v-model修饰符默认在input事件同步；修饰符用来少写样板代码<inputv-model.lazy="note"/><inputv-model.trim="name"/><inputv-model.number="count"/>.lazy：在change（失焦）后再更新，少打扰。.trim：去两端空格。.number：尽量转数字，购票数量更合适。合计总价：数量用v-model.number，总价可先在方法里算，项目8再改成computed。不要把数量当字符串去乘价格。指令叠在一起v-if和v-for不要写在同一元素上<divv-if="!isLogin">请先登录</div><formv-else@submit.prevent="submit"><ul><liv-for="itemincart":key="item.id">{{item.title}}<inputv-model.number="item.count"/></li></ul><button>提交</button></form>收口骨架•外层v-if管登录/空态•内层ul再v-for•submit用.prevent防刷新•key用id•未登录不要只disable却仍提交•上机按这个骨架补样式即可上机3条件+列表+表单收口对准课标：一页里三样都在要求•未登录不能下单：条件渲染•票务或健康列表：v-for+稳定key•按钮加减或提交：v-on调方法•名称/数量等输入：v-model，必要时加trim/number•可选：合计总价或布局切换（教材作业方向）合格能填、能点、能出列表。缺key、v-if与v-for写在同一标签、表单提交整页刷新，不算过。作业效果对照合计总价+大图/列表两种布局图6.11合计总价图6.12大图模式图6.13列表模式健康页和大觅列表是同一套指令结构可以不同，不要复制两套v-for重复的一块•图片、标题、一句说明•价格或日期•数据：数组每一项对应一块•onMounted里Axios取health.json或猜你喜欢•空态用外层v-if，不要和v-for写在同一li字段按页面改名字•健康页：标题、简介、热量……•大觅：itemName、minPrice、imgUrl•key都用稳定id•点进详情：@click调方法，push带query.id•售罄：v-if或:class，不要复制两套卡片HTML回车搜索与表单提交按键别名和.prevent经常一起出现<inputv-model.trim="keyword"@keyup.enter="sea