三、Vue3 模板语法

文章目录一、插值语法二、指令Directives1. v-bind给属性装上“动态天线”案例2. v-on网页的“神经末梢”案例3. v-if vs v-show网页元素的“生死”与“隐身”案例4. v-for无情的“复印机”为什么必须绑定 :key案例5. v-model神奇的“双向奔赴”深入底层原理它是怎么实现的案例总结模板语法就是教你在 HTML 标签里怎么去写 Vue 的控制逻辑。一、插值语法使用双大括号{{ }}将 JS 变量或表达式直接嵌入到 HTML 文字中。p当前登录用户{{ username }}/pp加急工单翻倍数量{{ count * 2 }}/p二、指令Directives指令是带有v-前缀的特殊属性负责给 HTML 标签赋予动态超能力。1.v-bind给属性装上“动态天线”传统的 HTML 属性是死板的比如img srca.jpg它只能认字符串。v-bind的作用就是给属性装上一根天线让它可以接收 JS 里的变量。只要变量一变属性的值跟着变。简写直接把v-bind:简写成一个冒号:。案例假设我们要做一个“用户主页卡片”用户的头像、主页链接甚至是不是 VIP 的样式都是动态从后端获取的scriptsetupimport{ref}fromvueconstavatarUrlref(https://vuejs.org/images/logo.png)constprofileUrlref(https://vuejs.org/guide/introduction.html)constisVipref(true)// 是否是 VIP 用户/scripttemplatedivclassuser-cardimg:srcavatarUrlalt用户头像/a:hrefprofileUrl点击查看个人主页/adiv:class{ vip-style: isVip, normal-style: !isVip }会员状态{{ isVip ? 尊贵VIP : 普通用户 }}/div/div/templatestylescoped.vip-style{color:gold;border:2px solid gold;padding:10px;}.normal-style{color:#333;}/style2.v-on网页的“神经末梢”用户在网页上的所有动作点击、打字、鼠标悬停、回车Vue 都想监听到。v-on就是网页的神经末梢。简写把v-on:简写成。案例做一个简单的“点赞与计数”功能带上传参和阻止默认事件scriptsetupimport{ref}fromvueconstlikesref(0)// 1. 无参数方法functionaddLike(){likes.value}// 2. 带参数方法functiondeleteItem(itemName){alert(删除了${itemName})}// 3. 事件修饰符方法functionhandleFormSubmit(){alert(表单提交成功页面没有刷新)}/scripttemplatedivclassboxbuttonclickaddLike点赞 ({{ likes }})/buttonbuttonclickdeleteItem(大西瓜)删除西瓜/buttonformsubmit.preventhandleFormSubmitinputtypetextplaceholder输入内容/buttontypesubmit提交表单/button/form/div/template3.v-ifvsv-show网页元素的“生死”与“隐身”这两个指令看起来效果一模一样都是让东西显示/隐藏但底层逻辑天差地别v-if是“肉体毁灭”条件为 false 时Vue直接把这个 HTML 标签从网页里拔掉在 F12 开发者工具里连渣都不剩。v-show是“物理隐身”不管真假标签永远都在网页里。假的时候Vue 只是偷偷给它加了 CSS 样式display: none;。案例scriptsetupimport{ref}fromvueconstisLoggedref(false)// 登录状态constshowMenuref(false)// 菜单显示状态functiontoggleLogin(){isLogged.value!isLogged.value}functiontoggleMenu(){showMenu.value!showMenu.value}/scripttemplatedivclasscontainerbuttonclicktoggleLogin切换登录状态/buttonbuttonclicktoggleMenu切换菜单显示/buttonhr/divv-ifisLoggedclassadmin-panelh3敏感数据后台/h3p只有登录后这段 HTML 才会创建出来。/p/divdivv-elsep请先登录.../p/divulv-showshowMenuclassmenu-listli首页/lili关于我们/lili联系我们/li/ul/div/template总结频繁切换用v-show省去创建/销毁的性能开销。运行后很少改变或者涉及权限安全用v-if不满足条件时压根不渲染初次加载快且安全。4.v-for无情的“复印机”v-for就是个循环复印机拿着一个数组按照你写的模板一遍遍地把数据“印”在网页上。口诀v-for(每一项, 下标) in 数组 :key唯一标识为什么必须绑定:keyVue 在更新网页时用的是虚拟 DOM 比对Diff 算法。想象一下网页上有 3 个输入框张三、李四、王五。如果没有:key身份证号当你把“李四”删掉时Vue 只知道“少了一个框”它会图省事直接把第 3 个框王五删掉然后把第 2 个框的内容改成王五。这就会导致如果你在李四的输入框里打了字删掉李四后那些字会莫名其妙错位跑到王五的框里去有了:keyitem.idVue 就能精准识别“哦李四彻底消失了王五只是往上挪了一位位置保留。”案例scriptsetupimport{ref}fromvue// 模拟待办事项列表每个事项都有一个唯一的 idconsttodoListref([{id:101,text:学习 Vue3 基础},{id:102,text:去健身房跑步},{id:103,text:给女朋友买礼物}])functiondeleteTodo(id){// 过滤掉被删除的 idtodoList.valuetodoList.value.filter(itemitem.id!id)}/scripttemplatedivclasstodo-apph3我的待办事项/h3ulliv-for(item, index) in todoList:keyitem.id序号: {{ index 1 }} —— 内容: {{ item.text }}buttonclickdeleteTodo(item.id)❌ 删除/button/li/ul/div/template5.v-model神奇的“双向奔赴”普通绑定是单向的JS 变了页面变。但表单输入框是让用户打字的用户打字了JS 里的变量怎么知道v-model就是双向绑定数据 - 视图你在 JS 里把message.value Hello输入框里立刻显示 ‘Hello’。视图 - 数据用户在输入框里把 ‘Hello’ 删掉改成了 ‘Hi’JS 里的message.value自动变成了Hi。深入底层原理它是怎么实现的v-model没有任何魔法它只是一个语法糖组合包。当你写input v-modelsearchText /时Vue 底层其实偷偷帮你把它拆成了两句话input:valuesearchTextinputsearchText $event.target.value/:valuesearchText单向绑定负责把 JS 变量塞进输入框数据 - 视图。input...监听输入事件只要用户打字就触发事件把输入框当前最新的值($event.target.value)赋值给 JS 变量视图 - 数据。案例scriptsetupimport{ref}fromvueconsttext1ref(我是快捷方式)consttext2ref(我是底层原理)/scripttemplatedivclassform-demodivclassboxp输入框1 的值是: {{ text1 }}/pinputv-modeltext1typetextplaceholder标准双向绑定//divhr/divclassboxp输入框2 的值是: {{ text2 }}/pinput:valuetext2inputtext2 $event.target.valuetypetextplaceholder原理解析绑定//div/div/templatestylescoped.box{margin:20px 0;}input{padding:8px;width:250px;}/style总结记住这五个核心指令的定位写 Vue 页面就能游刃有余了需要改标签属性URL、样式、图片 src用:(v-bind)需要监听用户动作点击、提交、按键用(v-on)需要控制显示隐藏频繁切换用v-show权限安全/单次决定用v-if需要遍历数组渲染列表用v-for并务必带上:key用户输入框、表单收集数据用v-model双向绑定