vuebanner-Vue实现轮播图
使用vue作出锤子官方商城的3d-banner效果利用js获取鼠标指针位置,根据位置计算偏转角度,通过设定css中transform的perspective/rotateX/rotateY使banner呈现3d偏转的效果。
首先,写一个div
并给他一些基本的样式
接下来引入vue
并生成一个实例
在data中定义x轴和y轴的偏转角度
在computed计算属性中定义生成具体css语句的函数
在methods中书写鼠标在banner中的移动事件对应的函数
定义鼠标离开banner事件对应的函数(也就是将data中角度值归零)
接下来,为banner绑定相应的事件和样式
此时,发现效果已经基本实现,为了让鼠标离开时banner恢复原状的过程更加平缓,要给banner加入transition
大功告成了,预览。
不过我发现,锤子官方商城的效果中,banner内的文字和背景偏转角度有一定差异,感觉像不在一个平面上,我猜测应该是利用了不同的perspective,有机会我再测试一下。
8个非常实用的Vue自定义指令在Vue,除了核心功能默认内置的指令(v-model和v-show),Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。
Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过(id,[definition])方式注册全局指令。然后在入口文件中进行()调用。
批量注册指令,新建directives/文件
在引入并调用
指令定义函数提供了几个钩子函数(可选):
下面分享几个实用的Vue自定义指令
需求:实现一键复制文本内容,用于鼠标右键粘贴。
思路:
使用:给Dom加上v-copy及复制的文本即可
需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件
思路:
使用:给Dom加上v-longpress及回调函数即可
背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。
需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。
思路:
使用:给Dom加上v-debounce及回调函数即可
背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。
我们常规方法是在每一个表单的on-change事件上做处理。
这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。
需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。
使用:将需要校验的输入框加上v-emoji即可
背景:在类电商类项目,往往存在大量的图片,如banner广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。
需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。
思路:
图片懒加载有两种方式可以实现,一是绑定srcoll事件进行监听,二是使用IntersectionObserver判断图片是否到了可视区域,但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持IntersectionObserverAPI,如果支持就使用IntersectionObserver实现懒加载,否则则使用srcoll事件监听+节流的方法实现。
使用,将组件内标签的src换成v-LazyLoad
背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加v-if/v-show来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。
需求:自定义一个权限指令,对需要权限判断的Dom进行显示隐藏。
思路:
使用:给v-permission赋值判断即可
需求:给整个页面添加背景水印
思路:
使用,设置水印文案,颜色,字体大小即可
需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。
思路:
使用:在Dom上加上v-draggable即可
Vue实现轮播图轻量化的vue移动UI组件库Vant的相关使用
引入命令:npmivant-s
局部配置,这样更加高效,避免整个加载,造成冗余,这里以使用Button为例子:
npmibabel-plugin-import-D-D是--save-dev的简写
在使用之前,还需要在配置.babelrc文件中配置:["import",{"libraryName":"vant","style":true}]这一句
在布局中测试,效果这里就不写了,可以参考Vant的官网:
remfontsizeoftherootelement是相对长度单位,相对于跟元素(即html元素)font-size计算值的倍数
iPhone51rem==16pxhtml默认的font-size==16px,不同的手机屏幕素质不同,需要动态获取屏幕的宽度,
动态设置根元素的字体大小,这里也就是html元素下字体的大小,从而控制rem的值。
在css中设置:
对于一些高清屏,需要调整这个缩放值,正常initial-scale=1.0,需要调小,但绝大多数情况是不用调整这个的
<metaname="viewport"content="width=device-width,initial-scale=1.0">
主要用到Vant的轮播组件Swipe,SwipeItem,还用到了Vue的双向绑定,以及v-for指令遍历图片数组内容
Vant引入:
定义数据:
布局内容:
这里写完后,查看效果发现轮播图没有居中,因为Swipe自带了边界,需要在css中进行清除.swipe-area{clear:both;}
但这还没有完,如果出现图片过大,或者网络情况较慢的情况,我们需要避免用户等待过久,程序员就是这么贴心。Vant提供了懒加载LazLoad,引入后我们只需更改前面写的这个<img:src=""width="100%"/>改成<imgv-lazy=""width="100%"/>就可以。模拟测试可以更改chrome浏览器的network状态为slow3G,模拟3G网络下的情况。
npminstall--saveaxios
使用的过程:
复习过程出现报错:
Unresolvedfunctionormethodrequire()
解决办法:
file-->setting-->Languages&Frameworks-->JavaScript-->Libraries-->DownLoad找到Requiries相关内容,download后问题解决。
绛旓細鍦Vue,闄や簡鏍稿績鍔熻兘榛樿鍐呯疆鐨勬寚浠(v-model鍜寁-show),Vue涔熷厑璁告敞鍐岃嚜瀹氫箟鎸囦护銆傚畠鐨勪綔鐢ㄤ环鍊煎湪浜庡綋寮鍙戜汉鍛樺湪鏌愪簺鍦烘櫙涓嬮渶瑕佸鏅欴OM鍏冪礌杩涜鎿嶄綔銆俈ue鑷畾涔夋寚浠ゆ湁鍏ㄥ眬娉ㄥ唽鍜屽眬閮ㄦ敞鍐屼袱绉嶆柟寮忋傚厛鏉ョ湅鐪嬫敞鍐屽叏灞鎸囦护鐨勬柟寮,閫氳繃(id,[definition])鏂瑰紡娉ㄥ唽鍏ㄥ眬鎸囦护銆傜劧鍚庡湪鍏ュ彛鏂囦欢涓繘琛()璋冪敤銆傛壒閲忔敞鍐...
绛旓細绗笁,璺ㄥ钩鍙扮殑鑳藉姏,uni-app鑳藉璺ㄥ涓粓绔,H5,瀹夊崜,Ios,寰俊灏忕▼搴,鐧惧害灏忕▼搴,澶存潯灏忕▼搴,鏀粯瀹濆皬绋嬪簭,鐪熸瀹炵幇浜嗕竴濂椾唬鐮,澶氱杩愯,鑰屼笖寰堝ソ閫傚簲浜嗘垜鍥界殑甯傚満銆傜鍥,鏃ョ泭涓板瘜鐨勬彃浠跺競鍦,uni鐨勬彃浠跺競鍦轰篃鍦ㄦ棩鐩婂己澶,鑳藉鍩烘湰涓婃弧瓒虫垜浠钩鏃剁殑寮鍙戦渶姹傘倁ni-app鐨勭粍浠舵湁鍘熺敓璋冪敤鑳藉姏,绗笁鏂圭殑vue搴撳湪...
绛旓細})鍦ㄥ畬鎴愪簡楠ㄦ灦灞忕殑鍑嗗涔嬪悗,灏辫疆鍒颁竴涓叧閿彃浠 vue-server-renderer 鐧诲満浜嗐傝鎻掍欢鏈敤浜庢湇鍔$娓叉煋,浣嗘槸鍦ㄨ繖涓緥瀛愰噷,鎴戜滑涓昏鍒╃敤瀹冭兘澶熸妸 .vue 鏂囦欢澶勭悊鎴 html 鍜 css 瀛楃涓茬殑鍔熻兘,鏉ュ畬鎴愰鏋跺睆鐨勬敞鍏,娴佺▼濡備笅: 鍥涖佹柟妗瀹炵幇鏍规嵁娴佺▼鍥,鎴戜滑杩橀渶瑕佸湪鏍圭洰褰曟柊寤轰竴涓 webpack.skeleton.conf.js 鏂囦欢,浠...
绛旓細npm run dev --rd=rd1 --focus缁勪欢浼樺寲vue 鐨勭粍浠跺寲娣卞彈澶у鍠滅埍,鍒板簳缁勪欢鎷嗗埌浠涔堢▼搴︾畻鏄悎鐞,杩樿鍥犻」鐩ぇ灏忚屽紓,灏忓瀷椤圭洰鍙互绠鍗曞嚑涓粍浠舵悶瀹,鐢氳嚦涓嶇敤 vuex,axios 绛夌瓑,濡傛灉瑙勬ā杈冨ぇ灏辫缁嗗垎缁勪欢,瓒婄粏瓒婂ソ,鍖呮嫭甯冨眬鐨勫皝瑁,鎸夐挳,琛ㄥ崟,鎻愮ず妗,杞挱绛,鎺ㄨ崘鐪嬩笅 Element 缁勪欢搴撶殑浠g爜,娌℃椂闂村啓杩欎箞璇︾粏鍙互鐩...
绛旓細Swiper鑳瀹炵幇瑙﹀睆鐒︾偣鍥俱佽Е灞廡ab鍒囨崲銆佽Е灞忓鍥惧垏鎹㈢瓑甯哥敤鏁堟灉銆係wiper寮婧愩佸厤璐广佺ǔ瀹氥佷娇鐢ㄧ畝鍗曘佸姛鑳藉己澶э紝鏄灦鏋勭Щ鍔ㄧ粓绔綉绔欑殑閲嶈閫夋嫨锛佽В鍐vue涓浣跨敤swiper鎻掍欢锛屽湪寮曞叆swiper鎻掍欢鍚庯紝鍙戠幇鏃犳硶姝e父杩愯闂杩欐鎴戜滑妯℃嫙浠庡悗鍙板彇涓嬫暟鎹紝鐒跺悗鏁版嵁缁戝畾鍦╯wiper鏍囩涓<template> <abc></abc> ...
绛旓細Vue Router鏄疺ue.js妗嗘灦涓殑涓涓噸瑕佺粍浠讹紝瀹冭礋璐e湪搴旂敤涓鐞哢RL鍜岀粍浠剁殑鏄犲皠鍏崇郴锛瀹炵幇椤甸潰闂寸殑瀵艰埅銆傝矾鐢辩殑涓昏浣滅敤鏄帶鍒剁敤鎴峰湪搴旂敤涓殑瀵艰埅娴佺▼锛岄氳繃閰嶇疆涓嶅悓鐨勮矾鐢辫鍒欙紝瀹炵幇缁勪欢鐨勫姩鎬佸姞杞藉拰椤甸潰鐨勬棤缂濆垏鎹傝寮濮嬩娇鐢ㄨ矾鐢憋紝棣栧厛闇瑕佽缃甡router`瀵硅薄锛屽苟杩涜涓変釜鍩烘湰鍖哄垎锛氳矾鐢辨ā寮忋佽矾鐢遍厤缃紙鍖呮嫭...
绛旓細涓銆乭tml + css閮ㄥ垎锛氳繖閮ㄥ垎鐗瑰埆绠鍗曪紝鍒扮綉涓婃悳璧勬枡锛屼功绫嶈棰戦潪甯稿銆俢ss涓洅瀛愭ā鍨嬶紝娴佸姩锛宐lock锛宨nline锛屽眰鍙狅紝鏍峰紡浼樺厛绾х瓑杩欎簺鑷璧锋潵涔熸槸闈炲父瀹规槗銆傛渶鍚庡啀娣卞叆浜嗚В涓嬫祻瑙堝櫒宸紓鎬э紝ie9浠ヤ笅鍏煎绠鍗曚簡瑙e氨琛屼簡锛宨e9浠ヤ笅娴忚鍣ㄨ娣樻卑鎺夋槸瓒嬪娍锛屼綆鐗堟湰娌″繀瑕佹氮璐瑰ぇ閲忔椂闂村幓瀛︿範鍏煎涓绘祦娴忚鍣紝google ...