vue
文章平均质量分 52
一枕黄粱-web
砥砺前行,未来可期
展开
-
Vue数据双向绑定的原理+响应式原理
Vue数据双向绑定的原理+响应式原理原创 2022-08-09 12:03:47 · 1045 阅读 · 0 评论 -
Vue组件通信(父子组件通信,非父子组件通信)
总结常见使用场景可以分为三类:父子通信:父向子传递数据是通过 props,子向父是通过 events(emit);通过父链/子链也可以通信(emit);通过父链 / 子链也可以通信(emit);通过父链/子链也可以通信(parent / children);ref也可以访问组件实例;provide/injectAPI;children);ref 也可以访问组件实例;provide / inject API;children);ref也可以访问组件实例;provide/injectAPI;attrs原创 2020-08-28 16:16:46 · 311 阅读 · 0 评论 -
vue使用keep-alive后watch事件不销毁解决方案
使用了keep-alive动态缓存页面之后,有一些很难解决的问题:每个页面里面设置的watch监听事件,如果监听了路由的变化或者vuex的变化,在切换页面的时候不会被销毁页面上的一些方法会被叠加触发,不知道是不是监听了路由的原因,导致每次切换页面,很多方法会被重复叠加的触发,比如切换第一次触发2次,切换第2次触发3次,第3次触发4次,类似这样的情况解决方案:定义一个全局 mixin.j...原创 2020-03-30 11:05:06 · 4110 阅读 · 2 评论 -
Vue项目中使用vw完成移动端页面适配
前提你已经了解vue cli来构建项目。无论使用vue cli 2.x 还是3.x 版本,如果你了解webpack配置,那么过程都是大同小异。首先我们初始化一个项目:vue init webpack vue-vw进入项目:cd vue-vw启动项目:npm run dev1. 安装一些PostCSS插件在项目的根目录下有一个.postcssrc.js,默认情况下已经安装了以下...原创 2019-11-07 13:23:28 · 382 阅读 · 0 评论 -
cube-ui框架scroll / slide组件结合Vue框架keep-alive组件使用遇到的坑
**1. 使用keep-alive缓存的页面中如果使用了cube-ui的scroll相关组件,必须在activated方法中手动调用scroll组件的refresh()方法刷新,否则会出现无法上下滚动的情况2.使用keep-alive缓存的页面中如果使用了cube-ui的slide相关组件,必须在activated方法中手动调用slide组件的refresh()方法刷新,否则会出现tab标签切...原创 2019-10-09 15:05:25 · 647 阅读 · 1 评论 -
vue-cli 3.x / vue-cli 4.x搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/一、安装 @vue/cli更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装(根据cmd命令 vue -...原创 2019-09-04 11:40:50 · 2484 阅读 · 0 评论 -
vue项目使用vw布局及注意点(IOS上图片不显示bug)
注意事项在ios端img标签的图片不显示,安卓可正常显示解决方案: 不可以为img设置任何css样式,只可以在为img的父盒子设置样式,img的大小靠百分比设置。代码示例:错误示例<div class="img"> <img src="xxx.png" alt=""></div><style> .img{ ...原创 2019-08-21 12:03:32 · 917 阅读 · 0 评论 -
vue-cli项目+webpack打包优化
一 路由懒加载 { path: 'customerInfo', name: 'customerInfo', meta: {title: '客户信息', keepAlive: false}, component: resolve => require(['@/components/user/customerInfo'], r...原创 2019-08-07 16:41:46 · 236 阅读 · 0 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles" @click="getDescribe(article.id)">methods:方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.p...原创 2019-08-06 10:35:22 · 181 阅读 · 0 评论 -
微信分享功能实现,兼容安卓和IOS
IOS微信分享注意事项ios分享图标不能超过32Klink参数带中文或者特殊字符,带中文的url在安卓中应该也是会出问题的,但是安卓会自动encodeURIComponent(),而ios不会。所以如果url参数中带了中文字符,将参数encodeURIComponent()编码,再提交代码,ios可以正常分享。...原创 2019-06-04 17:47:34 · 1224 阅读 · 0 评论 -
vue-cli项目路由history模式相关配置
一.项目配置1.路由配置在router配置文件中加入mode: ‘history’, 如果nginx配置文件中要映射到子文件mobile,那么要配置 base: ‘/mobile/’2.打包配置如果nginx配置文件中要映射到子文件mobile,那么要在config目录下的index.js中build打包配置下将 assetsPublicPath: ‘/’ 修改为 assetsPubl...原创 2019-06-14 10:35:43 · 3319 阅读 · 0 评论 -
Vue项目rem适配
1.安装依赖npm install lib-flexiblenpm install postcss-pxtorem2.在vue-loader.conf.js文件module.exports中加入以下代码 css: { loaderOptions: { postcss: { plugins: [ ...原创 2019-05-23 14:13:23 · 500 阅读 · 0 评论 -
Vue项目手机验证码输入框制作
1.html部分 <div class="number-input flex-row" id="my-vcode"> <input type="tel" maxlength="1" v-model="fourNumerObj.input1" id="input1" @input="getNextFocus(1)"/> <input type=...原创 2019-05-23 12:25:39 · 911 阅读 · 0 评论 -
移动端web, vue-cli中引入mint-ui的方式(全部引入与按需引入)
一、全部引入1、安装mint-uinpm intall mint-ui --save2、main.js中引入mint-uiimport MintUI from ‘mint-ui’import ‘mint-ui/lib/style.css’Vue.use(MintUI)3、组件调用退出登录button组件在页面正常显示了,说明我们成功了。二、按需引入1、除了安装mint-ui...原创 2019-05-10 12:14:07 · 849 阅读 · 0 评论 -
vue-webpack项目 开发环境局域网访问
vue-webpack项目 开发环境局域网访问1.查看自己在局域网内的ip命令行 ipconfig 查看IP42.回到自己的开发目录,在根目录找到comfig/index.js修改 host: 自己的局域网ip修改 port: 自定义端口-最好不要用80或者其他常用端口示例:comfig/index.jshost:‘192.168.2.152’,//不用加上 httpport: 7...原创 2018-12-07 11:24:25 · 867 阅读 · 0 评论