百度站长管理平台,餐饮加盟网网站建设,网站建设办公,做网站是否要备案文章目录 版权声明一 指令修饰符1. 什么是指令修饰符#xff1f;2. 按键修饰符3. v-model修饰符4. 事件修饰符 二 v-bind对样式控制的增强-操作class1. 语法#xff1a;2. 对象语法3. 数组语法4. 代码练习 三 京东秒杀-tab栏切换导航高亮四 v-bind对有样式控制的增强-操作sty… 文章目录 版权声明一 指令修饰符1. 什么是指令修饰符2. 按键修饰符3. v-model修饰符4. 事件修饰符 二 v-bind对样式控制的增强-操作class1. 语法2. 对象语法3. 数组语法4. 代码练习 三 京东秒杀-tab栏切换导航高亮四 v-bind对有样式控制的增强-操作style1.语法2.代码练习3.进度条案例 五 v-model在其他表单元素的使用1. 讲解内容2. 代码 六 computed计算属性1. 概念2. 语法3. 注意4. 案例5. 代码 七 computed计算属性 VS methods方法1.computed计算属性2.methods计算属性3.计算属性的优势4.总结 八 计算属性的完整写法九 综合案例-成绩案例十 watch侦听器监视器1.作用2.语法3.侦听器代码 十一 翻译案例-代码实现十二 watch侦听器1.语法2.需求3.代码实现 4.总结 十三 综合案例 版权声明
本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用并非商业用途。我在整理学习笔记的过程中尽力确保准确性但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。若您是黑马程序员或相关权利人如有任何侵犯版权的地方请您及时联系我我将立即予以删除或进行必要的修改。对于其他读者请在阅读本博客内容时保持遵守相关法律法规和道德准则谨慎参考并自行承担因此产生的风险和责任。
一 指令修饰符 1. 什么是指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 — 简化代码
2. 按键修饰符
keyup.enter —当点击enter键的时候才触发
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3keyup.enter → 监听键盘回车事件/h3input v-modelusername typetext keyup.enter/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {fn() {console.log(this.username)}}})/script
/body
/html3. v-model修饰符 v-model.trim —去除首位空格 v-model.number —转数字 h3v-model修饰符 .trim .number/h3姓名input v-model.trimusername typetext br年纪input v-model.numberage typetextbr4. 事件修饰符
事件名.stop — 阻止冒泡事件名.prevent —阻止默认行为事件名.stop.prevent —可以连用 即阻止事件冒泡也阻止默认行为
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}/style
/head
bodydiv idapph3v-model修饰符 .trim .number/h3姓名input v-model.trimusername typetext br年纪input v-model.numberage typetextbrh3事件名.stop → 阻止冒泡/h3div clickfatherFn classfather div click.stopsonFn classson 儿子/div/divh3事件名.prevent → 阻止默认行为/h3a hrefhttp://www.baidu.com click.prevent 阻止默认行为/a/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,age: ,},methods: {fatherFn () {alert(老父亲被点击了)},sonFn () {alert(儿子被点击了)}}})/script
/body
/html二 v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制 。
1. 语法
div :class 对象/数组这是一个div/div2. 对象语法
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div适用场景一个类名来回切换 div classbox :class{ pink: true, big: true }黑马程序员/div3. 数组语法
当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表
div classbox :class[ 类名1, 类名2, 类名3 ]/div使用场景:批量添加或删除类
div classbox :class[pink]黑马程序员/div4. 代码练习
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/head
bodydiv idappdiv classbox :class{ pink: true, big: true }黑马程序员/divdiv classbox :class[pink]黑马程序员/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body
/html三 京东秒杀-tab栏切换导航高亮
需求 当点击tab页签时被点击tab页签就高亮 思路 基于数据动态渲染tabv-for准备一个下标 记录高亮的是哪一个 tab基于下标动态切换class的类名 案例演示
!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 clickactiveIndexindex v-for(item,index) in list :keyindex a :class{active : activeIndexindex} href#{{item.name}}/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 2,list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body
/html四 v-bind对有样式控制的增强-操作style
1.语法
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div2.代码练习
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}/style
/head
bodydiv idappdiv classbox :style{width: 400px,backgroundColor: green} /div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body
/html3.进度条案例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/head
bodydiv idappdiv classprogressdiv classinner :style{ width: percent % }span{{percent}}%/span/div/divbutton clickpercent25设置25%/buttonbutton clickpercent50设置50%/buttonbutton clickpercent75设置75%/buttonbutton clickpercent100设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 30}})/script
/body
/html 五 v-model在其他表单元素的使用
1. 讲解内容
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值。它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text —— value
文本域 textarea —— value
复选框 input:checkbox —— checked
单选框 input:radio —— checked
下拉菜单 select —— value
...2. 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusernamebrbr是否单身input typecheckbox v-modelisSinglebrbr!--前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别:input typeradio namegender v-modelgender value1男input typeradio namegemder v-modelgender value2女brbr!--前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-model.trimcityIdoption value1 北京/optionoption value2上海/optionoption value3成都/optionoption value4南京/option/selectbrbr自我描述textarea v-modeldesc/textareabutton立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 2,cityId: 102,desc: }})/script
/body
/html 六 computed计算属性
1. 概念
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
2. 语法
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}}
3. 注意
computed配置项和data配置项是同级的computed中的计算属性虽然是函数的写法但他依然是个属性computed中的计算属性不能和data中的属性同名使用computed中的计算属性和使用data中的属性是一样的用法computed中计算属性内部的this依然指向的是Vue实例
4. 案例
比如使用计算属性实现下面这个业务场景 5. 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/style
/head
bodydiv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{count}} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed:{count() {let total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body
/html七 computed计算属性 VS methods方法
1.computed计算属性
作用封装了一段对于数据的处理求得一个结果
语法
写在computed配置项中作为属性直接使用 js中使用计算属性 this.计算属性模板中使用计算属性{{计算属性}}
2.methods计算属性
作用给Vue实例提供一个方法调用以处理业务逻辑。
语法
写在methods配置项中作为方法调用 js中调用this.方法名()模板中调用 {{方法名()}} 或者 事件名“方法名”
3.计算属性的优势
缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存methods没有缓存特性通过代码比较
styletable {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}/stylediv idapph3小黑的礼物清单span?/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ totalCount }} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 3 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {let total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script4.总结 computed有缓存特性methods没有缓存 当一个结果依赖其他多个值时推荐使用计算属性 当处理业务逻辑时推荐使用methods方法比如事件的处理函数
八 计算属性的完整写法
计算属性也是属性能访问应该也能修改
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法
完整写法代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput {width: 30px;}/style
/head
bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备,},methods: {changeName () {this.fullName 黄忠}},computed: {// 完整写法 → 获取 设置fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get () {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value) {this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/body
/html 九 综合案例-成绩案例 功能描述
渲染功能删除功能添加功能统计总分求平均分
思路分析
渲染功能 v-for :key v-bind:动态绑定class的样式删除功能 v-on绑定事件 阻止a标签的默认行为v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据使用计算属性computed 计算总分和平均分的值
!DOCTYPE html
html langen
headmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./styles/index.css /titleDocument/titlestylea {text-decoration: none;color: #3f85ed;}/style
/head
bodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length 0 tr v-for(item, index) in list :keyitem.idtd{{index}}/tdtd{{item.subject}}/tdtd :class{red : item.score60 }{{item.score}}/tdtda href# click.preventdel(item.id)删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{ totalScore }}/spanspan stylemargin-left: 50px 平均分{{averageScore}}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinputtypetextplaceholder请输入科目v-model.trimsubject//div/divdiv classform-itemdiv classlabel分数/divdiv classinputinputtypetextplaceholder请输入分数v-model.numberscore//div/divdiv classform-itemdiv classlabel/divdiv classinputbutton classsubmit clickadd keyup.enteradd添加/button/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, subject: 语文, score: 20 },{ id: 7, subject: 数学, score: 99 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },methods:{del(id) {this.list this.list.filter(item item.id ! id)},add() {if (!this.subject) {alert(请输入科目)return}if (typeof this.score ! number) {alert(请输入正确的成绩)return}this.list.unshift({id: new Date(),subject: this.subject,score: this.score})this.subject this.score }},computed:{totalScore(){return this.list.reduce((sum,item)sumitem.score,0)},averageScore () {if (this.list.length 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}}})/script
/body
/html十 watch侦听器监视器
1.作用
监视数据变化执行一些业务逻辑或异步操作
2.语法
watch同样声明在跟data同级的配置项中简单写法 简单类型数据直接监视完整写法添加额外配置项
data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}3.侦听器代码 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {// words: obj: {words: }},// 具体讲解(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值一般不用// words (newValue) {// console.log(变化了, newValue)// }obj.words (newValue) {console.log(变化了, newValue)}}})/script/body
/html十一 翻译案例-代码实现 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ result }}/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {// words: obj: {words: },result: , // 翻译结果// timer: null // 延时器id},// 具体讲解(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值一般不用// words (newValue) {// console.log(变化了, newValue)// }obj.words (newValue) {// console.log(变化了, newValue)// 防抖: 延迟执行 → 干啥事先等一等延迟一会一段时间内没有再次触发才执行clearTimeout(this.timer)this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: newValue}})this.result res.data.dataconsole.log(res.data.data)}, 300)}}})/script/body
/html十二 watch侦听器
1.语法
完整写法 —添加额外的配置项
deep:true 对复杂类型进行深度监听immdiate:true 初始化 立刻执行一次
data: {obj: {words: 苹果,lang: italy},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}
2.需求 当文本框输入的时候 右侧翻译内容要时时变化当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化如果文本框中有默认值的话要立即翻译
3.代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselect v-modelobj.langoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ result }}/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptconst app new Vue({el: #app,data: {obj: {words: 小黑,lang: italy},result: , // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.dataconsole.log(res.data.data)}, 300)}}}})/script/body
/html4.总结
watch侦听器的写法 简单写法 watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}完整写法
watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}十三 综合案例
购物车案例 需求说明
渲染功能删除功能修改个数全选反选统计 选中的 总价 和 总数量持久化到本地
实现思路
基本渲染 v-for遍历、:class动态绑定样式删除功能 v-on 绑定事件获取当前行的id修改个数 v-on绑定事件获取当前行的id进行筛选出对应的项然后增加或减少全选反选 必须所有的小选框都选中全选按钮才选中 → every如果全选按钮选中则所有小选框都选中如果全选取消则所有小选框都取消选中
声明计算属性判断数组中的每一个checked属性的值看是否需要全部选 统计 选中的 总价 和 总数量 通过计算属性来计算选中的总价和总数量 持久化到本地 在数据变化时都要更新下本地存储 watch
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}/style/headbodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselect v-modelobj.langoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ result }}/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 需求输入内容修改语言都实时翻译// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {obj: {words: 小黑,lang: italy},result: , // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.dataconsole.log(res.data.data)}, 300)}}/script/body
/html
