网站安全检测产品优势,网站建设需要用到iis吗,网站建设相关,wordpress访客明细day02
一、今日学习目标
1.指令补充
指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素
2.computed计算属性
基础语法计算属性vs方法计算属性的完整写法成绩案例
3.watch侦听器
基础写法完整写法
4.综合案例 #xff08;演示#xff09;
渲染 / 删除 / 修…day02
一、今日学习目标
1.指令补充
指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素
2.computed计算属性
基础语法计算属性vs方法计算属性的完整写法成绩案例
3.watch侦听器
基础写法完整写法
4.综合案例 演示
渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化
二、指令修饰符
1.什么是指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 — 简化代码
2.按键修饰符
keyup.enter —当点击enter键的时候才触发
注意如果不加 . 那么只要键盘按下了任意键就会触发绑定的事件。
代码演示 div idapph3keyup.enter → 监听键盘回车事件/h3input keyup.enteradd v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {add(){}}})/script3.v-model修饰符
v-model.trim —去除尾位空格v-model.number —转数字 如果不是数字会原封不动的返回而不是返回 NaN。
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;}/stylediv idapph3v-model修饰符 .trim .number/h3姓名input v-modelusername typetextbr年纪input v-modelage typetextbrh3事件名.stop → 阻止冒泡/h3div clickfatherFn classfatherdiv click.stopsonFn classson儿子/div/divh3事件名.prevent → 阻止默认行为/h3a click.prevent hrefhttp://www.baidu.com阻止默认行为/a/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,age: ,},methods: {fatherFn () {alert(老父亲被点击了)},sonFn (e) {// e.stopPropagation()alert(儿子被点击了)}}})/script三、v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制 。
1.语法
div :class 对象/数组这是一个div/div2.对象语法
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类再布尔值的这个地方还可以添加返回值是布尔值的表达式
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/divdiv classbox :class{ 类名1: a 1, 类名2: 布尔值 }/div 适用场景一个类名来回切换
3.数组语法
当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表
div classbox :class[ 类名1, 类名2, 类名3 ]/div使用场景:批量添加或删除类
注意这里的 :class 中的类是只额外的添加 [] 中的类并不会向js中的className一样直接覆盖原来的类。比如
div classbox :class[]/div // 这时的类名为 box 而不是[] 中的空类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;}/stylediv idapp!--绑定对象--div classbox黑马程序员/div!--绑定数组--div classbox黑马程序员/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script四、京东秒杀-tab栏切换导航高亮
1.需求
当我们点击哪个tab页签时哪个tab页签就高亮
2.实例代码:
headmeta charsetUTF-8meta 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
/headbodydiv idappulli v-for(elem, index) in lista :class{ active: index activeIndex } clickactiveIndex indexhref#{{ elem.name }}/a/li/ul/div!-- script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script --script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 0,list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body3.思路
1.基于数据动态渲染tabv-for
2.准备一个下标 记录高亮的是哪一个 tab
3.基于下标动态切换class的类名
五、v-bind对有样式控制的增强-操作style
1.语法
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div2.代码练习
style.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}/stylediv idappdiv classbox :style{ background-color:red }/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script注意上面的实例:style 中的值是一个 JS 中的对象要求是 键 值其中键中是不能有 - 的因此可以使用给键添加 background-color: red 或者 background-color: red 的方式来解决或者直接使用小驼峰命名法也可以解决backgroundColor: red特别要注意的是值也是必须添加 或者 的不管是字符还是数字都要加否则会报错。
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;}/stylediv idappdiv classprogressdiv classinner div idappdiv classprogressdiv :style{ width: parent % } classinnerspan{{ parent }}%/span/div/divbutton clickparent25设置25%/buttonbutton clickparent50设置50%/buttonbutton clickparent75设置75%/buttonbutton clickparent100设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {parent: 0}})/scriptspan50%/span/div/divbutton设置25%/buttonbutton设置50%/buttonbutton设置75%/buttonbutton设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script六、v-model在其他表单元素的使用
1.讲解内容
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text —— value
文本域 textarea —— value
复选框 input:checkbox —— checked
单选框 input:radio —— checked
下拉菜单 select —— value
...2.代码准备 styletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/stylediv idapph3小黑学习网/h3姓名input v-modelusername typetextbrbr是否单身input v-modelisSimple typecheckboxbrbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别:input v-modelsex namesex typeradio value1男input v-modelsex namesex typeradio value0女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/selectbrbr!-- 自我描述其实就是一个大一点的 text 文本域 --自我描述textarea v-modeldesc/textareabutton立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSimple: false,sex: 1,cityId: 103,desc: }})/script七、computed计算属性
1.概念
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
2.语法
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}}
3.注意
computed配置项和data配置项是同级的computed中的计算属性虽然是函数的写法但他依然是个属性computed中的计算属性不能和data中的属性同名使用computed中的计算属性和使用data中的属性是一样的用法computed中计算属性内部的this依然指向的是Vue实例
4.案例
比如我们可以使用计算属性实现下面这个业务场景
5.代码准备
styletable {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}/stylediv 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.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 9 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {count() {return this.list.reduce((pre, elem) pre elem.num, 0);}}})/script注意computed 在使用的时候不需要添加括号就直接使用。
八、computed计算属性 VS methods方法
1.computed计算属性
作用封装了一段对于数据的处理求得一个结果
语法
写在computed配置项中作为属性直接使用 js中使用计算属性 this.计算属性模板中使用计算属性{{计算属性}}
2.methods计算属性
作用给Vue实例提供一个方法调用以处理业务逻辑。
语法
写在methods配置项中作为方法调用 js中调用this.方法名()模板中调用 {{方法名()}} 或者 事件名“方法名”
3.计算属性的优势 缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存 methods没有缓存特性每一次使用都会重新调用结果。 通过代码比较 computed 是一个计算属性computed 的缓存特性相当于就是将结果用一个变量存储起来了估计是当成变量存放在创建的 vue 对象中的某个地方当再次使用时会直接调用这个变量而不用重新调用 computed 的方法。但是 method 方法没有进行这种特性每一次的使用就会重新调用这个函数从而比较浪费性能。
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.总结
1.computed有缓存特性methods没有缓存
2.当一个结果依赖其他多个值时推荐使用计算属性
3.当处理业务逻辑时推荐使用methods方法比如事件的处理函数
九、计算属性的完整写法
既然计算属性也是属性能访问应该也能修改了
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法注意计算属性的默认属性和完整属性这两种的写法是不相同的 完整写法代码演示 div idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchange改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备},computed: {fullName: {// 当fullName计算属性被获取求值时如果有缓存就会调用缓存的值没有就会调用get函数get函数的返回值作为fullName计算属性的新值。get() {return this.firstName this.lastName;},// 当fullName被修改值时会调用set函数并且将修改后的值作为set函数的参数将和get函数中的相关值修改就会更新fullName中的计算属性。set(value) {this.firstName value.slice(0, 1);this.lastName value.slice(1);}}},methods: {change() {this.fullName 吕小布}}})/script十、综合案例-成绩案例 功能描述
1.渲染功能
2.删除功能
3.添加功能
4.统计总分求平均分
思路分析
1.渲染功能 v-for :key v-bind:动态绑定class的样式
2.删除功能 v-on绑定事件 阻止a标签的默认行为
3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据
4.使用计算属性computed 计算总分和平均分的值
十一、watch侦听器监视器
1.作用
监视数据变化执行一些业务逻辑或异步操作
2.语法 watch同样声明在跟data同级的配置项中 简单写法 简单类型数据直接监视 完整写法添加额外配置项 data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}watch: {words(newVaule, oldVaule){// 一些业务操作}obj.words(newVaule, oldVaule){// 一些业务操作}
}3.侦听器代码准备 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;}/stylediv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelwords/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ translation }}/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: ,translation: },// 具体讲解(1) watch语法 (2) 具体业务实现watch: {words(newVaule) {clearTimeout(this.timer);this.timer setTimeout(async () {let p await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: newVaule}});this.translation p.data.data;}, 1000);}}})/script十二、翻译案例-代码实现 script// 接口地址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十三、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.代码实现 script 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)}} }})/script4.总结
watch侦听器的写法有几种
1.简单写法
watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}2.完整写法
watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}十四、综合案例
购物车案例 需求说明
渲染功能删除功能修改个数全选反选统计 选中的 总价 和 总数量持久化到本地
实现思路
1.基本渲染 v-for遍历、:class动态绑定样式
2.删除功能 v-on 绑定事件获取当前行的id
3.修改个数 v-on绑定事件获取当前行的id进行筛选出对应的项然后增加或减少
4.全选反选
必须所有的小选框都选中全选按钮才选中 → every如果全选按钮选中则所有小选框都选中如果全选取消则所有小选框都取消选中
声明计算属性判断数组中的每一个checked属性的值看是否需要全部选
5.统计 选中的 总价 和 总数量 通过计算属性来计算选中的总价和总数量
6.持久化到本地 在数据变化时都要更新下本地存储 watch
