长沙企业网站建设价格,陕西省门户网站建设政策,网络运营,携程网站建设项目前言
持续学习总结输出中#xff0c;Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器
一、指令修饰符
1.什么是指令修饰符#xff1f;
所谓指令修饰符就是通过“.”指明一些指令后缀 #xff0c;不同的后缀封装了不同的处理操作 — 简化代码
2.按键…前言
持续学习总结输出中Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器
一、指令修饰符
1.什么是指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 — 简化代码
2.按键修饰符
keyup.enter —当点击enter键的时候才触发
代码演示 div idapph3keyup.enter → 监听键盘回车事件/h3input v-modelusername typetext/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: },methods: {}})/script3.v-model修饰符
v-model.trim —去除首位空格v-model.number —转数字
4.事件修饰符
事件名.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 typetextbr年纪input v-model.numberage 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
/body
/html
运行效果 二、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 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 idapp!-- 对象 → 键就是类名值是布尔值。如果值为 true有这个类否则没有这个类适用场景:一个类名来回切换 --div classbox :class{ pink: true, big: true }星辰大海/div!-- 数组 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表适用场景:批量添加或删除类 --div classbox :class[pink, big]星辰大海/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/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 idapp!-- background-color不能直接写会报错js对象中属性名不支持带 - 的写法可以采用下面两种写法 --!-- 1、background-color用引号包起来 --!-- 2、用驼峰写法 backgroundColor--div classbox :style{ width: 400px, height: 400px, backgroundColor: green }/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body
/html运行效果 3.进度条案例
!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: #5fca71;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/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 60}})/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-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女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/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 2,cityId: 103,desc: }})/script
/body
/html运行效果
五、computed计算属性
1.概念
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算。
2.语法
声明在 computed 配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}}
3.注意
computed配置项和data配置项是同级的computed中的计算属性虽然是函数的写法但他依然是个属性computed中的计算属性不能和data中的属性同名使用computed中的计算属性和使用data中的属性是一样的用法computed中计算属性内部的this依然指向的是Vue实例
4.代码参考
!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: 3 },{ 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没有缓存特性 通过代码比较
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title星辰的礼物清单/titlestyletable {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;}/style
/head
bodydiv idapph3星辰的礼物清单span{{ totalCountFn() }}/span/h3h3星辰的礼物清单span{{ totalCountFn() }}/span/h3h3星辰的礼物清单span{{ totalCountFn() }}/span/h3h3星辰的礼物清单span{{ totalCountFn() }}/span/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/tablep礼物总数{{ totalCountFn() }} 个/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: 3 },{ id: 3, name: 椅子, num: 6 },]},methods: {totalCountFn () {console.log(methods方法执行了)let total this.list.reduce((sum, item) sum item.num, 0)return total}},computed: {// 计算属性有缓存的一旦计算出来结果就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高// totalCount () {// console.log(计算属性执行了)// let total this.list.reduce((sum, item) sum item.num, 0)// return total// }}})/script
/body
/html运行效果
4.总结
1.computed有缓存特性methods没有缓存
2.当一个结果依赖其他多个值时推荐使用计算属性
3.当处理业务逻辑时推荐使用methods方法比如事件的处理函数
七、计算属性的完整写法
既然计算属性也是属性能访问应该也能修改了
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法
完整写法代码参考
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title改名卡/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) {一些业务逻辑 或 异步操作。 }
}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 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// 接口地址...// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {words: },// 具体讲解(1) watch语法 (2) 具体业务实现})/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.代码参考
!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: english},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
运行效果
4.总结
watch侦听器的写法有几种
1.简单写法
watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}2.完整写法
watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}
