窥探未知：一场感官的极致探索

指令补充

指令修饰符1按键修饰符keyup.enter→ 键盘回车监听body div idapp h3keyup.enter 监听键盘回车事件/h3 input keyup.enterfn v-modelusername typetext /div script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script script const app new Vue({ el: #app, data: { username: }, methods: { fn (e) { if(e.key enter) { console.log(键盘回车的时候触发, this.username) } } } }) /script /body2v-model修饰符3事件修饰符div idapp h3v-model修饰符 .trim .number/h3 姓名input v-model.trimusername typetextbr 年纪input v-model.numberage typetextbr h3事件名.stop → 阻止冒泡/h3 div clickfatherFn classfather div click.stopsonFn classson儿子/div /div h3事件名.prevent → 阻止默认行为/h3 a click.prevent hrefhttp://www.baidu.com阻止默认行为/a /div script src./vue.js/script script const app new Vue({ el: #app, data: { username: , age: , }, methods: { fatherFn () { alert(老父亲被点击了) }, sonFn () { alert(儿子被点击了) } } }) /script

v-bind对于样式操作的增强1操作class语法:class 对象/数组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 body div idapp div classbox :class{ pink: false, big: true}黑马程序员/div div classbox :class[pink, big]黑马程序员/div /div script src./vue.js/script script const app new Vue({ el: #app, data: { } }) /script /body2操作style语法:style 样式对象适用场景某个具体属性的动态设置style .box { width: 200px; height: 200px; background-color: rgb(187, 150,

; } /style body div idapp div classbox :style{ width: 400px, height: 400px, backgroundColor: skyblue}/div /div script src./vue.js/script script const app new Vue({ el: #app, data: { } }) /script /body

v-model应用于其他表单元素style textarea { display: block; width: 240px; height: 100px; margin: 10px 0; } /style body div idapp h3小黑学习网/h3 姓名 input typetext v-modelusername brbr 是否单身 input typecheckbox v-modelisSingle brbr !-- 前置理解

name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥

value: 给单选框加上 value 属性用于提交给后台的数据 结合 Vue 使用 → v-model -- 性别: input v-modelgender typeradio namegender value1男 input v-modelgender typeradio namegender value2女 brbr !-- 前置理解

option 需要设置 value 值提交给后台

select 的 value 值关联了选中的 option 的 value 值 结合 Vue 使用 → v-model -- 所在城市: select v-modelcityId option value101 厦门/option option value102 漳州/option option value103 扬州/option option value104 南京/option /select brbr 自我描述 textarea v-modeldesc/textarea button立即注册/button /div script src./vue.js/script script const app new Vue({ el: #app, data: { username: , isSingle: true, gender: 2, cityId: 102, desc: } }) /script /body

computed 计算属性

计算属性1定义基于现有的数据计算出来的新属性。

依赖的数据变化自动重新计算。

2语法style table { border: 1px solid #000; text-align: center; width: 240px; } th,td { border: 1px solid #000; } h3 { position: relative; } /style body div idapp h3小黑的礼物清单/h3 table tr th名字/th th数量/th /tr tr v-for(item, index) in list :keyitem.id td/td td个/td /tr /table !-- 目标统计求和求得礼物总数 -- p礼物总数 个/p /div script src./vue.js/script script const 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 进行求和 reduce let total this.list.reduce((sum, item) sum item.num,

return total } } }) /script /body

computed计算属性 与methods方法1计算属性2方法style table { 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 body div idapp h3小黑的礼物清单span/span/h3 table tr th名字/th th数量/th /tr tr v-for(item, index) in list :keyitem.id td/td td个/td /tr /table p礼物总数 个/p /div script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script const app new Vue({ el: #app, data: { // 现有的数据 list: [ { id: 1, name: 篮球, num: 3 }, { id: 2, name: 玩具, num: 2 }, { id: 3, name: 铅笔, num: 5 }, ] }, computed: { // 计算属性有缓存的一旦计算出来啊结果就会立刻缓存 // 下次读取 直接读缓存执行 性能特别高 totalCount () { console.log(计算属性执行了) let total this.list.reduce((sum, item) sum item.num,

return total } } }) /script /body

计算属性完整写法语法div idapp 姓input typetext v-modelfirstNamebr 名input typetext v-modellastNamebr p/p button clickchangeName修改姓名/button /div script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script script const app new Vue({ el: #app, data: { firstName: 灰, lastName: 太狼, }, computed: { // 简写 获取 // fullName () { // return this.firstName this.lastName // } // 完整写法 获取 设置 fullName: { // (

当fullName计算属性被获取求值时执行get 有缓存优先读缓存 // 会将返回值作为最终的求值结果 get () { return this.firstName this.lastName }, // (

当fullName计算属性被修改赋值时执行set // 修改的值传递给set 方法的形参 set (value) { this.firstName value.slice(0,

this.lastName value.slice(

} } }, methods: { changeName () { this.fullName 红太狼 } } }) /script

综合案例

watch侦听器

作用监视数据变化执行一些 业务逻辑或异步操作。

语法1简单写法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 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/div /div /div /div script src./vue.js/script script src./axios.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 }, // 具体讲解(

watch语法 (

具体业务实现 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 }) } } }) /script /body2完整写法 → 添加额外配置项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 body div idapp !-- 条件选择框 -- div classquery span翻译成的语言/span select v-modelobj.lang 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/div /div /div /div script src./vue.js/script script src./axios.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: 小黑, lang: italy }, result: , // 翻译结果 }, // 具体讲解(

watch语法 (

具体业务实现 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.data }) } } // obj.words (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 // }) // } } }) /script /body

综合案例

生命周期

生命周期 生命周期四个阶段

生命周期钩子

综合案例body div idapp h3/h3 div button clickcount---/button span/span button clickcount/button /div /div script src./vue.js/script script const app new Vue({ el: #app, data: { count: 100, title: 计数器 }, //

创建阶段准备数据 beforeCreate () { console.log(beforecreate 响应式数据准备好之前, this.count) }, created () { console.log(created 响应式数据准备好之后, this.count) // this.数据名 请求回来的数据 // 可以开始发送初始化渲染的请求了 }, //

挂载阶段渲染模板 beforeMount () { console.log(beforemount 模板渲染之前, document.querySelector(h

.innerHTML) }, mounted () { console.log(mounted 模板渲染之后, document.querySelector(h

.innerHTML) // 可以开始操作dom了 }, //

更新阶段修改数据 更新视图 beforeUpdate () { console.log(beforeUpdate 数据修改了视图还没更新, document.querySelector(span).innerHTML) }, updated () { console.log(updated 数据修改了视图已经更新, document.querySelector(span).innerHTML) }, //

卸载阶段 beforeDestroy () { console.log(beforeDestroy 卸载前) console.log(清除掉一些Vue以外的资源占用定时器延时器···) }, destroyed () { console.log(destroyed 卸载后) } }) /script /body

综合案例

魅影在线观看免费播放电视剧-魅影在线观看免费播放电视剧应用