vue
关注
分享
扫一扫
文章平均质量分 64
梧桐落叶~
前端爱好者，练好自己的武功，修炼自己的内功！ing
展开
-
vue内置组件component--通过is属性动态渲染组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"&g原创 2020-07-25 19:37:25 · 2362 阅读 · 0 评论 -
移动端适配兼容--ios系统iphoneX等机型底部小横条处理，app嵌入的适配处理
// 1.首先要在meta标签中加上viewport-fit=cover<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">// 2.整个内容区域html,body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}// 3.如有底部原创 2020-07-04 19:53:27 · 3867 阅读 · 0 评论 -
移动端适配--ios系统iphone11，搜索框弹出键盘取消后，屏幕留下一片空白区域。
主要是滚动高度的问题，失去焦点时设置滚动高度设置为0即可。。 <input @focus="getInpFocus" @blur="delInpBlur" @input="changeInpVal" @keypress="searchInput($event)" v-model="toQueryValue" type="s.原创 2020-07-04 19:13:45 · 772 阅读 · 0 评论 -
js监听浏览器返回，回退，后退事件（手机端H5页面）同样适用--popstate事件
使用原因–vue项目开发中，回退tabbar的颜色没有改变 mounted() { var that = this window.addEventListener("popstate", function(e) { //do someing // window.location.reload(); that.active = Number(that.$route.query.tabbarColor) || 0 }, false); }原创 2020-07-04 18:13:39 · 3435 阅读 · 1 评论 -
vue项目实战--路由后置守卫afterEach解决页面滚动问题
问题描述首页页面较长滚动了一定的位置，这时单击页面上的某个跳转按钮进行页面跳转，滚动条默认是上一个页面的停留的位置，影响用户体验。解决问题//路由配置文件 index.js router.afterEach((to, from, next) => { window.scrollTo(0, 0);});document.body.scrollTop = 0document.documentElement.scrollTop =0本人在后置路由守卫设置的完全没有效果。经过一系原创 2020-06-28 23:46:34 · 944 阅读 · 0 评论 -
vue--localStorage临时存储未提交表单数据，下次登陆后展示上次未提交的数据
方式1–利用watch监听数据变化监听 addForm为表单数据 'addForm': {//深度监听 handler (res) { if (res) { var tempData = [] tempData.push(this.addForm)//值变化时保存在tempData localStor...原创 2020-04-21 19:29:09 · 1952 阅读 · 0 评论 -
vue-cli脚手架安装使用
npm install -g vue-cli //全局安装脚手架工具npm -V //查看版本号vue init webpack test //初始化项目 test为项目名称npm run dev //运行项目 会开启一个localhost:8080的服务器，浏览器输入localhost:8080会弹出一个vue的界面证明安装成功npm run build //编译打包 会在当前目录下生成...原创 2019-11-03 21:29:34 · 106 阅读 · 0 评论 -
vue父子组件，子父组件,非父子组件传值
vue父子，子父组件传值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </...原创 2019-09-03 00:50:07 · 127 阅读 · 0 评论 -
解决vue中修改数据但视图无法更新的情况
数据变视图无法更新问题 详细见例子vue数组更新检测官方文档vue对象更新检测官方文档<div id='app'> <li v-for="(item, index) in arr" :key="index">{{item}}</li> <li v-for="(value,key,index) in obj">...原创 2019-09-02 19:36:15 · 1504 阅读 · 0 评论 -
vue run build 错误 CssSyntaxError错误
错误代码Error processing file: static/css/app.4ce01a6050060bff9b33c64750b6bd11.css(node:6544) UnhandledPromiseRejectionWarning: CssSyntaxError: C:\Users\0\Desktop\haha\static\css\app.4ce01a6050060bff9b3...原创 2019-07-24 09:49:21 · 3305 阅读 · 3 评论