Vue
jnChen10
这个作者很懒,什么都没留下…
展开
-
Vue - 跨域代理
参考文档:devServer.proxy前端开发接入接口时,难免遇到跨域请求(协议/域名/端口与后台接口不一致),最简单的解决方法是让后台同事将接口设置为可支持跨域请求,待项目上线再关闭。但这也容易造成,开发的这段时间内,其他人也能访问到后台的接口另一种解决方法是在vue-cli中设置代理,我的项目中使用 vue-cli3、axios出现跨域的写法// axios配置文件axi...原创 2020-03-03 14:27:41 · 251 阅读 · 0 评论 -
Vue - 适配iPhoneX微信浏览器
vue-cli项目中iPhoneX底部黑色横条遮挡Footer组件的解决方法// index.html<head> // 新增 viewport-fit=cover <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=...原创 2020-01-09 18:06:14 · 843 阅读 · 0 评论 -
Vue - vue-cli3
关闭eslint '...is defined but no used' 的提示// package.json"eslintConfig": { "rules": { "no-unused-vars": "off" }},原创 2020-01-08 21:55:43 · 212 阅读 · 0 评论 -
Vue - better-scroll
better-scroll参考资料Github、1.x文档、2.x文档better-scroll介绍基于原生 JS 实现的,不依赖任何框架。完美运用于 Vue、React 等 MVVM 框架1.x版本与2.x版本比较1.x是引入整个better-scroll功能代码,体积大。2.x只提供了基础核心功能,体积更小。如果需要使用下拉加载,上拉刷新等功能,需要额外安装对应的插件使...原创 2020-01-03 23:04:36 · 302 阅读 · 0 评论 -
Vue - 引入字体文件
参看博客:vue scss @font-face 路径问题// base.scss文件,引入路径'~@/common/@font-face { font-family: 'WenYue-HouXianDaiTi'; src: url('~@/common/style/fonts/WenYue-HouXianDaiTi-NC-W4-75.otf');}// .vue文...原创 2019-12-30 14:44:10 · 324 阅读 · 0 评论 -
Vue - 转场动画
参考博客:手摸手,带你用 vue 动画实现原生 app 切换效果,丝滑般的体验使用vue官方提供的transition组件实现类似微信的转场动画效果,动画分前进动画与退出动画两种当跳转至新页面(前进)时,当前页面向左侧滑出,新页面从右侧滑入 当触发返回(退出)时,当前页面向右侧滑出,上一层页面从左侧滑入所以需要在store中存放一个变量,transtion组件根据变量名判断使用前进动画...原创 2019-12-24 15:17:42 · 1097 阅读 · 0 评论 -
Vue - 组件
组件是可复用的 Vue 实例,都有data、computed、watch、methods 以及生命周期钩子等组件命名可在Vue官方提供的代码风格指南中查阅相关命名规则// PascalCase(驼峰命名)MyComponent.vue// 连接符命名my-component.vue都可以通过以下两种方式引用组件<MyComponent></<M...原创 2019-12-22 10:56:45 · 81 阅读 · 0 评论 -
Vue - axios
参考文档:axios参考博客:《vue中Axios的封装和API接口的管理》《Axios源码深度剖析》axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护配置axios// 设置请求跟路径axios.defaults.baseURL = 'https://www.abc.com/project/api/'// 设置请求超时时间,如果超...原创 2019-12-17 13:37:44 · 111 阅读 · 0 评论 -
Vue - keep-alive
在使用keep-alive缓存组件之前,需要了解组件的生命周期变化,下面列举主要的生命周期函数// Home.vuebeforeRouteEnter: (to, from, next) => { console.log('Home beforeEnter') next()},beforeRouteLeave (to, from, next) { console.log...原创 2019-12-13 16:27:36 · 112 阅读 · 0 评论 -
Vue - vuex
Vuex状态管理模式当两个或两个以上的组件需要共用同一个数据源时,使用Vuex对数据的管理会变得更见简单轻松(相比localStorage、路由传参)响应式Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件(视图)也会相应地得到高效更新。核心概念state getters mutations actions...原创 2019-12-13 07:55:34 · 207 阅读 · 0 评论 -
Vue - App.vue
vue-cli脚手架搭建的项目,在main.js引入App.vue,App.vue作为最顶层的组件,也具有自己的生命周期函数,其主要的功能是嵌套子组件页面加载时,从视图的最顶层组件到最底层组件依次创建(created),再从最底层组件到最顶层组件以此挂载(mounted)// App.vue,其中嵌套v-header与v-tab子组件<template> <di...原创 2019-12-07 21:16:15 · 716 阅读 · 0 评论 -
Vue - nextTick()
官方文档:异步更新队列例如,当你设置vm.someData = 'new value',该组件不会立即重新渲染。此时立刻获取DOM节点中绑定的元素值可能失败,因为Vue更新DOM是异步执行的。为了在数据变化之后立刻获取更新后的 DOM,可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如:<div id="...原创 2019-11-18 07:34:31 · 99 阅读 · 0 评论 -
Vue - data
参考:深入响应式原理、data、数组更新检测var vm = new Vue({ el: '#app', data: { name: 'jn', items: [1, 2, 3], person: { firstName: 'chan' } }})1.Vue是一个响应式框架,只有在data中提前声明的变量,才能在视图中响应。如果你...原创 2019-11-07 22:26:35 · 134 阅读 · 0 评论 -
Vue - mixins
官方文档:https://cn.vuejs.org/v2/guide/mixins.html混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(data/方法/生命周期钩子函数)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时,发生冲突时以组件数据优先。 同名钩子函...原创 2019-12-20 17:18:58 · 135 阅读 · 0 评论 -
Vue - IOS公众号分享签名失败
微信公众号分享功能,安卓成功,ios出现签名错误。区别在于发送给后台做验证的url不同,安卓需要发送当前页面的url,ios需要发送进入的第一个页面的url,所以需要将第一个页面的url保存起来我的第一个页面是index.vue,添加路由守卫beforeRouteEnter (to, from, next) { let userAgent = navigator.userAgent...原创 2019-05-15 17:20:06 · 1760 阅读 · 0 评论 -
Vue - IOS10白屏
参考博客:假如测试说你的网站在iOS 10有问题1.ios10 BUGbuild/webpack.prod.conf.js新增mangle的选项new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, // 解决ios10手机打开空白问题 mangle:...原创 2019-05-17 17:09:49 · 1596 阅读 · 0 评论 -
Vue - vConsole
vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。npm install vconsole在.vue文件中引入import VConsole from 'vconsole/dist/vconsole.min.js'var vConsole = new VConsole();...原创 2019-05-24 13:54:13 · 145 阅读 · 0 评论 -
Vue - img数据绑定
在vue-cli项目中src目录下建立assets文件夹,存放图片资源文件直接引用方式,src指向图片存放的目录<img src="../assets/banner.png">绑定方式,src可以是接口返回的线上路径或者在data中引用本地文件资源路径<img :src="myimg">export default { data () { ...原创 2019-05-15 10:18:33 · 1284 阅读 · 0 评论 -
Vue - vue-router
Vue.js通过组合组件来组成应用程序,使用 VueRouter将组件映射到路由 (routes),然后告诉 VueRouter 在哪里渲染它们声明式导航使用<router-link>组件来导航,通过传入 `to` 属性指定链接,<router-link> 默认会被渲染成一个 `<a>` 标签,可以使用`tag`属性指指定渲染标签// router...原创 2019-02-20 23:03:36 · 136 阅读 · 0 评论 -
Vue - style绑定background
<div :style="{background: 'url(' + item.home_img + ') center center', backgroundSize: '100%'}">注意属性中存在'-'需要修改,如background-size需要修改成backgroundSize或者‘background-size’ 属性的值如果不是变量,需要加引号,如'100%...原创 2019-03-05 11:19:40 · 4035 阅读 · 0 评论 -
Vue - history模式上线后页面空白以及404
以下代码基于vue-cli构建的项目1.修改路由文件mode: 'history'base填写打包文件(index.html和static文件夹)放置的目录路径例如我的项目放置在(https://www.abc.com/draw/h5/)下,则base:/draw/h5/export default new Router({ mode: 'history', bas...原创 2019-03-23 18:27:41 · 1750 阅读 · 0 评论 -
Vue - 阻止页面滑动
<div @touchmove.prevent></div> // Vue<view catchtouchmove="false"> // 小程序原创 2019-02-27 11:03:37 · 1823 阅读 · 0 评论