![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 90
前端阳光
公众号《前端阳光》抓不住爱情的我 总是眼睁睁看她溜走 世界上幸福的人到处有 为何不能算我一个
展开
-
手写Vuex核心原理,再也不怕面试官问我Vuex原理
手写Vuex核心原理文章目录手写Vuex核心原理一、核心原理二、基本准备工作三、剖析Vuex本质四、分析Vue.use五、完善install方法六、实现Vuex的state七、实现getter八、实现mutation九、实现actions一、核心原理Vuex本质是一个对象Vuex对象有两个属性,一个是install方法,一个是Store这个类install方法的作用是将store这个实例挂载到所有的组件上,注意是同一个store实例。Store这个类拥有commit,dispatch这些方法,原创 2020-08-01 13:06:02 · 4769 阅读 · 6 评论 -
三面面试官:运行 npm run xxx 的时候发生了什么?
面试官:npm run xxx的时候,发生了什么?讲的越详细越好。 我(嘿嘿,稳了,这次我要30k): 嘻嘻!...原创 2022-03-25 14:49:42 · 1428 阅读 · 1 评论 -
UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以。因为我觉得没有什么是css实现不了的。更何况我要在她面前展现得我很厉害的样子。开发起来果不其然,在我打开蓝湖后,发现属性都给我提供好了于是我立即将这份代码ctr c,然后ctr v,一番丰功伟绩立马就完成了,效果也是杠杠滴。然后兴高采烈地交付给UI小姐姐查看了。小姐姐也说可以。出于职业素养,我马上拿起我在pdd上9.9买的iphone13手机(当时也就邀请了我老家整个镇子的人来帮我砍一刀吧)查看效果,哇塞真机效原创 2022-03-07 17:14:02 · 1334 阅读 · 2 评论 -
打造属于自己的项目脚手架工具----Vue CLI
打造属于自己的项目脚手架工具----Vue CLI一、初始化——把脚本映射为命令1.vue-cli演示2.创建自己的脚手架文件(pgx-cli)二、使用commander解析命令行参数1.vue-cli演示2.安装使用commander三、设计命令行参数在index.js中将复制过来的代码简化。四、准备模板五、根据pgx create 命令 将模板下载到本地1.安装 download-git-r...原创 2020-03-28 14:19:06 · 796 阅读 · 0 评论 -
vue面试之加分项
对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了。在面试过程很多HR会问到。image第一招:化繁为简的Watch场景还原:组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没...原创 2019-12-13 10:14:02 · 496 阅读 · 0 评论 -
【前端性能优化】vue性能优化
一、templatev-show,v-if 用哪个?第一个维度是权限问题,只要涉及到权限相关的展示无疑要用v-if,第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用v-show,不频繁切换的使用v-if,这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用v-if,因为减少了 dom 数量,加快首屏渲染,至于性能方面我感觉肉眼看不出来切换的渲染过程,也...原创 2019-12-13 10:12:48 · 203 阅读 · 0 评论 -
JS实现简单的Vue
vue的使用相信大家都很熟练了,使用起来简单。但是大部分人不知道其内部的原理是怎么样的,今天我们就来一起实现一个简单的vue。Object.defineProperty()实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get、set来完成数据的读取和更新。从上面可以看到通过get获取数...原创 2019-12-09 16:41:06 · 1231 阅读 · 0 评论 -
Vue-分享功能
今天分享一个小技巧,教你如何一分钟内学会用vue实现分享功能。H5无法实现直接调用手机App并实现分享功能,如果你想自定义分享的内容,就必须在微信内嵌的浏览器里面调用微信的分享接口(QQ浏览器就要调用它的相关api,其他浏览器也是),毕竟H5不是APP,有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能(把当前页面的URL分享出去,分享的内容根据浏览器自身...原创 2019-12-08 23:32:30 · 5261 阅读 · 3 评论 -
如何开发 Vue 插件?
项目由 cli 3+创建Element、bootstrapVue 它们都是非常优秀的 vue 插件,如果我们也想参与插件开发那要怎么做呢?Vue.use( plugin ) 注册插件//引自官方apiVue.use( plugin )参数:{Object | Function} plugin用法:安装 Vue.js 插件。如果插件是一个对象,必须提供 insta...原创 2019-12-06 13:51:49 · 181 阅读 · 0 评论 -
vue面试题之一:生命周期函数面试题
1. 生命周期函数面试题1. 什么是vue生命周期?Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程,我们称这是 Vue 的生命周期。2. vue生命周期的作用是什么Vue 所有的功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。生命...原创 2019-12-06 13:50:36 · 516 阅读 · 0 评论 -
前端面试时面试官想要听到什么答案(关于一些Vue的问题)
本文会列举一些平时面试时问到的问题和答案,并说明面试官在当时问到这个问题时所期望对方的回答:vue生命周期(钩子函数)问题请说一下vue的生命周期函数(钩子函数)。问题描述首先关于生命周期函数,一般我的第一个问题就是这个,我认为是每个使用vue的都要清楚的,如果这个问题答的问题很大其实我都不太想继续往下进行了。即使英语不标准(我就是不标准的人,并不是说这是个问题)也要去把关键...原创 2019-12-06 10:35:55 · 785 阅读 · 0 评论 -
mock.js模拟接口获取数据
npm install --save-dev mockjsmock 的index.js文件import Mock from 'mockjs'import BookHomeApi from './bookHome'import BookShelfApi from './bookShelf'import BookHomeList from './bookList'import BookF...原创 2019-10-18 22:07:51 · 1063 阅读 · 0 评论 -
经典卡片翻转动画实现
页面布局的实现最终布局如图所示这是分布的大致格式<template> <div class="flap-card-wrapper" v-show="flapCardVisible"> <div class="flap-card-bg"> <div class="flap-card" v-for="(...原创 2019-10-17 21:07:50 · 884 阅读 · 1 评论 -
商业级web阅读器项目(下下下)
7-3 书城首页(标题+搜索框布局)界面效果如图’<template> <div class="search-bar" :class="{'hide-title':!titleVisible}"> <transition name="title-move"> <div class="search-bar...原创 2019-10-12 09:59:23 · 369 阅读 · 0 评论 -
商业级web阅读器项目(下下下)
6.书城首页、搜索页、列表页和详情页开发6-1 书架搜索框布局实现效果如图所示组件代码<template> <div class="search-bar"> <div class="search-bar-title-wrapper"> <div class="title-icon-back-wrap...原创 2019-10-11 23:56:15 · 235 阅读 · 0 评论 -
VueCli3.x前端开发-移动端商城
商城的主要用到的ui框架是vant,vant的引入和配置跟着文档来就ok1.搭建主面板<template> <div class="dashboard"> <van-tabbar v-model="active"> <van-tabbar-item > <s...原创 2019-09-06 09:52:37 · 616 阅读 · 0 评论 -
商城(技术栈vue+vuecli+vant+axios)
1.细节配置 @@配置Fastclick,在main中引入并使用即可//1.引入 fastclickimport FastClick from "fastclick";if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { Fa...原创 2019-09-12 09:57:19 · 5111 阅读 · 0 评论 -
web阅读器的开发过程与体会(VUE+epubjs)
.1.以前用vuec-li2搭建号的脚手架的时候,静态资源直接放在static ,可以通过浏览器输入ulr: /static/****直接访问资源,但是用vue-cli3的时候,发现已经没有static了,那么放在那里呢??答案就是直接放在public里,访问方式和放在static里相同直接输入url: /****1.电子书的解析和渲染主要步骤生成book生成rendition,...原创 2019-09-21 23:28:55 · 1357 阅读 · 0 评论 -
商业级web阅读器项目(上)
1.技术难点分析阅读器开发:分页算法、全文搜索算法、引入web字体、主题设计离线存储机制设计:LocalStorage+IndexDB实现各种复杂手势+交互动画,如何兼容手势+鼠标操作利用vuex+mixin实现组件解耦+复用 科大讯飞web在线语音合成API开发2.项目准备字体图标项目依赖包+项目配置准备web字体viewport配置rem设置+自适应布局实现思路g...原创 2019-09-22 20:37:21 · 1133 阅读 · 3 评论 -
商业级web阅读器项目(下)
萨达原创 2019-09-26 23:28:59 · 742 阅读 · 1 评论 -
我的课程表(技术栈:Vue+node+vant+mysql)
1.首页:可惜不能放视频只能贴图为敬先看一波首页如图 所示,首页为课程通知页面,提醒今日和明日上什么课。先贴上代码:<template> <div class="index"> <!--头部采用vant组件--> <van-nav-bar title="课程通知...原创 2019-10-06 23:53:55 · 2612 阅读 · 0 评论 -
商业级web阅读器项目(下下)
4.阅读器–阅读进度、目录、全文搜索功能开发4.12. 全文搜索功能实现(搜索算法+数组降维)该方法 中,q为输入的关键词,在全篇电子书中,查找关键词,返回关键词所在的位置。 doSearch(q){ return Promise.all( this.currentBook.spine.spineItems.map(...原创 2019-10-07 20:15:02 · 718 阅读 · 0 评论 -
VueCli3.x全栈开发-微信朋友圈(node/express/mongodb/vuecli3.x)
1.项目演示2.express 搭建服务器2.1.初始化项目$ npm int 2.2.安装自动重启工具nodemon$ npm install -g nodemon2.3.修改package.json中的script:"scripts": { "start":"node server.js", "server":"nodemon server.js" ...原创 2019-08-20 21:59:46 · 1192 阅读 · 0 评论