小记录

##一:vue打包后把浏览器前缀去除了。兼容性没有了

改一下自己package.json中的,即可。

"browserslist": [//配置你需要兼容的浏览器或手机版本

    "> 1%",

    "last 2 versions",

    "Android >= 3.2",

    "Firefox >= 20",

    "iOS >= 6",

    "last 10 Chrome versions",

    "last 5 Firefox versions",

    "Safari >= 6",

    "ie > 8"

  ]

##二.自定义字体图标

1.


2.

添加图标

3.


4.下载一份解压 (h5正常使用,小程序把iconfont.css改成iconfont.wxss)


5.打开文件修改css



6


6.全局引入css

7.项目中使用



8.后面添加或者删除icon,不需要重新下载修改

1).


生成代码链接并赋值打开新的网页能够看到代码




这种代码如果图标多会很长很长,可以替换成下面



把这一段赋值到css文件,其他的不变,然后使用也不变


也可以正常使用,dom中使用不变,暂时没有发现有什么不可以,

###总结:后面添加图标修改图标是在增加或删掉少数图标的使用,最好一次解决,先找好图标一次下载


##三.当数据有更新,在dom中渲染后,自动执行该函数,。vue $nexttick

##四.vue的过滤器的使用(多个参数传参,参数穿的顺序和接受的顺序是相反的)


局部过滤器

不传参和传参数
dom中

全局过滤器

https://www.cnblogs.com/xiterjia/p/6701324.html这边文章可以用

邮箱的正则表达式

/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/

手机号的正则表达式

/^[1][3,4,5,7,8][0-9]{9}$/


五.vue引入外部js文件,自定义函数

例如

1.新建calculation.js

calculation.js

2.在使用率不多的情况下局部引入js文件


compontents.vue


实例

3.全局引用,将这个方法注册全局,写到vue的原型上

(1)建立个js 文件(我的文件名为validate.js), 写入该方法, 这里使用 exports.install 注册全局方法,挂载到vue原型上

exports.install = (Vue, options) => {Vue.prototype.validator = {lanenoTransf(val) {returnval.substr(2, 1) == '1' ? '出口' : '入口' }  }}

   然后在main.js中引入 

import validator from '@/utils/validate'

Vue.use(validator)

  最后页面上就可以直接使用

{ prop: 'laneno', label: '数据类型', formatData:this.lanenoTransf},


六. vue中使用vux微信里的前端组件

1.cnpm install vux --save

2.cnpm install vux-loader --save-dev

3.


七.vue授权登陆,回调地址

let redirect_uri ='http://www.91xsf.com/#/author'//授权登陆的中间页

window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+encodeURIComponent(redirect_uri, "UTF-8")+'&response_type=code&scope=snsapi_userinfo&#wechat_redirect'

转一下就可以拿到你想回调的地址了,如果直接把地址拼进去会报错,微信#问题自行百度

// 全局钩子

router.beforeEach((to, from, next) => {

  const toDepth = to.path.split('/').length

  const fromDepth = from.path.split('/').length

  if (toDepth < fromDepth) {

    from.meta.keepAlive = false

    to.meta.keepAlive = true

  }

  let login = localStorage.getItem('token')

  let path = to.path

  if (path === '/my') {

    next()

    return

  }

  if (login) {

    if (path === '/') {

      next({

        path: '/'

      })

    } else {

      next()

    }

  } else {

    next({

      path: '/my'

    })

  }

  next()

});

判断执行内容

八.二维码生成器

https://blog.csdn.net/zhuswy/article/details/80267748

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 搜索了很多资料,看了很多相关博客,终于还是踏过一个个大坑(相关方法都试过),实现相关功能。本文章亲试可行,转载请注...
    hoggenWang阅读 868评论 1 1
  • 写在前头 身为一个JS学渣,每天都在冥思苦想怎么变成一个大师,在看到“学一门后端语言,有助于进阶Js水平”这类话后...
    叶猜阅读 1,618评论 1 1
  • github地址,欢迎大家提交更新。 express() express()用来创建一个Express的程序。ex...
    Programmer客栈阅读 2,669评论 0 1
  • _________________________________________________________...
    fastwe阅读 1,423评论 0 0
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,200评论 0 1