小记录

##一: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.


小记录_第1张图片

2.

小记录_第2张图片
添加图标

3.


小记录_第3张图片

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


小记录_第4张图片

5.打开文件修改css



小记录_第5张图片
6


6.全局引入css

7.项目中使用


小记录_第6张图片


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

1).


小记录_第7张图片
生成代码链接并赋值打开新的网页能够看到代码


小记录_第8张图片



小记录_第9张图片
这种代码如果图标多会很长很长,可以替换成下面



小记录_第10张图片
把这一段赋值到css文件,其他的不变,然后使用也不变


小记录_第11张图片
也可以正常使用,dom中使用不变,暂时没有发现有什么不可以,

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


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

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


局部过滤器

小记录_第12张图片
不传参和传参数
小记录_第13张图片
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

小记录_第14张图片
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.

小记录_第15张图片


小记录_第16张图片

七.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

你可能感兴趣的:(小记录)