垂直型电商网站如何做,wordpress自用主题,产品销售方案与营销策略,三星网上商城投诉电话前提#xff0c;建议先学会前端几大基础#xff1a;HTML、CSS、JS、Ajax#xff0c;不然不好懂
这一专栏知识将一次性将vue、vue2、vue3全部讲明白 一、何为watch监视器
其实我个人理解#xff0c;就跟原本的表单的input事件一样#xff0c;实时监视事件发生并同步更新数…前提建议先学会前端几大基础HTML、CSS、JS、Ajax不然不好懂
这一专栏知识将一次性将vue、vue2、vue3全部讲明白 一、何为watch监视器
其实我个人理解就跟原本的表单的input事件一样实时监视事件发生并同步更新数据input事件不就是只用输入框输入一个东西不管摁没摁回车键后台都会监视触发事件。
那么watch监视器就是这么个玩意比如实时翻译器就需要监视输入的内容同时在输入时进行翻译 watch跟data、methods、computed一样都是同级别的配置项写法也一样然后里面你要监视哪个data的元素你就以这个data的元素设置一个【同名】的函数这里注意两点
1、监视data里的对象的成员函数名要【对象.成员名】
2、因为“.”是特殊字符函数名带它编译器会有波浪线报错那就用引号包起来即可 例子1
div idappinput typetext v-modelwords
/divscriptnew Vue({el: #app,data: {words: },//设置watch配置项watch:{//有两种形式1、函数名(参数1,参数2)这样的话会自动获取【这次改变的值】和【上一次的值】参数1就是【这次改变的值】参数2反之// 2、函数名(参数)一个参数就是自动获取实时更新的值上一个写法了解就行没人用words(value){console.log(变化了, value)}}})
/script 例子2对象也一样就是对象.成员就行
div idappinput typetext v-modelobj.word
/divscriptnew Vue({el: #app,data: {obj:{word: }},//设置watch配置项watch:{//有两种形式1、函数名(参数1,参数2)这样的话会自动获取【这次改变的值】和【上一次的值】参数1就是【这次改变的值】参数2反之// 2、函数名(参数)一个参数就是自动获取实时更新的值上一个写法了解就行没人用obj.word(value){console.log(变化了, value)}}})
/script 二、用watch尝试实时翻译项目
很简单就是在watch配置项里设置axios库就行了
先看简单的例子
div idappinput typetext v-modelwordsspan{{ translation }}/span
/div!-- 引入axios库 --
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
scriptnew Vue({el: #app,data: {words: ,translation: },watch: {//这里用的是async和await函数方法来获取axios返回的结果async words(value){const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: value //words是这个服务器发送get请求必须带的参数}})console.log(res)console.log(res.data.data)this.translation res.data.data}//上面的写法是等同于这种传统写法的// axios({// url: https://applet-base-api-t.itheima.net/api/translate,// params: {// words: value// }// }).then(res {// console.log(res)// }) }})
/script
但是这样虽然成功获取了但是因为watch的实时监视导致没输入一个字都会获得一个翻译结果 但是我们实际翻译的时候希望的是输入一串字符串后停了一小会没有再输入了再进行翻译的
那么就要引入【防抖机制】这个方法可以应用与【用户双十一疯狂乱点订单请求导致发送N多个请求给服务器淘宝就爆了】、【滚动条往下滑一点就加载一堆数据】、【翻译敲一个字就翻译一次】这些问题
那么简单的方法就是加个setTimeout隔一段时间再执行就好了
div idappinput typetext v-modelwordsspan{{ translation }}/span
/div!-- 引入axios库 --
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
scriptnew Vue({el: #app,data: {words: ,translation: },watch: {words(value){//用setTimeout控制发送请求的时间setTimeout(async (){const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: value}})console.log(res)console.log(res.data.data)this.translation res.data.data},1000)}}})
/script
但是发现还是输入几个字翻译几次只不过是输出翻译结果的时间间隔了一会再执行的那么关键来了我们只需要每次输入的时候【先】【关闭计时器】然后再开启计时器就行了。那么关闭计时器需要有一个具体的【名字】来代表【是哪个计时器】那就在data里设置一个变量用来代表计时器然后清理关闭计时器的时候就是指向这个data的变量就行了看代码
scriptnew Vue({el: #app2,data: {words: ,translation: ,//这里设置一个timer变量成员用来代替setTimeout计时器相当与它就是那个setTimeout的名字timer: null},watch: {words(value){//那就每次监视输入框输入时第一步是先把计时器关闭了clearTimeout(this.timer)this.timer setTimeout(async (){const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: value}})console.log(res)console.log(res.data.data)this.translation res.data.data},1000)}}})
/script
我画个图给大伙类捋一捋
每一次输入就会触发watch监视
那这样一来stTimeout计时器已开启马上又因为下一次输入而导致执行clrearTimeout()关闭掉它
那么一直输入的情况下就一直没办法执行setTimeout计时器直到有一段时间不输入了达到了setTimeout定的时间那么就足够它完成里面的内容了
然后直到下一次输入内容从而触发watch监视器才会再次执行clrearTimeout()把上一次的计时器给清理掉。 三、watch更屌的功能深度监视对象值改变
按照上面教的方法我们已经可以实时监视表单事件改变了但是加入我改变的值是多个地方的呢
比方说我实时翻译的时候你既要监视我的输入框input输入的内容值改变了还要监视我选择的语言selectoption/option/select改变了按照老方法我要在data里设置两个值代表它两然后再根据它两各自在watch里写两个对应的函数太麻烦了要是5、6、100个地方要怎么办 那就应该在data里用一个【对象】来封装起来这些值监视的时候直接监视这个对象其中一个值数据改变了就是整个对象数据发生改变那么怎么监视对象的值呢要按以前说的对象.成员名吗那还是要写很多个函数 watch完整写法是当监视一个对象时在watch里直接写一个【同名】的【对象】然后有两个配置项
1、deeptrue 这个配置项代表开启【深层监视】
2、immediatetrue 这个配置项代表初始化立刻执行一次handler函数
至于这个handle函数watch监视器里对某个变量成员监视就是设一个【同名字的函数】而对对象的监视要执行的函数就是执行【handler函数】不能改系统自带的记住是【handler】不要漏了最后的【r】
例子
div idapp2!-- 这里v-model别忘了换成对象.成员 --input typetext v-modelobj.words!-- 这里给select表单元素设置了v-model只要下拉菜单改变马上把对应的option的value值传给Vue的data --select v-modelobj.langoption valueitaly意大利/optionoption valueeglish英语/optionoption valuegerman德语/option/selectspan{{ translation }}/span
/div!-- 第一步引入axios库 --
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
scriptnew Vue({el: #app2,data: {obj: {words: ,lang: eglish},translation: },watch: {obj: {//开启深度监视整个对象都可以监视了deep: true,handler(value){console.log(对象值改变了, value)}}}})
/script 那么现在优化一下网络请求把整个两个参数值都给到axios库的params参数里直接给他value就行了value就是对象然后其他操作就是把上面的操作复制粘贴进去就行了
!-- 第一步引入axios库 --
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
scriptnew Vue({el: #app2,data: {obj: {words: 初始值就翻译,lang: eglish},translation: ,//这里设置一个timer变量成员用来代替setTimeout计时器相当与它就是那个setTimeout的名字timer: null},watch: {obj: {//开启深度监视可以监视整个对象里面的值改变deep: true,//这个是设置一开始还没有改变表单值、也就是没有触发watch监视时按照data里的初始值直接先执行一次hangler函数immediate: true,handler(value){//那就每次监视输入框输入时第一步是先把计时器关闭了clearTimeout(this.timer)this.timer setTimeout(async (){const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: value//这里value就是data那个对象//其实就等于下面这个麻烦的写法// params: {// words: value.words,// lang: value.lang// }})console.log(res.data.data)this.translation res.data.data},1000)}}}})
/script 总结
