昆山网站建设网站建设,外贸平台排名,网站源码小千个人网,校园文化建设一、今日学习目标
1.指令补充
指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素
2.computed计算属性
基础语法计算属性vs方法计算属性的完整写法成绩案例
3.watch侦听器
基础写法完整写法
二、指令修饰符
1.什么是指令修饰符#xff1f; 所谓指令修饰符就是…一、今日学习目标
1.指令补充
指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素
2.computed计算属性
基础语法计算属性vs方法计算属性的完整写法成绩案例
3.watch侦听器
基础写法完整写法
二、指令修饰符
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 keyup.enterfn v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {fn (e) {// if (e.key Enter) {// console.log(键盘回车的时候触发, this.username)// }console.log(键盘回车的时候触发, this.username)}}})/script
/body
/html3.v-model修饰符
v-model.trim —去除首位空格v-model.number —转数字
4.事件修饰符
事件名.stop — 阻止冒泡事件名.prevent —阻止默认行为事件名.stop.prevent —可以连用 即阻止事件冒泡也阻止默认行为
三、v-bind对样式控制的增强-操作class 为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制 1.语法
div :class 对象/数组这是一个div/div2.对象语法
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div 适用场景一个类名来回切换
3.数组语法
当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表
div classbox :class[ 类名1, 类名2, 类名3 ]/div使用场景:批量添加或删除类
4.代码练习 !DOCTYPE html
html langenheadmeta 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
/headbodydiv idappdiv classbox :class{ pink: true, big: true }学习vue/divdiv classbox :class[pink, big]学习vue/div/divscript src./js/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body/html四、京东秒杀-tab栏切换导航高亮
1.需求
当我们点击哪个tab页签时哪个tab页签就高亮
2.准备代码:
!DOCTYPE html
html langenheadmeta 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
/headbodydiv idappulli v-for(item, index) in list :keyitem.id clickactiveIndex indexa :class{ active: index activeIndex } href#{{ item.name }}/a/li/ul/divscript src./js/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 langenheadmeta 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
/headbodydiv idappdiv classbox :style{ width: 400px, height: 400px, backgroundColor: green }/div/divscript src./js/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/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礼物总数{{ totalCount }} 个/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: {totalCount () {// 基于现有的数据编写求值逻辑// 计算属性函数内部可以直接通过 this 访问到 app 实例// console.log(this.list)// 需求对 this.list 数组里面的 num 进行求和 → reducelet 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没有缓存特性
4.总结
1.computed有缓存特性methods没有缓存
2.当一个结果依赖其他多个值时推荐使用计算属性
3.当处理业务逻辑时推荐使用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 () {// return this.firstName this.lastName// }// 完整写法 → 获取 设置fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get () {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value) {// console.log(value.slice(0, 1)) // console.log(value.slice(1)) this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/body
/html九、watch侦听器监视器
1.作用
监视数据变化执行一些业务逻辑或异步操作
2.语法 watch同样声明在跟data同级的配置项中 简单写法 简单类型数据直接监视 data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}完整写法添加额外配置项 watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}
