vue
CherryLee_1210
正在朝着自己梦想一步一步的努力的前行着
展开
-
当我们vue使用Bus的时候,记得要使用$off清除
// a 组件created () { Bus.$on('refreshGroupList', () => { // 这是一个bus的订阅自定义事件 });},beforeDestroy () { // 在组件销毁之前清除自定义事件 Bus.$off('refreshGroupList');}// b 组件 在事件中触发自定义事件Bus.$on('refreshGroupList');之所以清除bus的自定义事件,是因为bus的自定义事件是基于“发布订阅”模式的。原创 2021-01-12 17:33:27 · 5519 阅读 · 2 评论 -
vue项目中纯手撸代码实现滚动加载
在当前列表有很多数据的时候,我们一般会采用分页加载数据,这里我们也可以通过滚动加载更多数据。在这里我们先要知道滚动到什么时候,开始请求数据。外层盒子设置overflow:auto内层盒子高度不定。超出外层盒子滚动。当内部盒子滚动到距离外部盒子底部50px的时候开始加载数据。页面布局<div class="history-list-box scroll-bar" ref="scr...原创 2019-12-18 19:58:24 · 445 阅读 · 0 评论 -
vue项目中js,通过import导入本地json文件
1、如果json是对象模式我们就可以采用如下方式xxx.json{"name": "cherry","age": 25}xxx.js// 导入sonimport cherryJSON from './xxx.json'// 操作你想要的结果直接通过.的方式获取相应的key即可2、如果json中是数组,则需要先用{}包一下,再给一个key值,然后同样的方式导入这个js...原创 2019-11-06 18:22:43 · 18010 阅读 · 1 评论 -
vue中实现“模糊搜索”
<template> <div> <div> <el-input v-model="searchInputValue" style="margin: 0 auto; width: 80%;"></el-input> <div v-for=&quo原创 2018-11-01 11:19:01 · 2007 阅读 · 0 评论 -
利用uni-app实现记住账号密码的功能
<template> <view class="content"> <view class="login-image-content"> <image class="login-bg" src="../../static/login-bg.jpg"></image> &am原创 2019-01-31 16:15:35 · 13664 阅读 · 3 评论 -
vue 动态绑定 id
<div class="layui-tab-item" :class="{'layui-show': key === 0}" v-for="(cur, key) in eventData.event" :key="key"> <div class='layui-input-block'> <ul class="ztree treeBox" :id="`mo...原创 2019-05-24 16:45:57 · 7602 阅读 · 3 评论 -
Vue国际区号组件开发(目前已经发布到npm)
当我们在使用一些支持多语言的app或者网站,使用手机注册的时候,在填写手机号的前面都会有+86的字样。所谓的+86就是我们这里所提及的国际区号。我所做的这个vue组件,效果如下目前这个组件没有实现每个国家前面都有相应的国旗。import vueIntlTelInput from "./vue-intl-tel-input";components: { vueIntlTelInput...原创 2019-06-19 17:57:21 · 6982 阅读 · 9 评论 -
vue中使用mapboxGL,并添加marker
这是主体内容原创 2019-08-31 13:05:03 · 2880 阅读 · 1 评论 -
vue项目中实现页面跳转加载进度条(NProgress插件的使用)
效果图1、npm install nprogress --save2、在router文件的index.js中导入如下代码import NProgress from 'nprogress'import 'nprogress/nprogress.css'3、设置全局路由前置守卫和全局路由后置钩子,来实现进度条的显示与完成。router.beforeEach((to, from, nex...原创 2019-09-11 18:29:16 · 1538 阅读 · 1 评论 -
封装axios,并实现全局请求loading(配合ElementUI)、拦截请求参数实现Unicode加密、拦截响应数据
1、封装的axios文件代码如下import axios from 'axios'import { apiDataServer } from '../config'import { Loading } from 'element-ui'let loadingfunction startLoading () { // 使用Element loading-start 方法 loadi...原创 2019-09-17 18:21:48 · 624 阅读 · 0 评论 -
使用EventBus事件车(事件总线)实现组件通信
//创建一个用于通信的bus模块let bus = { install($){ //在vue的原型上添加getBus和setBus $.prototype.getBus = this.get $.prototype.setBus = this.set }, get(key){ //如果实例上有bus对象,返回查询结果,否则undefined i...原创 2018-10-08 15:52:40 · 1070 阅读 · 0 评论 -
uni-app中使用Echarts的实践总结
1、首先在uni-app中不支持包下载所以得自己先新建一个项目,然后进入到这个目录下,执行 npm init,接下来一路回车即可。2、下载所需要的库npm install echarts mpvue-echarts --save3、进入 node_modules 目录,里面的三个目录:echarts、mpvue-echats 、zrender 就是我们需要的第三方库。4、把这三个库cop...原创 2018-10-11 18:18:53 · 45787 阅读 · 27 评论 -
关于Vue中对所做网站ico的解决办法
今儿在做项目中,老大让处理一下网站图标对问题(之前自己网站没有ico)。 由于自己的网站是用vue进行开发的。所以必须考虑到如何用vue进行解决。第一 我们得先找到一个制作网站ico的网站,在这里我就先给大家提供一个吧,如果各位有更好的,烦请私信我哦! http://www.bitbug.net/ 比特虫一个制作网站ico的网站。第二 根据网站的指导,将需要做成ico的图片做成...原创 2018-06-05 23:57:50 · 1546 阅读 · 0 评论 -
vue.js中获取剩余的天数、小时、分钟、秒数
当我们从后台(php)拿到的时间是获取的是从1970年1月1日00:00:00距离的秒数。 但是我们用js拿到的本机时间是1970年1月1日00:00:00距离的毫秒数。<div class="pool pool-common" v-for="(game,index) in currentGames" :key="index"> <div class="nick...原创 2018-06-06 14:28:18 · 5990 阅读 · 0 评论 -
基于Vue的H5项目中,防止页面被缩放和放大
现在vue的脚手架生成项目之后我们会发现index.html页面中。 在head标签中,我们会看到meta标签中有一条显示是&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,user-scalable=0&quot;&amp;gt;但是我们发现这条语句中只是让user-s原创 2018-06-07 11:23:13 · 29266 阅读 · 8 评论 -
Vue新建项目的时候,自己的一些总结
我们在之前搭建一个vue项目直接按照vue官方文档里面的安装指示npm install -g vue-clivue init webpack my-project这两行代码是指引我们创建一个vue项目,可是尴尬的是,现在vue-cli好像不好使了。 后来仔细看了一下vue的官方文档。 另附一VUE CLI的官方地址 https://cli.vuejs.org/点进去一看,...原创 2018-06-25 11:55:02 · 4688 阅读 · 3 评论 -
JS精度问题终结者--math.js之Vue中使用心得
大家有没有遇到过很奇怪的问题在js中0.1+0.2却不等于0.30.1+0.20.30000000000000004这尼玛很尴尬了就,原来是二进制搞的鬼。。(具体原因不说了,想了解的自行百度就好了) 出现问题就要想解决办法的,这就是math.js出场的原因。首先 引入math.jsnpm install mathjs其次 在Vue组建中引入let mat...原创 2018-06-25 18:24:53 · 12146 阅读 · 0 评论 -
vue路由中query参数的一点应用
首先我们得在router文件中import PreciousDetail from "../components/gameList/PreciousDetail.vue"export default new Router({ routes: [ { path: "/preciousDetail/:game_phase?:share_id",//这里是我们定义的路...原创 2018-06-19 16:46:48 · 1345 阅读 · 0 评论 -
Vue的灵活性--渐进式
原创 2018-06-26 17:11:09 · 544 阅读 · 0 评论 -
在vue项目中引入element,并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径。 这里就说一下自己是如何引入UI框架的——vue中引入elementUI。(项目其实早已经开发完了,只是回过头来回顾一下自己当时是怎么做的,顺便再加深一下印象)。首先,我们得先通过npm包管理器,下载elementUI。npm install element-ui然后,就是main.js中引入import ...原创 2018-07-02 16:10:24 · 6282 阅读 · 0 评论 -
运用Vue路由中的afterEach,进行页面的公共头部的信息匹配
前几天在做公共头部的时候,我们可以根据头部的引用,将公共的头部组件,引入到相应的页面中,只需改变公共头部的展示信息。例如:是首页我们就展示“首页“,是个人中心就展示个人中心。 但是,所暴露的问题就是,我们必须每一个页面都必须引用这个公共的头部组件。很是繁琐!!所以必须寻求解决办法。 最终解决办法就是,在最外层的App.vue的文件中直接导入公共的头部组件,这样每一个页面都能显示公共的头部,岂不...原创 2018-06-04 13:35:29 · 5320 阅读 · 0 评论