怎样开发手机网站建设,wordpress怎么改标题,现在给别人做网站还赚钱吗,南宁关键词排名提升Web前端-Vue2Vue3基础入门到实战项目-Day2 指令补充指令修饰符v-bind 对样式控制的增强控制class案例 - 京东秒杀tab导航高亮控制style案例 - 控制进度条 v-model 应用于其他表单元素 computed计算属性基本使用computed计算属性 vs methods方法计算属性完整写法案例 - 成绩 wat… Web前端-Vue2Vue3基础入门到实战项目-Day2 指令补充指令修饰符v-bind 对样式控制的增强控制class案例 - 京东秒杀tab导航高亮控制style案例 - 控制进度条 v-model 应用于其他表单元素 computed计算属性基本使用computed计算属性 vs methods方法计算属性完整写法案例 - 成绩 watch侦听器简写 - 语法简写 - 业务实现完整写法 综合案例 - 水果购物车来源 指令补充
指令修饰符
keyup.enter: 键盘回车监听v-model.trim: 去除首尾空格v-model.number: 转数字事件名.stop: 阻止冒泡事件名.prevent: 阻止默认行为
head...style.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}/style
/head
bodydiv idapph3keyup.enter - 监听键盘回车事件/h3input typetext v-modelusername keyup.enterfnh3v-model修饰符 .trim .number/h3姓名: input typetext v-model.trimusername2br年纪: input typetext v-model.numberageh3事件名.stop → 阻止冒泡/h3div clickfatherFn classfatherdiv click.stopsonFn classson儿子/div/divh3事件名.prevent → 阻止默认行为/h3a click.prevent hrefhttp://www.baidu.com阻止默认行为/a/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,username2: ,age: },methods: {fn(){console.log(this.username)},fatherFn () {alert(老父亲被点击了)},sonFn () {alert(儿子被点击了)}}})/script
/bodyv-bind 对样式控制的增强
控制class
对象使用场景: 一个类名, 来回切换数组使用场景: 批量添加或删除类
head...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
/head
bodydiv idappdiv classbox :class{pink: true, big: true}黑马程序员/divdiv classbox :class[pink, big]黑马程序员/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body案例 - 京东秒杀tab导航高亮
head...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
/head
bodydiv idappulli v-for(item, index) in list :keyitem.id clickactiveIndex indexa :class{active: activeIndex index} href# {{item.name}} /a/li/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 0, // 记录高亮list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body控制style
json对象的键不能有-, 可以单引号引起来或者驼峰命名
head...style.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}/style
/head
bodydiv idappdiv classbox :style{width: 400px, height: 400px, background-color: green}/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body案例 - 控制进度条
head...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
/head
bodydiv idapp!-- 外层盒子 - 底色(黑色) --div classprogress!-- 内层盒子 - 进度(蓝色) --div classinner :style{width: percent%}span {{percent}}%/span/div/divbutton clickpercent 25设置25%/buttonbutton clickpercent 50设置50%/buttonbutton clickpercent 75设置75%/buttonbutton clickpercent 100设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 0}})/script
/bodyv-model 应用于其他表单元素
v-model会根据控件类型自动选取正确的方法来更新元素
head...styletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input typeradio namegender value1 v-modelgender男input typeradio namegender value2 v-modelgender女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value101上海/optionoption value102北京/optionoption value103成都/optionoption value104南京/option/selectbrbr自我描述textarea v-modeldesc/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: true,gender: 1,cityId: 101,desc: }})/script
/bodycomputed计算属性
基本使用
语法:
声明在computed配置项中, 一个计算属性对应一个函数使用和普通属性一样使用
head...styletable {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礼物总数{{totalCount}} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue/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: {totalCount(){// reduce: 求和函数let total this.list.reduce((sum, item) sumitem.num, 0)return total}}})/script
/bodycomputed计算属性 vs methods方法
computed作用: 封装了一段对于数据的处理, 获得一个结果methods作用: 给实例提供一个方法, 调用以处理业务逻辑computed缓存特性(提升性能): 计算属性会对计算出来的结果缓存, 再次使用直接读取缓存, 依赖项变化了, 会自动重新计算, 并再次缓存
计算属性完整写法
当计算属性被修改赋值时, 执行set方法, 修改的值, 传递给set方法的形参
bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span {{fullName}} /spanbrbrbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: ,lastName: },computed: {fullName: {get(){return this.firstNamethis.lastName},set(value){this.firstName value.slice(0, 1)this.lastName value.slice(1)}}},methods: {changeName(){this.fullName 阿巴巴}}})/script
/body案例 - 成绩
渲染功能(不及格高亮) v-if v-elsev-forv-bind:class 删除功能 点击传参filter过滤覆盖原数组.prevent阻止默认行为 添加功能 v-model v-model修饰符(.trim .number)unshift修改数组更新视图 统计总分, 求平均分 计算属性reduce秋娥和
bodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length 0tr v-for(item, index) in list :keyitem.idtd {{index1}} /tdtd {{item.subject}} /tdtd :class{red: item.score 60} {{item.score}} /tdtda href# click.preventdel(item.id)删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分: {{scoreCount}} /spanspan stylemargin-left: 50px平均分 {{scoreAvg}} /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添加/button/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/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.score this.subject }},computed: {scoreCount(){return this.list.reduce((sum, item) sumitem.score, 0)},scoreAvg(){if(this.list.length 0){return 0}return (this.scoreCount/this.list.length).toFixed(2)}}})/script
/bodywatch侦听器
简写 - 语法
const app new Vue({el: #app,data: {// words: ,obj: {words: }},watch: {// words(newValue, oldValue){// console.log(newValue, oldValue)// }obj.words(newValue, oldValue){console.log(newValue, oldValue)}}
})简写 - 业务实现
head...style* {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
/head
bodydiv 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/vue/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: , // 翻译结果// 1. 这个timer可以不写, 提高性能, // 像this.timer这种写法可以挂载timer属性到当前实例上// 2. 非响应式的数据, 不渲染在页面上的数据都可以不写// timer: // 延迟期id},watch: {obj.words (newValue, oldValue){// console.log(newValue, oldValue)// 防抖: 延迟执行 - 一段时间内没有再次触发再执行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(this.result)}, 300)}}})/script
/body完整写法
deep: true: 对复杂类型深度剪视immediate: true: 初始化执行一次handler方法
head...style* {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
/head
bodydiv 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/vue/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(newValue, oldValue){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(this.result)}, 300)}}}})/script
/body综合案例 - 水果购物车
渲染功能 v-if/v-elsev-for:class 删除功能 点击传参filter过滤覆盖原数组 修改个数 点击传参find找对象 全选反选 计算属性computed计算属性完整写法 get/set 统计选中的总价和总数量 计算属性computedreduce条件求和 持久化到本地 watch监视localStorageJSON.stringify/JSON.parse
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./css/inputnumber.css /link relstylesheet href./css/index.css /title购物车/title/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg src./img/fruit.jpg alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div classmain v-iffruitList.length 0div classtable!-- 头部 --div classtheaddiv classtrdiv classth选中/divdiv classth th-pic图片/divdiv classth单价/divdiv classth num-th个数/divdiv classth小计/divdiv classth操作/div/div/div!-- 身体 --div classtbodydiv classtr :class{active: item.isChecked} v-for(item, index) in fruitList :keyitem.iddiv classtdinput typecheckbox v-modelitem.isChecked //divdiv classtdimg :srcitem.icon alt //divdiv classtd {{item.price}} /divdiv classtddiv classmy-input-numberbutton classdecrease click--item.num :disableditem.num 1 - /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!-- 底部 --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/div!-- 空车 --div classempty v-else空空如也/div/divscript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/scriptscriptconst defaultArr [{id: 1,icon: ./img/火龙果.png,isChecked: true,num: 2,price: 6,},{id: 2,icon: ./img/荔枝.png,isChecked: false,num: 7,price: 20,},{id: 3,icon: ./img/榴莲.png,isChecked: false,num: 3,price: 40,},{id: 4,icon: ./img/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: ./img/樱桃.png,isChecked: false,num: 20,price: 34,},]const app new Vue({el: #app,data: {// 水果列表fruitList: JSON.parse(localStorage.getItem(list)) || defaultArr},methods: {del(id){this.fruitList this.fruitList.filter(item item.id ! id)},add(id){// 1. 根据id找到数组中的对应项 - findconst fruit this.fruitList.find(item item.id id)// 2. 操作num数量fruit.num}},computed: {isAll: {get(){// 所有小选框都选中, 全选按钮才选中 - everyreturn this.fruitList.every(item item.isChecked)},set(value){// 基于拿到的布尔值, 让所有的小选框同步状态this.fruitList.forEach(item item.isChecked value)}},totalCount(){return this.fruitList.reduce((sum, item) {if(item.isChecked){return sum item.num}else{return sum}}, 0)},totalPrice(){return this.fruitList.reduce((sum, item) item.isChecked ? sumitem.num*item.price:sum, 0)}},watch: {fruitList: {deep: true,handler(newValue){// 将变化后的newValue存入本地 (转JSON)localStorage.setItem(list, JSON.stringify(newValue))}}}})/script/body
/html来源
黑马程序员. Vue2Vue3基础入门到实战项目
