1.指令修饰符所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 — 简化代码①按键修饰符keyup.enter →键盘回车监听②v-model修饰符v-model.trim →去除首尾空格v-model.number →转数字③事件修饰符事件名.stop →阻止冒泡事件名.prevent →阻止默认行为所以修饰符就是在运行时对代码进行封装简化代码2.v-bind操作class示例①对象适用于一个类名来回切换示例②数组适用于批量添加或删除类案例——京东导航高亮鼠标挪动到对应位置导航高亮!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title 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 body div idapp ul li v-for(item, index) in list :keyitem.id clickactiveIndex index a :class{ active: index activeIndex } href#{{ item.name }}/a /li /ul /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { activeIndex: 0, // 记录高亮 list: [ { id: 1, name: 京东秒杀 }, { id: 2, name: 每日特价 }, { id: 3, name: 品类秒杀 } ] } }) /script /body /htmlv-bind对于样式控制的增强-操作style用于动态设置行内样式可以单独对某一项进行修改案例——进度条!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title 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 body div idapp !-- 外层盒子底色 黑色 -- div classprogress !-- 内层盒子 - 进度蓝色 -- div classinner :style{ width: percent % } span{{ percent }}%/span /div /div button clickpercent 25设置25%/button button clickpercent 50设置50%/button button clickpercent 75设置75%/button button clickpercent 100设置100%/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { percent: 30 } }) /script /body /html3.v-model应用于其他表单元素常见的表单元素都可以用v-model绑定关联→快速获取或设置表单元素的值输入框input:text文本域textarea复选框input:checkbox单选框input:radio下拉菜单select案例——学习网站!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style textarea { display: block; width: 240px; height: 100px; margin: 10px 0; } /style /head body div idapp h3学习网站/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 value0女 brbr !-- 前置理解 1. option 需要设置 value 值提交给后台 2. select 的 value 值关联了选中的 option 的 value 值 结合 Vue 使用 → v-model -- 所在城市: select v-modelcity option valuebeijing北京/option option valueshanghai上海/option option valuechengdu成都/option option valuenanjing南京/option /select brbr 自我描述 textarea v-modeldesc/textarea button立即注册/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { username: zhangsan, gender: 1, isSingle: true, city: shanghai, desc: 我是男孩 } }) /script /body /html4.计算属性computed计算属性与methods方法比较计算属性完整写法!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style input { width: 30px; } /style /head body div idapp 姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbr button clickchangeName改名卡/button /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const 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案例——成绩单!DOCTYPE html html langen head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / link relstylesheet href./styles/index.css / titleDocument/title /head body div idapp classscore-case div classtable table thead tr th编号/th th科目/th th成绩/th th操作/th /tr /thead tbody v-iflist.length 0 tr v-for(item, index) in list :keyitem.id td{{ index 1 }}/td td{{ item.subject }}/td !-- 需求不及格的标红, 60 分, 加上 red 类 -- td :class{ red: item.score 60 }{{ item.score }}/td tda click.preventdel(item.id) hrefhttp://www.baidu.com删除/a/td /tr /tbody tbody v-else tr td colspan5 span classnone暂无数据/span /td /tr /tbody tfoot tr td colspan5 span总分{{ totalScore }}/span span stylemargin-left: 50px平均分{{ averageScore }}/span /td /tr /tfoot /table /div div classform div classform-item div classlabel科目/div div classinput input typetext placeholder请输入科目 v-model.trimsubject / /div /div div classform-item div classlabel分数/div div classinput input typetext placeholder请输入分数 v-model.numberscore / /div /div div classform-item div classlabel/div div classinput button clickadd classsubmit 添加/button /div /div /div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { list: [ { id: 1, subject: 语文, score: 62 }, { id: 7, subject: 数学, score: 89 }, { id: 12, subject: 英语, score: 70 }, ], subject: , score: }, computed: { totalScore() { return this.list.reduce((sum, item) sum item.score, 0) }, averageScore () { if (this.list.length 0) { return 0 } return (this.totalScore / this.list.length).toFixed(2) } }, methods: { del (id) { // console.log(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 } } }) /script /body /html5.watch监视器!DOCTYPE html html langen head meta charsetUTF-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title 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 body div idapp !-- 条件选择框 -- div classquery span翻译成的语言/span select option valueitaly意大利/option option valueenglish英语/option option valuegerman德语/option /select /div !-- 翻译框 -- div classbox div classinput-wrap textarea v-modelobj.words/textarea spani⌨️/i文档翻译/span /div div classoutput-wrap div classtransbox{{ result }}/div /div /div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/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.data console.log(res.data.data) }, 300) } } }) /script /body /htmlscript // 接口地址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.data console.log(res.data.data) }, 300) } } }) /script