vue
文章平均质量分 69
鸭绒
追求起点是大厂。
展开
-
手写Vue.js响应式原理,实现一个自己的Vue响应式框架
文章目录1.简述功能2.创建Vue3.Observer 实现响应式数据1.简述功能我们实现的一个带有响应式功能的简单Vue框架。功能:负责接收初始化的参数(options)负责把data中的属性注入到Vue实例,转换成getter/setter负责调用observer监听data属性中的变化负责调用compiler解析指令/差值表达式Vue类的结构:前三个是Vue的属性,最后一个是Vue的方法,用于将data设置为setter/getter,并纳入Vue实例中。项目初始结构:2原创 2020-10-31 10:37:25 · 695 阅读 · 0 评论 -
Vue中如何自定义(v-throttle)节流指令
背景:在开发中,我们经常会在搜索框中使用防抖或节流进行优化,因此为了方便,今天我们自定义一个(v-throttle)指令。自定义指令语法:可参考官方文档1.在项目的utils目录下定义util.js模块(通常该模块放一些通用的工具方法):export const throttle = (callback, delay) => { let timer = null return (e) => { if (!timer) { timer = setTimeout.原创 2021-08-13 14:35:25 · 1701 阅读 · 1 评论 -
Vue2.x、Vue3.x的数据响应式核心原理
文章目录1.概念2.Vue2.x数据响应式核心原理3. Vue 3.x数据响应式原理4. 发布/订阅模式4.1 发布/订阅模式在Vue中的应用场景4.2 封装一个简易版的发布/订阅类5.观察者模式5.1 观察者模式在Vue中应用场景5.2 封装一个简易版的观察者类1.概念在学习核心原理前,我们先了解两个概念:数据响应式:数据模型仅仅是普通的JS对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率。(内部操作DOM,我们只是修改数据)双向数据绑定:数据改变,视图也改变;视图改原创 2021-04-28 10:27:57 · 628 阅读 · 0 评论 -
Vue-Router路由模式的选择和底层原理
1.路由类型Hash模式:丑,无法使用锚点定位。History模式:需要后端配合,IE9不兼容(可使用强制刷新处理IE9不兼容)即可以根据两种模式的特点来进行路由选择。比如:当你的页面需要很多锚点进行定位时< a href="#new_paper" />,点击改链接跳转到页面的新闻部分,那么Hash模式是无法实现的,因为它自身带了#。2.底层原理如果我们去看Vue-Router的底层代码可能会优点晦涩难懂,下面总结以下底层原理,有哪些方式可以触发路由的更新呢?下面这张图一目了然:原创 2021-04-17 16:24:48 · 1137 阅读 · 0 评论 -
Vuex通过什么方式提供响应式数据以及$Store是如何挂载到实例this上?
文章目录1.前言2.Vuex通过什么方式提供响应式数据?1.前言使用过Vue框架的小伙伴们都应该接触过Vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式。本篇博客我们主要是通过学习Vuex源码,弄清楚以下两个问题:Vuex通过什么方式提供响应式数据?$Store是如何挂载到实例this中?2.Vuex通过什么方式提供响应式数据?Vuex的两大核心State和Getters都是响应式的,即当state或getter的某一个状态改变时,它是能驱动视图发生相应的改变。下面我们阅原创 2021-04-05 23:25:32 · 1865 阅读 · 0 评论 -
React、Vue在webpack中如何配置代理实现跨域?
解决前后端跨域的方法很多,本篇博客就学习通过在Vue、React中通过配置代理实现跨域。1.ReactReact有两种方式实现代理:1.1 在package.json中配置“proxy”选项{ "proxy":"http://localhost:3000"}假设前端项目运行在8080端口,即http://localhost:8080,而服务器开在了本地的3000端口,即http://localhost:3000,注意:后面别再接具体路径,否则就只能代理该路径了。注意:修改了配置文原创 2021-02-05 20:23:47 · 1296 阅读 · 0 评论 -
Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式;<template> <div class="msgHtmlBox" v-html='msgHtml'></div></template> <script>export default{ data(){ return { msgHtml: "<p>https://www.cnblogs.co转载 2021-01-25 09:52:28 · 1533 阅读 · 0 评论 -
React/Vue中的key有什么作用?为什么遍历列表时,key最好不要用index?
前端开发中,只要涉及到列表渲染,那么无论是Angular、React还是Vue框架,都会提示或要求每个列表项使用唯一的key,那很多开发者就会直接使用一个唯一的id或数组的index作为key的值,而并不知道使用key的原理。那么这篇博客就会讲解key的作用以及为什么最好不要使用index作为key的属性值。文章目录1.key的作用1.1举例说明2.key最好不要使用数组的index2.1 举例说明1.key的作用key之所以那么重要,是因为React/Vue框架使用了虚拟DOM和Diff算法高效.原创 2021-01-18 23:33:56 · 1584 阅读 · 0 评论 -
Vue、React在某些语法上的使用差异
React、Vue都是当前非常热门的前端JS框架,两者的性能都非常好,这篇博客主要是作为笔记,用于区分React、Vue一些功能相同但语法不同的对比,以防止混淆两者。一、Vue、React模板Vue.js 使用了基于 HTML 的模版语法:数据绑定最常见的形式就是使用{{...}}(双大括号)<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split.原创 2020-12-18 11:40:46 · 301 阅读 · 1 评论 -
React、Vue非技术层度的对比
ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。前端三大主流框架Angular.js:出来最早的前端框架,学习曲线比较陡,NG1学起来原创 2020-12-14 09:06:53 · 84 阅读 · 1 评论 -
Vue中读取本地图片实现预览和上传
先看效果图:上面展示了两张从本地添加的准备上传服务器的预览图片,效果还不错吧,哈哈哈。下面是该页面中紫色框的布局与实现代码,我想有些人也不喜欢HTML中默认的上传文件样式,实在辣眼睛:<template> <div class="uploadFile"> <!-- ul、li标签用于展示从本地添加的预览图片 --> <ul v-show="uploadImg.length!=0"> <原创 2020-12-03 21:34:10 · 14037 阅读 · 2 评论 -
Vue中将better-scroll封装成一个组件,并实现完美吸顶效果
先来看看实现的效果:上面的效果就是利用了better-scroll实现的滑动,可见better-scroll实现的弹性效果还是很不错的,但是better-scroll还是有很多bug的,因此对初次使用better-scroll的人不够友好。以往我们做吸顶效果都是直接使用 position:sticky 实现粘性布局,但该属性在该库就失效了,因此吸顶也成了一件难题,还好有人想到了好办法解决了该问题,后面再说。直接看封装好的better-scroll:<template> <div原创 2020-11-25 16:31:37 · 1339 阅读 · 3 评论 -
在大项目中,Vuex的结构如何搭建?
当我们在开发大项目时,假设在Vuex中还是没有使用modules,那么我们的state、mutations、actions将会变得十分凌乱和杂乱无章,那么下面我们使用modules,不仅要使代码简洁,还要使得结构更清晰。我之前写了一篇关于Vuex的基础用法,初学者可以参考,Vuex基础。基础用法只能用于学习新知识,当有了基础之后,我们就需要重构代码。Vuex结构:我在store目录下创建了modules、getters.js、index.js文件,而modules中又创建了三个模块。下面分别在.原创 2020-11-15 16:46:19 · 406 阅读 · 0 评论 -
Vue中使用路由和权限校验映射
思考:你现在参与的项目中是如何处理路由和权限映射的?什么时候用到权限校验呢?比如一个网站有多个页面,但页面的展示与功能是有角色区分的,有些功能仅展示给管理员使用,有些是供用户使用,这就需要使用路由和权限映射实现。路由处理逻辑如下:路由场景分析中后台路由常见的常见如下: 已获取 Token:访问 /login:重定向到 /访问 /login?redirect=/xxx:重定向到 /xxx访问 /login 以外的路由:直接访问 /xxx 未获取 Token:访.原创 2021-04-28 10:35:45 · 1315 阅读 · 2 评论 -
学习Snabbdom库源码,掌握Vue核心的Virtual DOM的实现原理(下)
文章目录1.Snabbdom的核心2. 分析 `h` 函数3. 分析`vnode`函数4. 分析 `patch` 函数5.分析`createEle`函数6. 分析`patchVnode`函数1.Snabbdom的核心 使用h()函数创建vNode对象描述真实DOM init()设置模块,创建并返回patch() patch()比较新旧两个vNode,更新新内容到真实DOM源码通常比较难理解,我们不可能完全阅读源码,应该有个重点目标,比如:vNode是如何创建的vNode是如何渲染成真实D原创 2020-10-29 22:55:48 · 184 阅读 · 0 评论 -
学习Snabbdom库源码,掌握Vue核心的Virtual DOM的实现原理(上)
文章目录1.什么是虚拟DOM?2.为什么使用Virtual DOM?3.Virtual DOM的作用4.Virtual DOM库介绍5.创建项目,为学习源码做准备6.导入Snabbom1.什么是虚拟DOM?Virtual DOM:是用普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以被称为Virtual DOM下面我们来看看真实DOM:<!DOCTYPE html><html lang="en"><head> <meta char原创 2020-10-29 15:01:22 · 287 阅读 · 0 评论 -
Vue2.X中引入element-ui,发现没有.babelrc文件如何解决?
别再找.babelrc文件了,直接修改babel.config.js文件。1.引入element-ui:npm i element-ui -S2.引入插件:npm install babel-plugin-component -D3.修改babel.config.js文件:module.exports = { presets: ["@vue/app"], plugins:[ [ "component", { "libraryName":原创 2020-10-19 22:46:31 · 7383 阅读 · 4 评论 -
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
使用props进行父子组件通信时产生错误:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentIndex”产生错误的原因:在子组件中,你试图修改父组.原创 2020-09-19 15:32:13 · 45100 阅读 · 4 评论 -
Vue封装 轮播图 组件 (传入链接、图片即可使用)
1.先看效果图:2.目录:3.Swiper.vue源码:<template> <div id="mySwiper"> <div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" > <slot></slot> </div>原创 2020-09-16 22:59:18 · 4785 阅读 · 7 评论 -
Vue进行网络请求时该选择什么网络模块?Vue对axios进行封装实例
文章目录1. Vue选择什么网络模块?1. Vue选择什么网络模块?Vue中发送网络请求有非常多的方式,那么,在开发中,如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR)为什么不用它呢?非常好解释,配置和调用方式等非常混乱。编码起来看着就非常不舒服。所以在真实开发中很少直接使用,而是使用JQuery-Ajax。 选择二:JQuery-Ajax相对于传统的ajax是非常好用的。为什么不用它呢?首先,我们需明确一点:在Vue的整个原创 2020-08-19 15:52:30 · 252 阅读 · 0 评论 -
Vue核心特性之Vuex用法 一篇足矣
文章目录1. Vuex概念和作用解析1.1Vuex概念1.2 作用解析2.单界面到多界面状态管理切换2.1 单界面状态管理切换2.2 Vuex的安装以及使用1. Vuex概念和作用解析1.1Vuex概念官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保存状态以一种可预测的方式发生变化。 Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导原创 2020-08-17 22:53:30 · 508 阅读 · 2 评论 -
Vue 插槽使用总结
文章目录1.为什么使用插槽2.插槽的使用3. 具名插槽1.为什么使用插槽slot翻译为插槽:在生活中很多地方都用到插槽,电脑的USB插槽,插板有电源插槽。插槽的目的是让我们原来的设备具有更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽:组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。2.插槽的使用如何使用插槽:在子组件中,使用特殊的元素< slot >就可以为子组件开启一原创 2020-08-16 00:04:13 · 396 阅读 · 0 评论 -
一张图读懂 Vue 生命周期
英文版:中文版:感谢B站博主的分享。原创 2020-08-14 23:54:26 · 115 阅读 · 0 评论 -
Vue-Router 导航守卫
什么是导航守卫?个人理解:导航可以理解为从一个路由跳转到另一个路由的过程。在跳转的过程中,我们可以在内置的监听跳转函数中,根据实际开发逻辑,进行一系列的操作,来控制该导航是该跳转还是该取消跳转。比如,在一个购物商城想要买东西,你可能想直接购买,点击立即购买后,可能由于你还未登陆商城,没有进入支付界面,反而前往了登陆界面。即我们可以在路由跳转的过程中,通过一些逻辑需求来控制的路由的跳转。现在我们来考虑一下这个需求,在一个单页面应用中,我们如何改变网页的标题?网页标题是通过title来显示的,但是原创 2020-08-14 13:40:00 · 160 阅读 · 0 评论 -
vue-router的参数的传递、懒加载以及嵌套路由的使用
文章目录1.安装一个带路由配置的项目2.配置一个起步路由3.修改路由配置的默认值4. 了解router-link的属性5. 手写代码模拟实现路由跳转1.安装一个带路由配置的项目2.配置一个起步路由我们打开router文件夹下的index.js文件,关于路由的配置都在该文件进行配置。a.为了完全弄懂该文件代码,我们先清空文件内容,再手写一个配置文件:b.由于我们需要使用路由那么先在文件导入路由插件:import VueRouter from "vue-router";c.导入之后,插件是需原创 2020-08-14 11:42:06 · 478 阅读 · 0 评论 -
【vue】 runtime-compiler和runtime-only的区别
我们在利用脚手架创建项目时,在一个环节中会让我们选择runtime-compiler或runtime-only,这两者到底有什么区别呢?下面我们来创建两个项目,分别选中runtime-compiler和runtime-only:原创 2020-08-10 22:54:03 · 686 阅读 · 0 评论 -
webpack配置“.vue”文件报错:vue-loader was used without the corresponding plugin. Make sure to include VueL
我们在webpack中处理.vue结尾的文件时需要运行下面命令:npm install vue-loader vue-template-compiler --save-dev在配置文件配置:const path = require("path");module.exports = { mode: "development", entry: "./main.js", output: { filename: "bundle.js", path: path.resolve(_原创 2020-08-05 00:10:46 · 549 阅读 · 0 评论 -
在webpack4.0中使用vue的配置过程
哈哈哈原创 2020-08-04 23:54:35 · 1119 阅读 · 0 评论 -
vue组件通信的 $children 、$refs、$parent、provide/inject的使用
文章目录1. 前言2. 父组件访问子组件2.1 $children2.2 $refs2.3 两者的使用区分3. 子组件访问父组件1. 前言我来给你们添蜜啦之前我们介绍了父传子使用props属性,子传父使用$emit发射自定义函数实现父子组件通信。那么我们有什么方法可以直接在父组件操作子组件的数据或函数、子组件操作父组件的数据或函数吗?下面就通过 $children 、$refs、$parent实现。有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。父组件访问原创 2020-08-04 13:38:24 · 1113 阅读 · 1 评论 -
vue的组件化+父子组件的通信
文章目录1.注册组件的基本步骤1.1 原始的创建方法1.2语法糖创建方法2.全局组件与局部组件2.1 全局组件2.2 局部组件3. 父子组件4.组件中的动态数据1.注册组件的基本步骤1.1 原始的创建方法组件的使用分为个步骤:创建组件构造器注册组件使用组件下面按上面步骤实现简易组件:<body> <div class="container"> <!-- 使用组件 my-comp --> <my-comp>&原创 2020-08-02 16:49:10 · 248 阅读 · 0 评论 -
【vue 基础】 vue常用指令 实例总结
文章目录1.v-bind2. v-on2.1 参数问题2.2 修饰符问题3. v-for4. v-if5.v-show6. v-model(重点)6.1 原理6.2 v-model不同表单元素的使用实例6.2.1 v-model结合radio使用6.2.2 v-model与checkbox使用1.v-bind作用:动态绑定HTML标签的属性。v-bind的语法糖:":"。为什么用动态绑定属性呢?比如,我们开发一个网站,里面用到很多图片,引入图片通常利用< img src=“xxx” >原创 2020-08-01 10:27:48 · 373 阅读 · 0 评论