vue
关注
分享
扫一扫
冬天爱吃冰淇淋
性别男，爱好女。
展开
-
重写vue源码：vue-router的实现
1.解析vue-routervue-router的基本使用：import Vue from 'vue';import VueRouter from '../extends/my-router';import Home from '../views/Home.vue';Vue.use(VueRouter);const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '原创 2021-01-02 14:02:52 · 486 阅读 · 0 评论 -
重写vue源码：Vuex的实现
1.从Vuex的用法去分析vuex的基本使用：import Vue from 'vue';import Vuex from 'vuex'; Vue.use(Vuex);export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, },});观察基本使用得出结论：Vuex是一个插件，因为它是通过Vue.use来加载。所以Vuex或者Vuex.install是一原创 2021-01-01 16:05:19 · 229 阅读 · 0 评论 -
重写vue源码：Vue.use的实现
Vue.use的功能分析：Vue.use是用来加载插件用的，第一个参数是插件，第二个参数和往后参数都是是插件的自定义配置对象。加载插件，就是去执行plugin或者plugin身上的install方法。Vue.use的实现：Vue.myUse = function(plugin) { // 防止重复加载 const _installedPlugins = this._installedPlugins || (this._installedPlugins = []) const index = _in原创 2021-01-01 14:45:36 · 176 阅读 · 0 评论 -
vue的$route和$router的基本认识
$route：是用来获取当前路由的一些信息的。$router：具有某些功能，相当于全局路由器，都可以用。一般用来跳转路由用的。this.$router.push()的基本用法：直接传路由地址:this.$router.push('/index')this.$router.push('/index/12') // 动态路由，参数通过params获取// query传参，相当于get传参，会在地址栏显示参数，通过query获取this.$router.push('/index?id=1') 通原创 2020-08-03 17:23:38 · 277 阅读 · 0 评论 -
vue-awesome-swiper轮播图插件的基本使用
1.安装vue-awesome-swipernpm i vue-awesome-swiper@3.1.3或者yarn add vue-awesome-swiper@3.1.3为什么要安装3.1.3版本的vue-awesome-swiper插件？为什么不装最新版的？答：我在开发项目的时候，使用了最新版的vue-awesome-swiper插件的时候，发现最新版(swiper6.0)的一些文件丢失、不能自动播放等bug，根据官方文档以及百度还是没能解决以上bug，所以推荐各位先使用稳定版。2.导原创 2020-07-31 09:24:47 · 393 阅读 · 0 评论 -
vue项目根据开发环境来配置对应的服务器地址
1.在package.json中设置开发环境 "scripts": { "serve": "vue-cli-service serve --mode development", "test": "vue-cli-service serve --mode test", "build": "vue-cli-service build --mode production", "lint": "vue-cli-service lint" },–mode developme原创 2020-07-28 22:16:44 · 1083 阅读 · 0 评论 -
vue.comfig.js的项目中的一些基本配置
const path = require("path");function resolve (dir) { return path.join(__dirname, dir)}module.exports = { configureWebpack: { resolve: { alias: { api: resolve('/src/api'), base: resolve('/src/原创 2020-07-27 15:33:29 · 199 阅读 · 0 评论 -
vue项目中简单使用create-keyframe-animation插件
1.安装npm i create-keyframe-animation2.导入import animations from 'create-keyframe-animation'3.在transition的enter或leave钩子函数中使用 // 定义动画内容 const animation = { 0: { transform: `translate3d(${x}px,${y}px,0) scale(${scale})` },原创 2020-07-14 21:06:45 · 639 阅读 · 0 评论 -
慕课网vue播放器实战：制作播放页面
制作过程遇到的难点：制作全屏背景图片：播放页面的背景图片使用了高斯模糊，由于到css的一样样式不太了解，制作起来耗费了一些事件。背景图片的高斯模糊使用了filter样式：filter:blur(20px)。在查阅资料的时候，发现了filter还有一些强大的功能，就是我们国家公祭日的时候，有些网站就会变成了灰色，就是用了filter这个样式：filter: grayscale(100%);。有兴趣的可以去了解一下。制作中间区域：因为中间区域是需要了装两个div的，一个是歌曲的图片，另一个是歌词。刚开始的原创 2020-07-14 20:06:23 · 311 阅读 · 0 评论 -
慕课网vue播放器实战：制作歌手详情页
开发过程中遇到的难点：进入页面没有开场动画：需要为transition标签添加apper属性，这样才会有出场动画返回按钮、标题和按钮可以通过定位的方式来实现。放背景图片的div的宽高比例是10：7，我们可以通过设置宽度100%，padding-top为70%。因为padding和margin的值百分比都是相对容器的宽度来计算的。我们需要一个背景盒子，在列表滑动的适合，他也跟着滑动，这样向上滑的时候就会遮住背景图片了。存储列表的div，用绝对定位，我一开始的想只通过css来把他和用来遮住背景的di原创 2020-07-13 15:11:35 · 181 阅读 · 0 评论 -
vue开发中使用和封装jsonp插件
简单使用jsonp插件1.安装npm install jsonp2.导入import jsonp from 'jsonp'3.使用jsonpjsonp(url,options,(err,res) => { console.log(res)})url：就是请求的地址options：一个对象param：用来指定接收回调函数名称的变量（默认是callback）timeout：发出超时错误的事件。0禁用（默认是60000）prefix：jsonp响应的全局回调函数的前缀（默认原创 2020-07-11 20:47:14 · 473 阅读 · 0 评论 -
慕课网vue音乐播放器实战：better-scroll实现轮播图
知识点：better-scroll的生命周期函数：scrollEnd（页面滚动完自动调用）,beforeScrollStart（页面滚动前调用）计算slider的宽度：slider的宽度 = 轮播图的数量 * 一个图片容器的宽度。如果你要实现循环播放，你就要多给两个图片容器的宽度，这个better-scroll内部用来克隆第一个和最后一个轮播图，实现无缝首尾切换。屏幕大小变化的时候为什么不需要两倍的宽度？ 答：因为已经克隆了第一个和最后一个轮播图，dom上已经多了两个轮播图元素，此时我们this.c原创 2020-07-09 17:57:33 · 345 阅读 · 0 评论 -
慕课网vue播放器最新QQ音乐api
前言：最近做了慕课网上的vue播放器，做的过程中，花费了大量的时间去找api，为了方便大家学习，特意写了个后台来抓取qq音乐的api，有需要的可以粘贴运行，处理一下跨域就能用了：const axios = require('axios')const express = require('express')const app = express()const Router = express.Router()// 获取推荐歌单app.get('/api/apiData', (req, res)原创 2020-07-08 22:30:28 · 682 阅读 · 6 评论 -
前端项目没数据？教你抓取各大网站api
抓取各大网站api，让你的前端开发生活充满动力原创 2020-07-06 10:21:45 · 20234 阅读 · 2 评论 -
vue+svg实现动态圆形进度条
使用svg和circle来实现进度条。circle标签的属性：cx：圆心的x坐标cy：圆心的y坐标r：圆的半径fill：填充的颜色stroke：边框的填充的颜色stroke-width：边框的大小stroke-dasharray：圆的周长2PIRstroke-dashoffset：等于周长就是边框空白，等于0就填充完边框实现原理：画出两个圆，两个园的边框填充颜色不一样，填充第一个园的边框，动态改变第二个元的stroke-dashoffset的值，让它从圆的周长变到0，然后填充完整个边.原创 2020-06-28 10:33:10 · 1096 阅读 · 0 评论 -
巧妙利用Vue.mixin()实现Vuex
实现原理：Vue.mixin()和Vue实例很相似，就是它也有生命周期函数。不过它的生命周期很特别，执行的时候，所有Vue实例和组件都会调用它的生命周期函数。利用这一特点，我们可以实现Vuex。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2020-05-31 13:25:38 · 581 阅读 · 0 评论 -
妙啊！Element-ui的表单验证功能
element-ui的表单验证和官网没提及的隐藏功能原创 2020-05-31 11:25:47 · 1955 阅读 · 0 评论 -
利用Object.defineProperty简单实现vue的数据响应式原理
概念终究还是概念，实践才能真正理解的其中的精髓！原创 2020-05-20 14:32:51 · 672 阅读 · 0 评论 -
看了源码我才知道，vue是这样渲染页面的！
掌握vue原理，从源码入手！原创 2020-05-17 11:23:26 · 10621 阅读 · 17 评论 -
vue使用markdown编辑器和把md渲染成html
一.使用markdown编辑器1.安装mavon-editor插件npm install mavon-editor --save2.在main.js中引入mavon-editorimport mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'注：引入index.css是为了解决编辑器的功能显示...原创 2020-04-02 12:02:54 · 3568 阅读 · 1 评论 -
vue学习：vue-router的基本使用步骤
vue-router的基本使用步骤：1.引入文件： <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js">&...原创 2020-03-07 13:06:07 · 356 阅读 · 0 评论