VUE
翟敏1201
这个作者很懒,什么都没留下…
展开
-
axios封装
1.首先在本地项目新建axios.js2.安装引入axios.jsimport axios from 'axios'const instance = axios.create();3.拦截请求与响应// 封装axios的请求,返回重新封装的数据格式// 对错误的统一处理import axios from 'axios'import errorHandle from './errorHandle'const instance = axios.create();// 请求原创 2020-12-18 15:00:49 · 175 阅读 · 0 评论 -
$emit 和 $on用法
<html> <head> <title>$emit 和 $on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div ...原创 2020-02-07 15:46:31 · 354 阅读 · 0 评论 -
vue项目中将px转为rem
之前在写项目的时候,封装了一个css,用来将px转rem,后来发现这样写还不是很友好,那么有没有一种方法是将我写的px项目运行后自动转为rem的呢,答案肯定是当然有了。1.设置根节点的font-size// 基准大小const baseSize = 32// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要...原创 2019-10-15 13:42:43 · 672 阅读 · 0 评论 -
vue快速搭建web阅读器(二) 电子书解析和渲染
新建Ebook1.在Ebook.vue中引入epubjs 和电子书 具体代码如下: <template> <div class="ebook"> <div class="read-wrapper"> <div id="read"></div> &原创 2019-02-26 22:35:10 · 2626 阅读 · 0 评论 -
vue快速搭建web阅读器(一) 准备工作
1.搭建vue环境 https://blog.csdn.net/chaitong2204/article/details/809430932.安装sasscnpm install node-sass sass-loader --save-dev3.下载阅读器引擎cnpm install epubjs --save4.设置remhttps://mp.csdn....原创 2019-02-18 22:41:18 · 676 阅读 · 0 评论 -
vue webapp之music 滚动固定标题(十四下)
1.标题栏距离问题优化当出现这种情况的时候,我们应该将第一个热门顶上去(当diff的值小于标题的高度时候往上顶,小于的标题高度时不变)1) 获取diff的值2)观测diff的变化设置标题的高度(这里是根据css里的高度定义的)观测diff数据的变化 3)修改dom修改元素的偏移最后实现的效果3.添加loding (引入注册)...原创 2018-11-08 21:00:45 · 165 阅读 · 0 评论 -
vue中evenBus接收不到数据报错
先后创建两个页面,A页面与B页面,需要将A页面的数据传递给B页面。最初我在A页面设置一个点击事件,点击该事件执行以下方法Bus.$emit('option', this.option1)this.$router.push('/bigechart')在B页面中created中接收A页面传来的数据Bus.$on('option', (message) => { ...原创 2018-11-05 10:57:25 · 1201 阅读 · 0 评论 -
vue webapp之music 滚动固定标题(十四上)
当滚动的时候标题固定1.定义标题的标签<div class="list-fixed"> <h1 class="fixed-title">{{fixedTile}}</h1> </div>用计算属性取fixedTilefixedTile () { return this.data[this.curre...原创 2018-11-07 22:35:45 · 332 阅读 · 0 评论 -
vue不同组件传递数据
利用 evenBus 来传递数据1.创建一个evenBus.jsimport Vue from 'Vue'export default new Vue()2.在需要传递数据和接收数据的组件中分别引入 evenBus.js 1)传递数据Bus.$emit('option', this.option1)2)接收数据Bus.$on("option", (mess...原创 2018-11-02 16:43:35 · 366 阅读 · 0 评论 -
vue webapp之music 右侧快速入口实现(十三下)
上一小节右侧滚动是有问题的,所以这里对滚动进行重写scrollY(newY) { // console.log(newY) const listHeight = this.listHeight //当滚动到底部,newY>0 if (newY > 0) { this.currentIndex = 0 ...原创 2018-11-06 22:40:12 · 349 阅读 · 0 评论 -
vue webapp之music 右侧快速入口实现(十三中)
接着上节,滑动右侧会发现位置不正确,原因是this.touch.anchorIndex是一个字符串,将它转为整形此时滑动已经可以正确的滑动了,接下来要做的是左右联动,给右边加一个高亮的效果。1.给scroll组件增加滚动监听事件 //是否监听滚动事件 listenScroll: { type: Boolean, default: false ...原创 2018-10-24 23:06:09 · 235 阅读 · 0 评论 -
reset.scss 和 global.scss
reset.scss的目的是为了消除不同浏览器默认样式的不一致性global.scss规定了整个站点的公共样式、公共方法和公共参数实现px2rem方法,将px转为rem---------------------------------------------1.在src/assets/styles中新建reset.scss/* http://meyerweb.com/eric...原创 2019-02-19 22:19:17 · 4814 阅读 · 0 评论 -
vue快速搭建web阅读器(三)翻页方法
// 翻页 // Rendition.prev prevPage() { if(this.rendition) { this.rendition.prev() } }, nextPage() { if(this.rendition) { this.rendition.next() }...原创 2019-03-04 23:54:38 · 2290 阅读 · 0 评论 -
vue中使用pdf
网上关于pdf预览和下载的方法非常多,我找了很久,发现很多文章都写的比较繁琐,看的很是头疼,最后我用了最简单的一种。首先需要下载pdf.jshttps://github.com/hutingting119/PDF.js(找到static下面的pdf文件夹,整个考到自己的static中)接下来在组件中写代码<template> <div> <...原创 2019-02-26 16:56:53 · 253 阅读 · 0 评论 -
vue快速搭建web阅读器(五)主题设置
父组件将上面信息传递给自组件2.在子组件原创 2019-03-13 22:15:24 · 221 阅读 · 0 评论 -
vue快速搭建web阅读器(六)进度条设置
1.在父组件中通过epubjs中的locations对象实现 // 获取Locations对象(实现阅读进度功能) // 通过epubjs的钩子函数来实现 this.book.ready.then(() => { return this.book.locations.generate() }).then(result => {...原创 2019-03-15 22:17:28 · 674 阅读 · 0 评论 -
vue快速搭建web阅读器(四)字号设置
1.首先在子组件调用父组件的方法setFontSize (fontSize) { this.defaultFontSize = fontSize // 在父类操作fontSize(调用父组件的setFontSize方法) this.$emit('setFontSize', fontSize) }2.在父组件中写此方法setFontSize...原创 2019-03-12 22:01:53 · 301 阅读 · 0 评论 -
vue设置国际化字体
1.首先下载vue-i18n插件yarn add vue-i18n --save2.将一下两个js引入进项目3.将lang目录下的index.js附上import Vue from 'vue'import VueI18N from 'vue-i18n'import en from './en'import cn from './cn'Vue.use(VueI18...原创 2019-05-20 18:34:05 · 1423 阅读 · 0 评论 -
将树形转化为一维数组
// 这里需要两个概念 扩展运算符(...),对数组进行拆分操作 concat将拆分的数组进行合并// 比如 console.log([0].concat(...[1,2]))以下是自己写的一个小demo let navigation = [ { id:1, subitems:[ { id:2, ...原创 2019-06-14 18:20:41 · 2607 阅读 · 0 评论 -
mockjs的使用方法
为了提高工作效率,作为前端的我们经常要自己造数据,最常用的当然是mockjs了1.安装mockjs 和axiosyarn add mockjs -Dyarn add i axios --save2.新建json数据在index.js中引入对应的json3. 在main.js中引入mockjs4.在scr目录下新建api/store.js在store.js...原创 2019-07-09 11:27:33 · 1567 阅读 · 1 评论 -
组建按需加载之babel-plugin-import
笔者最近发现,很多开发的小伙伴引用第三方的库都喜欢全局引入,其实这样是非常不友好的// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from ...原创 2019-07-31 14:30:22 · 10385 阅读 · 0 评论 -
mint-ui的search组件在移动端不显示搜索按钮,以及@keyup.enter事件失效
在移动端不显示搜索按钮,添加一层form就可以完美解决了 <form action="" target="frameFile"> <mt-search autofocus v-model="value" :result="filterResult" cancel-te...原创 2018-10-17 15:47:06 · 1595 阅读 · 0 评论 -
vue webapp之music 右侧快速入口实现(十三上)
1.利用计算属性获取右侧快速入口的列表 computed: { shortcutList () { return this.data.map((group) => { return group.title.substr(0, 1) }) } },2.遍历数组 <ul> <li v-f...原创 2018-09-19 21:56:39 · 306 阅读 · 0 评论 -
vue父组件向子组件利用props传递
父组件子组件原创 2018-09-19 10:31:12 · 535 阅读 · 0 评论 -
vue传参的两种方法 (params与query)
总结以下vue传参两种方式的不同1.params利用params传参,参数不会暴露出来,但是这里需要注意,只能使用name,不能使用paththis.$router.push({name:'Neslist',params:{Id:id}})取值this.$route.params.Neslist 2.query参数会暴露在地址栏中,类似于get请求,使用quer...原创 2018-08-30 16:28:51 · 992 阅读 · 0 评论 -
vue采坑记之echarts动态数据刷新
需求是数据发生变化echarts会立即刷新,我将data设置未动态的请求数据成功之后,将数据插入到investmentnum里面,但是后来发现数据虽然插入成功,但是echarts图却没有变化,所以我猜想是echarts没有刷新接下来进行填坑用watch 监听data的变化,数据发生变化时重新初始化echarts图 watch: { //观察data的变化 in...原创 2018-08-23 10:36:42 · 32673 阅读 · 22 评论 -
vue webapp之music(五)轮播图组件实现
1.新建base目录(用来存放基础组件)2.在recommend组件引入轮播组件3.将请求到的数据存放到data中4.将轮播组件插入5.使用better-scroll做图片滚动https://github.com/ustbhuangyi/better-scrollhttps://zhuanlan.zhihu.com/p/27407024以上两个是对bet...原创 2018-08-06 23:02:59 · 436 阅读 · 0 评论 -
vue webapp之music(四)jsonp的应用+轮播图数据抓取
获取数据的时候通常都会封装一些方法,之前对封装方法一直很抵触,现在越来越觉得封装方法的重要性,所以面向对象的思想一定要有。不间断的更新,强迫自己不断的学习,从学习中不断的提升自己的能力。废话不多说,直接开始撸代码1.通常获取封装的方法都是放在api文件夹下面2.qq音乐数据接口 https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomep...原创 2018-07-31 22:56:28 · 248 阅读 · 0 评论 -
vue webapp之music(三)轮播图数据分析
此次开发推荐页面1.jsonp用来解决跨域问题,它的原理如下:动态创建script标签(没有同源限制,可以跨域),指向请求服务端的地址。具体原理可以查看https://blog.csdn.net/u011897301/article/details/526794862.安装jsonpcnpm install jsonp3.对jsonp进行封装1>新建jso...原创 2018-07-31 21:40:13 · 223 阅读 · 0 评论 -
VUE(二)之vuex
vuex主要用来集中式管理数据,具体的内容可以查看文档 https://vuex.vuejs.org/zh/api/#vuex-storevuex提供的两个方法: mapActions 管理所有事件(行为) mapGetters 获取数据那么它该如何使用呢1.在项目初步搭建完之后可以安装cnpm install vuex -D (项目初...原创 2018-07-22 23:26:29 · 138 阅读 · 0 评论 -
vue webapp之music(二)页面入口+header组件的编写
本项目是跟着慕课网老师学习的下面先上设计图 1.在index 增加移动端适配标签<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">2.安装 cnpm install ...原创 2018-07-29 21:39:56 · 399 阅读 · 0 评论 -
vue webapp之music(一)项目目录介绍
第一次写一个项目的流程,方便自己日后开发查看初始文件目录配置2.开始写我们的代码喽首先我将一些css进行分类,在index.styl中将其他样式依赖进来,然后在main.js中将index.styl导入3.安装 cnpm install stylus -D 和cnpm install stylus-loader -D4.修改.eslintrc.js'e...原创 2018-07-29 15:48:31 · 488 阅读 · 0 评论 -
vue框架配置与搭建(一)
开发环境:windows系统 编译器:webstrom1.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org2.安装vue脚手架npm install -g @vue/cli 安装完成运行 vue (出现以下说明安装成功)运行vue list 查看...原创 2018-07-06 17:53:35 · 2188 阅读 · 1 评论 -
vue实现左滑删除的功能
利用Mint UI 实现类似于qq的左滑删除的功能1.首先在组件内引入模块,我是局部引入import { CellSwipe } from 'mint-ui'Vue.component(CellSwipe.name, CellSwipe2.以下是循环列表里的内容<ul v-if="carousor"> <li v-for="item ...原创 2018-08-31 10:40:54 · 2362 阅读 · 0 评论 -
vue webapp之music(六)利用axios与后端接口代理请求歌单推荐数据
1.慕课网视屏是很早之前录制的,所以与现在build目录有所不同。以下是自己总结的在webpack.dev.conf.js搭建服务器const express = require('express')const app = express()const apiRoutes = express.Router() //后端路由app.use('/api', apiRoutes)...原创 2018-08-29 21:17:37 · 377 阅读 · 0 评论 -
vue webapp之music(十一) 歌手数据处理和singer类的封装
1.规范化处理数据(有时后端给到我们的数据并不是我们所需要的,所以需要自己对数据进行整理)_normalizeSinger(list) { let map = { hot: { //热门数据 title: HOT_NAME, items: [] } } list.f...原创 2018-09-10 22:30:26 · 324 阅读 · 0 评论 -
vue webapp之music(十) 歌手数据接口抓取
1.新建singer.js用来写接口数据的相关方法、import jsonp from 'common/js/jsonp'import {commmonParams, options} from './config'export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'...原创 2018-09-03 21:46:54 · 569 阅读 · 0 评论 -
vue webapp之music(十二) listview基础组件的开发和应用-滚动列表实现
1.该页面是通用页面,所以将它放置在base目录下新建listview.vue2.将数据传递给listview3.遍历对应的数据<scroll class="listview" :data="data"> <ul> <li v-for="group in data" class="list-group">原创 2018-09-11 23:24:46 · 1231 阅读 · 0 评论 -
vue webapp之music(九) vue-lazyload 懒加载插件介绍和应用
关于图片懒加载的具体内容可以参考 https://github.com/hilongjw/vue-lazyload1.安装懒加载的插件cnpm install vue-lazyload -D2.在main.js中引入懒加载插件import VueLazyload from 'vue-lazyload'给VuelazyLoad传入参数Vue.use(VueLazyl...原创 2018-09-02 19:40:10 · 380 阅读 · 0 评论 -
vue webapp之music(八)scroll组件的抽象和应用(下)
如果轮播图片请求的数据在歌单列表接口的数据,滚动的时候就会出现无法滑倒底部的情况1.在img中监听它的 load事件<img @load="loadImage" :src="item.picUrl" class="recoimg">2.在scroll标签上引入组件信息3.loadImage方法loadImage() { //chedkLoaded...原创 2018-09-02 19:07:33 · 125 阅读 · 0 评论