Vue2向Vue3过度核心技术指令补充 亦凉 2024-03-24 21:33 18阅读 0赞 #### 目录 #### * * 1 指令修饰符 * * 1.1 什么是指令修饰符？ * 1.2 按键修饰符 * 1.3 v-model修饰符 * 1.4 事件修饰符 * 2 v-bind对样式控制的增强-操作class * * 2.1 语法： * 2.2 对象语法 * 2.3 数组语法 * 2.4 代码练习 * 3 京东秒杀-tab栏切换导航高亮 * * 3.1 需求： * 3.2 准备代码: * 3.3 思路： * 4 v-bind对有样式控制的增强-操作style * * 4.1 语法 * 4.2 代码练习 * 4.3 进度条案例 * 5 v-model在其他表单元素的使用 * * 5.1 讲解内容： * 5.2 代码准备 -------------------- ### 1 指令修饰符 ### ![在这里插入图片描述][8c3fed5273364cbe9586c50f6762b29e.png] #### 1.1 什么是指令修饰符？ #### 所谓指令修饰符就是通过“.”指明一些指令**后缀** 不同的**后缀**封装了不同的处理操作 —> 简化代码 #### 1.2 按键修饰符 #### * @keyup.enter —>当点击enter键的时候才触发 代码演示： <div id="app"> <h3>@keyup.enter → 监听键盘回车事件</h3> <input v-model="username" type="text"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username: '' }, methods: { } }) </script> #### 1.3 v-model修饰符 #### * v-model.trim —>去除首位空格 * v-model.number —>转数字 #### 1.4 事件修饰符 #### * @事件名.stop —> 阻止冒泡 * @事件名.prevent —>阻止默认行为 * @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为 <style> .father { width: 200px; height: 200px; background-color: pink; margin-top: 20px; } .son { width: 100px; height: 100px; background-color: skyblue; } </style> <div id="app"> <h3>v-model修饰符 .trim .number</h3> 姓名：<input v-model="username" type="text"><br> 年纪：<input v-model="age" type="text"><br> <h3>@事件名.stop → 阻止冒泡</h3> <div @click="fatherFn" class="father"> <div @click="sonFn" class="son">儿子</div> </div> <h3>@事件名.prevent → 阻止默认行为</h3> <a @click href="http://www.baidu.com">阻止默认行为</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { username: '', age: '', }, methods: { fatherFn () { alert('老父亲被点击了') }, sonFn (e) { // e.stopPropagation() alert('儿子被点击了') } } }) </script> ### 2 v-bind对样式控制的增强-操作class ### 为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 **class 类名** 和 **style 行内样式** 进行控制 。 #### 2.1 语法： #### <div> :class = "对象/数组">这是一个div</div> #### 2.2 对象语法 #### 当class动态绑定的是**对象**时，**键就是类名，值就是布尔值**，如果值是**true**，就有这个类，否则没有这个类 <div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div> 适用场景：一个类名，来回切换 #### 2.3 数组语法 #### 当class动态绑定的是**数组**时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表 <div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div> 使用场景:批量添加或删除类 #### 2.4 代码练习 #### <style> .box { width: 200px; height: 200px; border: 3px solid #000; font-size: 30px; margin-top: 10px; } .pink { background-color: pink; } .big { width: 300px; height: 300px; } </style> <div id="app"> <!--绑定对象--> <div class="box">黑马程序员</div> <!--绑定数组--> <div class="box">黑马程序员</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script> ### 3 京东秒杀-tab栏切换导航高亮 ### #### 3.1 需求： #### 当我们点击哪个tab页签时，哪个tab页签就高亮 #### 3.2 准备代码: #### <style> * { margin: 0; padding: 0; } ul { display: flex; border-bottom: 2px solid #e01222; padding: 0 10px; } li { width: 100px; height: 50px; line-height: 50px; list-style: none; text-align: center; } li a { display: block; text-decoration: none; font-weight: bold; color: #333333; } li a.active { background-color: #e01222; color: #fff; } </style> <div id="app"> <ul> <li><a class="active" href="#">京东秒杀</a></li> <li><a href="#">每日特价</a></li> <li><a href="#">品类秒杀</a></li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '京东秒杀' }, { id: 2, name: '每日特价' }, { id: 3, name: '品类秒杀' } ] } }) </script> #### 3.3 思路： #### 1.基于数据，动态渲染tab（v-for） 2.准备一个下标 记录高亮的是哪一个 tab 3.基于下标动态切换class的类名 ### 4 v-bind对有样式控制的增强-操作style ### #### 4.1 语法 #### <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div> #### 4.2 代码练习 #### <style> .box { width: 200px; height: 200px; background-color: rgb(187, 150, 156); } </style> <div id="app"> <div class="box"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script> #### 4.3 进度条案例 #### <style> .progress { height: 25px; width: 400px; border-radius: 15px; background-color: #272425; border: 3px solid #272425; box-sizing: border-box; margin-bottom: 30px; } .inner { width: 50%; height: 20px; border-radius: 10px; text-align: right; position: relative; background-color: #409eff; background-size: 20px 20px; box-sizing: border-box; transition: all 1s; } .inner span { position: absolute; right: -20px; bottom: -25px; } </style> <div id="app"> <div class="progress"> <div class="inner"> <span>50%</span> </div> </div> <button>设置25%</button> <button>设置50%</button> <button>设置75%</button> <button>设置100%</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script> ### 5 v-model在其他表单元素的使用 ### #### 5.1 讲解内容： #### 常见的表单元素都可以用 v-model 绑定关联 → 快速 **获取** 或 **设置** 表单元素的值 它会根据 **控件类型** 自动选取 **正确的方法** 来更新元素 输入框 input:text ——> value 文本域 textarea ——> value 复选框 input:checkbox ——> checked 单选框 input:radio ——> checked 下拉菜单 select ——> value ... #### 5.2 代码准备 #### <style> textarea { display: block; width: 240px; height: 100px; margin: 10px 0; } </style> <div id="app"> <h3>小黑学习网</h3> 姓名： <input type="text"> <br><br> 是否单身： <input type="checkbox"> <br><br> <!-- 前置理解： 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥 2. value: 给单选框加上 value 属性，用于提交给后台的数据 结合 Vue 使用 → v-model --> 性别: <input type="radio">男 <input type="radio">女 <br><br> <!-- 前置理解： 1. option 需要设置 value 值，提交给后台 2. select 的 value 值，关联了选中的 option 的 value 值 结合 Vue 使用 → v-model --> 所在城市: <select> <option>北京</option> <option>上海</option> <option>成都</option> <option>南京</option> </select> <br><br> 自我描述： <textarea></textarea> <button>立即注册</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script> [8c3fed5273364cbe9586c50f6762b29e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/3e8fef328b8948339cd1f380cc0e7e35.png
相关 Vue2向Vue3过度核心技术综合案例 目录 1 面经基础版-案例效果分析 1.面经效果演示 2.功能分析 3.实现思路分析：配置路由 曾经终败给现在/ 2024年03月24日 21:50/ 0 赞/ 132 阅读
相关 Vue2向Vue3过度核心技术插槽 目录 1 插槽-默认插槽 1.作用 2.需求 3.问题 4.插槽的基本语 Love The Way You Lie/ 2024年03月24日 21:48/ 0 赞/ 113 阅读
相关 Vue2向Vue3过度核心技术组件通信 目录 1 组件基础知识scoped解决样式冲突 1.1 默认情况： 1.2 代码演示 1.3 浅浅的花香味﹌/ 2024年03月24日 21:37/ 0 赞/ 117 阅读
相关 Vue2向Vue3过度核心技术生命周期 目录 1 Vue生命周期 2 Vue生命周期钩子 3 生命周期钩子小案例 1.1 在created中发送数据 小灰灰/ 2024年03月24日 21:35/ 0 赞/ 121 阅读
相关 Vue2向Vue3过度核心技术watch侦听器 目录 1 watch侦听器 1.1 作用： 1.2 语法： 1.3 侦听器代码准备 以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 89 阅读
相关 Vue2向Vue3过度核心技术指令补充 目录 1 指令修饰符 1.1 什么是指令修饰符？ 1.2 按键修饰符 1.3 v-model修 亦凉/ 2024年03月24日 21:33/ 0 赞/ 19 阅读
相关 Vue2向Vue3过度核心技术快速入门 目录 1 为什么要学习Vue 2 什么是Vue 1.1 什么是构建用户界面 1.2 什么是渐进式 àì夳堔傛蜴生んèń/ 2024年03月24日 20:59/ 0 赞/ 14 阅读
曾经终败给现在
港控/mmm°
小灰灰
亦凉
àì夳堔傛蜴生んèń
还没有评论，来说两句吧...