php网站的推广方式,腾讯云 建网站,网站开发专业感想,重庆是哪个省份的城市Vue 学习之旅#xff1a;核心技术学习总结与实战案例分享 文章目录 Vue 学习之旅#xff1a;核心技术学习总结与实战案例分享一、指令补充#xff08;一#xff09;指令修饰符#xff08;二#xff09;v-bind 对样式操作的增强#xff08;三#xff09;v-model 应用于其…Vue 学习之旅核心技术学习总结与实战案例分享 文章目录 Vue 学习之旅核心技术学习总结与实战案例分享一、指令补充一指令修饰符二v-bind 对样式操作的增强三v-model 应用于其他表单元素Vue 的 v-model 指令在表单元素中的应用一、输入框input:text二、复选框input:checkbox三、单选框input:radio四、下拉菜单select五、文本域textarea 二、计算属性一基础概念与语法二计算属性与方法的区别三计算属性的完整写法 三、侦听器一基础语法与作用二完整写法与配置项 四、综合案例水果购物车一、HTML结构搭建一顶部banner与面包屑二购物车主体与空车提示三购物车表格结构**item.isChecked 的作用与使用****全选功能的实现isAll 计算属性** 在 Vue 的学习过程中今天我们深入探索了一些关键的技术点包括指令补充、计算属性、侦听器以及综合案例的应用。这些技术点相互配合为构建强大的 Vue 应用提供了坚实的基础。 一、指令补充
一指令修饰符
指令修饰符通过在指令后添加特定的后缀简化了代码编写并实现了一些特定的功能。
按键修饰符例如 keyup.enter用于监听键盘回车事件。在实际应用中比如在一个搜索框组件中当用户按下回车键时可以触发 search 搜索操作。
input keyup.entersearchv-model 修饰符 v-model.trim能够去除输入内容的首尾空格。在用户注册表单中当用户输入用户名时使用该修饰符可以确保输入的用户名前后没有多余的空格提高数据的准确性。而中间的空格会被看作是用户想输入的内容进行保留。v-model.number可将输入内容转换为数字类型。在处理数字输入的场景如商品数量输入框能方便地获取正确的数据类型。正确转换后会显示蓝色。 事件修饰符 事件名.stop阻止事件冒泡。在嵌套的元素事件处理中如果内层元素的事件触发不希望影响到外层元素的相同事件就可以使用该修饰符。例如在一个列表项的点击事件中防止点击事件冒泡到父元素的点击事件处理函数。所以一般 .stop 会放在子元素中。 h3事件名.stop → 阻止冒泡/h3div clickfatherFn classfatherdiv click.stopsonFn classson儿子/div/div事件名.prevent阻止默认行为。比如在表单提交按钮的点击事件中如果需要在提交前进行一些自定义验证且不希望表单自动提交可以使用该修饰符阻止默认的提交行为。如当不想超链接跳转到另一个网页时就可以使用其来阻止跳转。 h3事件名.prevent → 阻止默认行为/h3a click.prevent hrefhttp://www.baidu.com阻止默认行为/a二v-bind 对样式操作的增强
操作 class 语法为 class对象/数组。当使用对象语法时键是类名值为布尔值如果值为 true则元素会添加对应的类名否则不添加。例如
div classbox :class{ active: isActive, text-bold: isBold }/div这里的 isActive 和 isBold 是 Vue 实例中的数据属性根据它们的值动态切换类名。这种方式适用于单个类名需要根据条件来回切换的场景比如一个按钮的激活态和非激活态的样式切换。 数组语法则是将数组中的所有类名都添加到元素上如 div classbox :class[ pink, big ]/div适用于批量添加或删除类名的情况比如在不同的页面主题切换时一次性添加或移除一组相关的类名。 操作 style 语法为 style样式对象例如 div classbox :style{ color: textColor, fontSize: fontSize px }/div。这里的 textColor 和 fontSize 是 Vue 实例中的数据属性通过这种方式可以实现对元素具体样式属性的动态设置。在一个可定制主题的页面中可以根据用户的选择动态改变文字颜色和字体大小等样式。 如同时要记住看见特殊的属性如background-color 需要加单引号处理 ’ ’ div classbox :style {width : 400px , height : 400px , background-color : green}/div举个例子 首先通过 v-for 指令循环渲染导航栏的每个选项利用 :key 绑定每个选项的 id。 给每个选项添加 click 事件点击时更新 activeIndex 的值。 使用 :class 指令结合 activeIndex 动态为当前选中的选项添加 active 类实现样式切换从而完成 tab 导航栏的切换功能。 完整源码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {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
/head
bodydiv idappulli v-for (item , index) in list :key item.id clickactiveIndex indexa :class{active : index activeIndex} href#{{ item.name }}/a/li/ul/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 0,list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})app.mount(#app)/script
/body
/html结果展示为
通过点击“每日特价”后会变成 三v-model 应用于其他表单元素
Vue 的 v-model 指令在表单元素中的应用
在 Vue 中v-model 是一个强大的指令它为表单元素提供了双向数据绑定的功能使表单数据的处理变得更加简洁和直观。以下是对其在不同表单元素中应用的详细说明。
一、输入框input:text
输入框通常用于接收用户输入的文本信息。使用 v-model 可以轻松实现输入框与 Vue 实例中的数据属性的双向绑定让数据的更新变得自动且实时。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 简单的样式设置用于输入框 */input {margin-bottom: 10px;}/style
/head
bodydiv idapph3输入框示例/h3!-- 使用 v-model 将输入框的值与 Vue 实例中的 username 属性进行双向绑定 --input typetext v-modelusername placeholder请输入用户名 /divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 存储输入框中的用户名username: }});app.mount(#app);/script
/body
/html代码解释
v-modelusername将输入框与 Vue 实例中的 username 属性进行双向绑定。当用户在输入框中输入文本时username 属性的值会实时更新反之当 username 属性的值发生改变时输入框中的内容也会相应更新。
二、复选框input:checkbox
复选框通常用于表示二进制选择例如用户是否同意某些条款或具有某种属性。使用 v-model 可以将复选框的选中状态与 Vue 实例中的布尔值属性关联起来。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 简单的样式设置用于复选框 */input {margin-bottom: 10px;}/style
/head
bodydiv idapph3复选框示例/h3!-- 使用 v-model 将复选框的选中状态与 Vue 实例中的 isSingle 属性进行双向绑定 --input typecheckbox v-modelisSingle 是否单身/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 存储复选框的选中状态默认为 falseisSingle: false }});app.mount(#app);/script
/body
/html代码解释
v-modelisSingle将复选框的 checked 属性与 Vue 实例中的 isSingle 属性进行双向绑定。当用户勾选或取消勾选复选框时isSingle 属性的值会在 true 和 false 之间切换反之当 isSingle 的值被修改时复选框的选中状态也会相应改变。
三、单选框input:radio
单选框用于在多个选项中选择一个。为了确保单选框的互斥性需要将它们分组并使用 v-model 将组内单选框的选中值与 Vue 实例中的属性关联。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 简单的样式设置用于单选框 */input {margin-bottom: 10px;}/style
/head
bodydiv idapph3单选框示例/h3!-- 为单选框分组并使用 v-model 将选中值与 Vue 实例中的 gender 属性进行双向绑定 --性别: input typeradio namegender v-modelgender value1 男input typeradio namegender v-modelgender value2 女/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 存储单选框的选中值默认为 gender: }});app.mount(#app);/script
/body
/html代码解释
namegender为单选框分组确保同一组内的单选框互斥。v-modelgender将单选框组的选中值与 Vue 实例中的 gender 属性进行双向绑定。当用户选择一个单选框时gender 属性的值会更新为该单选框的 value反之当 gender 属性的值被修改时相应的单选框会被选中。
四、下拉菜单select
下拉菜单提供了多个选项供用户选择。使用 v-model 可以将用户的选择与 Vue 实例中的属性关联。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 简单的样式设置用于下拉菜单 */select {margin-bottom: 10px;}/style
/head
bodydiv idapph3下拉菜单示例/h3!-- 使用 v-model 将下拉菜单的选中值与 Vue 实例中的 cityId 属性进行双向绑定 --所在城市:select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/select/divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 存储下拉菜单的选中值默认为 101cityId: 101 }});app.mount(#app);/script
/body
/html代码解释
v-modelcityId将下拉菜单的选中值与 Vue 实例中的 cityId 属性进行双向绑定。当用户选择一个选项时cityId 属性的值会更新为该选项的 value反之当 cityId 属性的值被修改时相应的选项会被选中。
五、文本域textarea
文本域用于输入多行文本。使用 v-model 可以实现文本域内容与 Vue 实例中的属性的双向绑定。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 简单的样式设置用于文本域 */textarea {display: block;width: 240px;height: 100px;margin-bottom: 10px;}/style
/head
bodydiv idapph3文本域示例/h3!-- 使用 v-model 将文本域的内容与 Vue 实例中的 desc 属性进行双向绑定 --自我描述textarea v-modeldesc/textarea /divscript src./vue.js/scriptscriptconst app new Vue({el: #app,data: {// 存储文本域中的内容默认为 desc: }});app.mount(#app);/script
/body
/html代码解释
v-modeldesc将文本域的内容与 Vue 实例中的 desc 属性进行双向绑定。当用户在文本域中输入文本时desc 属性的值会实时更新反之当 desc 属性的值发生改变时文本域中的内容也会相应更新。
二、计算属性
一基础概念与语法
计算属性是基于现有的数据计算出来的新属性当依赖的数据发生变化时会自动重新计算。其语法是在 computed 配置项中声明一个计算属性对应一个函数使用时就像普通属性一样通过 {{ 计算属性名 }} 在模板中使用。例如
data: { list: [{ id: 3, name: 铅笔, num: 5 },{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 }]
},
computed: {totalCount() {return this.list.reducedata: {list: [{ id: 3, name: 铅笔, num: 5 },{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 }]
},
computed: {totalCount() {return this.list.reduce((sum, item) sum item.num, 0); // 0是求和的起始值}
}在上述代码中totalCount 计算属性会根据 list 数组中每个元素的 num 属性计算出总数。每当 list 数组发生变化时totalCount 会自动重新计算保证数据的实时性和准确性。
二计算属性与方法的区别
计算属性主要用于封装对数据的处理并求得一个结果它作为属性直接使用如 {{ totalCount }}。而方法是定义在 methods 配置项中需要通过 this.方法名() 进行调用如 clickdoSomething。计算属性具有缓存特性会对计算结果进行缓存再次使用时直接读取缓存只有当依赖项变化时才会重新计算并更新缓存这在性能上有很大的优势。相比之下方法每次调用都会执行一遍函数内的代码。
三计算属性的完整写法
计算属性默认的简写形式只能读取访问不能直接修改。若要实现修改功能则需要使用完整写法。例如
computed: {fullName: {get() {return this.firstName this.lastName;},set(newValue) {const names newValue.split( );this.firstName names[0];this.lastName names[names.length - 1];}}
}在这个例子中fullName 计算属性有 get 和 set 方法get 方法用于获取计算后的全名set 方法用于根据设置的新值分解并更新 firstName 和 lastName。
三、侦听器
一基础语法与作用
侦听器watch用于监视数据变化并在数据变化时执行一些业务逻辑或异步操作。简单写法是直接监视简单类型数据例如
watch: {dataPropertyName(newValue, oldValue) {// 一些业务逻辑或异步操作}
}这里的 dataPropertyName 是 Vue 实例中的数据属性当它的值发生变化时会触发对应的函数执行。
二完整写法与配置项
完整写法可以添加额外的配置项如 deep: true 用于对复杂类型进行深度监视immediate: true 则在初始化时立刻执行一次 handler 方法。例如
data: {obj: {words: 苹果,lang: italy}
},
watch: {obj.words: {deep: true,immediate: true,handler(newValue) {console.log(newValue);}}
}在这个例子中当 obj 中的 words 属性发生变化时会触发 handler 函数执行并且由于 deep: true即使 words 是 obj 的嵌套属性也能被正确监视immediate: true 使得页面加载时就会执行一次 handler 函数进行初始处理。
四、综合案例水果购物车
一、HTML结构搭建
整体页面结构围绕 id 为 app 的 div 元素构建这个元素是Vue应用的挂载点。
一顶部banner与面包屑
!-- 顶部banner --
div classbanner-boximg src./img/fruit.jpg alt //div
!-- 面包屑 --
div classbreadcrumbspan/span/span购物车/span
/div顶部的 banner-box 用于展示一张购物车相关的图片面包屑导航则方便用户了解自己所处的页面位置以 / 分隔展示层级关系增强用户体验。
二购物车主体与空车提示
!-- 购物车主体 --
div classmain v-iffruitList.length 0!-- 购物车表格内容包含头部、身体和底部 --
/div
!-- 空车 --
div classempty v-else空空如也/div这里使用 v-if 和 v-else 指令根据 fruitList 数组的长度判断显示购物车主体还是空车提示信息。若 fruitList 有数据显示购物车主体否则展示空车的提示。
三购物车表格结构
购物车表格结构分为头部、身体和底部三部分。
!-- 头部 --
div classtheaddiv classtrdiv classth选中/divdiv classth th-pic图片/divdiv classth单价/divdiv classth num-th个数/divdiv classth小计/divdiv classth操作/div/div
/div
!-- 身体 --
div classtbodydiv v-for(item, index) in fruitList :keyitem.id classtr :class{active : item.isChecked}div classtdinput typecheckbox v-modelitem.isChecked checked //divdiv classtdimg :srcitem.icon alt //divdiv classtd{{item.price}}/divdiv classtddiv classmy-input-numberbutton :disableditem.num 1 classdecrease clicksum(item.id) - /buttonspan classmy-input__inner{{item.num}}/spanbutton classincrease clickadd(item.id) /button/div/divdiv classtd{{item.price * item.num}}/divdiv classtdbutton clickdel(item.id)删除/button/div/div
/div
!-- 底部 --
div classbottom!-- 全选 --label classcheck-allinput typecheckbox v-modelisAll/全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice{{ totalPrice }}/span/span!-- 结算按钮 --button classpay结算( {{totalCount}} )/button/div
/div头部定义了表格各列的标题。身体部分通过 v-for 指令循环渲染每一行商品信息:key 绑定每个商品的唯一 id方便Vue高效地更新和渲染列表。同时通过 :class 指令根据商品的 isChecked 状态动态添加 active 类用于设置选中商品的样式。每个商品行包含复选框、商品图片、单价、数量输入框、小计和删除按钮。底部则有全选复选框以及显示总价和结算按钮的区域其中总价和结算数量通过插值表达式。接下来为更细分的讲解
这段购物车表格结构代码实现了购物车中商品信息的展示、交互以及相关数据的计算与呈现以下是对 item.isChecked 等关键内容以及商品总价计算方法的总结 item.isChecked 的作用与使用 作用item.isChecked 是购物车中每个商品对象的一个布尔属性用于表示该商品是否被选中 。通过这个属性实现了商品的选中状态管理进而支持全选、反选以及计算选中商品的总价和总数量等功能。在代码中的使用在表格的商品行中input typecheckbox v-modelitem.isChecked checked / 这一行代码将复选框的选中状态与商品对象的 isChecked 属性进行双向绑定。当用户勾选或取消勾选复选框时item.isChecked 的值会相应地改变反之当 item.isChecked 的值通过代码逻辑改变时复选框的选中状态也会同步更新。同时在表格行的样式绑定中:class{active : item.isChecked} 根据 item.isChecked 的值来动态添加或移除 active 类从而改变选中商品行的样式增强用户交互体验。 全选功能的实现isAll 计算属性 实现方式全选功能通过计算属性 isAll 来实现它具有 get 和 set 方法。 get 方法
get () {return this.fruitList.every(item item.isChecked);
}get 方法通过 every 方法遍历 fruitList 数组检查数组中的每个商品的 isChecked 属性是否都为 true。只有当所有商品的 isChecked 都为 true 时isAll 计算属性才返回 true此时全选复选框会被勾选否则全选复选框不勾选。 set 方法
set (value) {this.fruitList.forEach(item item.isChecked value);
}当全选复选框的状态发生改变时set 方法会被调用。它通过 forEach 方法遍历 fruitList 数组将每个商品的 isChecked 属性设置为与全选复选框相同的值实现全选和反选的功能。 3. ##### 商品总价计算totalPrice 计算属性
- **计算方法**通过 totalPrice 计算属性来计算选中商品的总价。totalPrice() {return this.fruitList.reduce((sum, item) {if(item.isChecked){return sum item.num * item.price;} else {return sum;}}, 0);
}在 totalPrice 计算属性中使用 reduce 方法遍历 fruitList 数组。对于数组中的每个商品如果该商品被选中item.isChecked 为 true则将其单价item.price乘以数量item.num并累加到 sum 中如果未被选中则直接返回 sum。最后返回累加的结果即选中商品的总价。在表格底部的总价展示区域通过插值表达式 {{ totalPrice }} 将计算出的总价实时显示在页面上。 4. ##### 商品总数量计算totalCount 计算属性
- **计算方法**totalCount 计算属性用于计算选中商品的总数量。totalCount() {return this.fruitList.reduce((sum, item) {if(item.isChecked){return sum item.num;} else {return sum;}}, 0);
}与计算总价类似totalCount 也使用 reduce 方法遍历 fruitList 数组。当商品被选中时将其数量item.num累加到 sum 中未选中则直接返回 sum。最终返回的 sum 就是选中商品的总数量同样在结算按钮旁边通过插值表达式 {{totalCount}} 展示在页面上。
