Vue3/Vue2框架生态链
文章平均质量分 69
1
火兰
正在努力的人
展开
-
vue-router路由元信息详解
2、if (to.matched.some(record => record.meta.requiresAuth) ),如果对这类写法不熟悉,可以去看看es6的箭头函数,这句话就是返回遍历的某个路由对象,我们定义为为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测它的meta对象是不是有requiresAuth这个属性,且为true,如果满足上述条件,就确定了是这个/foo/bar路由。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录。原创 2022-11-07 10:53:27 · 3711 阅读 · 0 评论 -
Vue3 setup语法糖使用简易教程(下)
在vue2中是使用this.refs.子组件名称.xxx方法,即可拿到子组件定义的值或者方法,在vue3中没办法这么拿取,必须子组件暴露后父组件才可以拿取到,具体实现看代码。在新的vue3中,肯定也猜到了,不是使用this.$store调用的了,是引入调用,下面就是教大家如何在vue3中如何使用vuex。同时也可以使用分发(...mapActions,...mapState等方法),具体参照。父元素传递给子元素的数据,子元素使用defineProps进行接收。1.3 defineEmits传值(子传父)原创 2022-08-23 09:28:13 · 608 阅读 · 0 评论 -
Vue3 setup语法糖使用简易教程(上)
ref在vue3中是将数据转换成响应式数据结构的一种,因为vue3中没有了data(){},那么就没办法劫持数据做到响应式数据,那么怎么办呢?在vue3中新出现了ref这个新方法,可以将数据变成响应式数据为了区别使用ref和不使用ref的区别,我写了下面两个demo做对比//不使用ref定义let num=1复制代码我们定义了一个不使用ref的数据,可以看出视图也渲染成了我们想要的状态但是如果我们加上一个按钮,每次让num+1,又是什么效果呢?原创 2022-08-23 09:24:58 · 1754 阅读 · 0 评论 -
Vue3 Composition API(setup函数)
不知道各位在之前使用 Vue 开发的时候,是否感觉到在代码量很少的时候,逻辑结构还是蛮清晰的。但是随着代码量越来越大,即使我们把相关功能抽出来变成一个个的功能组件,但是功能组件也是越来越多,整体内容全部放在其中也是会相当臃肿,而且必不可少的还会使用到各种形式的组件间通信。这就导致了,每个功能模块的代码会散落分布在各个位置,让整个项目的内容难以阅读和维护(尤其是团队开发的时候,各种各样的命名和组件间通信,让人摸不着头脑)。原创 2022-08-23 09:55:21 · 434 阅读 · 0 评论 -
vue混入(mixin)的详解
混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。1.钩子函数同名钩子函数将会混合为一个数组,都将被调用到,但是混入对象的钩子将在组件自身钩子之前调用。2.数据对象合并3.普通方法合并当混合值为对象的选项时,例如 methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。4.局部混入5.全局混入。...原创 2022-08-13 14:24:25 · 1788 阅读 · 0 评论 -
浅析v-model语法糖的实现原理与细节知识及如何让你开发的组件支持v-model
v-modelvue2v-modelv-modelv-model。原创 2022-07-28 22:19:49 · 1453 阅读 · 0 评论 -
浅析vue cli的webpack配置属性 devServer 详解 和 devServer.proxy 工作原理解析
https://cli.vuejs.org/zh/config/#vue-config-js原创 2022-07-25 22:54:27 · 5453 阅读 · 0 评论 -
关于全局组件和局部组件怎么使用
一、全局组件的怎么使用,分几步先创建一个文件夹及其里面创建一个文件因为App.vue是跟目录,所以在里面引用会变成是全局组件二、局部组件怎么使用,分几步步骤和创建全局组件一样,首先肯定是要安组件,创建文件夹及其文件如图:这个demand用作局部组件......原创 2021-03-11 19:27:43 · 528 阅读 · 0 评论 -
深入理解ajax
什么是 AJAX ?AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。不管前端怎么变,由客户端发起的与服务端通信使用最多的还是ajax。因此ajax无比重要原创 2021-04-04 22:28:09 · 548 阅读 · 0 评论 -
前端面试题(基础部分)
该笔记是本人整理的面向实习生面试基础知识笔记(本人遇到的或者是面试过程、学习过程觉得会问的),进行分享,有需要的小伙伴应该可以得到帮助本人笔记地址分享:全部笔记、前端学习笔记、数据结构与算法学习笔记、LeetCode笔记整理时间:2020/10#目录#目录1.作用域2.函数封装(例子:字符串拼接)3.冒泡排序4.数组反转5.语义化标签6.h5新特性(标签)7.闭包8.去重9.flex10.rem布局11.this指向12.清除浮动13.VUE生命周期以及特点14.Promise15.块.原创 2021-08-03 22:23:43 · 1161 阅读 · 0 评论 -
ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证原创 2022-06-05 09:18:04 · 1072 阅读 · 0 评论 -
vue组件通信传值的几大方法及组件通信provide/inject的使用
我们可以总结下组件通信的几大方法:一、props属性传递数据二、$emit、@on,事件触发与事件监听三、状态管理 vuex,或者 Vue.observale()进行状态管理四、ref引用获取组件实例五、$parent、$children,获取当前组件的父组件、子组件六、通过 provide / inject 来实现共享数据 我们主要看下 provide 和 inject 方式。先可以看官网描述:provide / inject provider/inject:简原创 2021-08-29 16:41:03 · 789 阅读 · 1 评论 -
浅析瀑布流布局原理及实现方式
一、瀑布流 瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了,我最早知道这个名词的时候大约是在2012年,当时Pinterest网站的布局就是使用的这种流式布局,简言之像Pinterest网站这样的布局就称之为瀑布流布局,也有人称之为Pinterest 布局。 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。 瀑原创 2021-08-29 15:52:18 · 24309 阅读 · 0 评论 -
VUE图片懒加载
什么叫懒加载通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载。那什么叫做需要用到的时候?比如一个图片在没有出现在可视区域内,就已经加载当页面里了, 但只有滚动页面下方式才能看见, 则可以认为这个图片加载的"过早"了。懒加载的优点可以减少首页首次加载的数量,减少服务器的压力 当网络请求比较慢的时候, 提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。为什么使用懒加载可以想象一个网页打开有成百上千的图片需要加载,页面会变得非常原创 2021-08-06 14:58:00 · 418 阅读 · 0 评论 -
vue-router的push和replace的区别
实现跳转methods: { gotoMenu(){ //跳转到上一次浏览的页面 this.$router.go(-1) this.$router.go(-1) //指定跳转的地址 this.$router.replace('/menu') this.$router.replace('/menu') //指定跳转的路由的名字下 this.$router.replace({name:'menu'}) this.$ro.原创 2021-07-11 01:00:48 · 251 阅读 · 0 评论 -
深入理解ES6里的promise
一、ES6 Promise是什么? 复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴。 这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。 这么说用Promise new出来的对象肯定就有th原创 2021-06-01 22:14:22 · 157 阅读 · 0 评论 -
VUE中的@input
@input 一般用于监听事件只要输入的值变化了就会触发input<input type="text" :value="dnumber1" @input="num1Input"> methods: { num1Input(event) { this.dnumber1 = event.target.value; this.$emit('num1c..原创 2021-05-10 17:22:45 · 9093 阅读 · 0 评论 -
$on,$eimt通俗易懂
$on监听事件,$emit触发事件 现在$dispatch、$broadcast需要配合events使用,在vue2.0上已经被删除了,现在更多的是使用$on监听事件、$emit触发事件。主要分为以下四步: (1)子组件绑定send事件<template id="bbb"> <h3>子组件-</h3> <input type="button" value="send" @click="send"></template&原创 2021-05-10 15:41:54 · 253 阅读 · 0 评论 -
Vue组件进阶知识总结
上一篇我们重点介绍了组件的创建、注册和使用,熟练这几个步骤将有助于深入组件的开发。另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:“嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信。 注意:组件模板都定义在<template>标签中,然而I原创 2021-05-10 15:41:01 · 225 阅读 · 0 评论 -
VUE修饰符,事件处理
其实我们在平时总会用到一些方法去处理我们的事件函数,比如阻止事件的默认行为 、阻止事件冒泡等等。那在Vue.js中,对这些操作进行了一个很简易的处理,那就是在我们绑定的事件后面加一个事件修饰符,这样能让我们一眼就能看出,该组件绑定了什么事件 、对事件做了什么处理。 Vue.js为我们提供了很多不同种类的修饰符,例如事件修饰符、按键修饰符、鼠标按键修饰符,我们就对这三种修饰符进行详细的介绍。一、事件修饰符 首先,来看一下Vue.js为我们提供的事件修饰符有哪些吧。修饰符名称 作..原创 2021-05-10 11:24:30 · 444 阅读 · 0 评论 -
vue中的v-for和@click同时使用时@click失效,vue的native
native是什么?.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。官网的解释:你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的使用native的原因主要有两点:在vue组件中,所有的原素必须在一个根结点上。 当想要在根结点响应数据,如果直接绑定v-on是不能响应的,这.原创 2021-05-08 17:16:34 · 1907 阅读 · 0 评论 -
vue实现图片轮播倒计时,天,时,分
<template> <div class="home-banner"> <img class="home-banner-view" src="./img/主KV.png" alt="" /> <img class="home-banner-IP" src="./img/IP.png" alt="" /> <div class="home-banner_time"> <div class="home-.原创 2021-04-28 11:09:47 · 253 阅读 · 0 评论 -
vue媒体查询失效原因
Vue媒体查询失效原因网上总结的比较多,因为这是接手的项目,还不够熟悉代码,一一排查得到了一下结果:// 出错位置<meta name="viewport" content="user-scalable=0">这个meta在html页面当中,vue只有一个这一个页面,会把所有模板放里面,我的这个html结构文件是index.html以下是修改方式:<meta name="viewport" content="user-scalable=0,width=devic原创 2021-04-19 11:10:05 · 822 阅读 · 0 评论 -
vue-cli 3.0安装sass/scss到vue项目,详解
vue-cli 3提供了两种方式集成sass/scss创建项目时选择预处理器sass 手动安装sass-loader一、创建项目选择预处理器sass注意:这种方式如果不想在下次构建vue项目时将sass作为默认配置选项写入项目开发依赖则在最后选择不作为未来配置项。$ vue create vuedemo? Please pick a preset: (Use arrow keys)> default (babel, eslint) Manually select featur转载 2021-04-16 17:43:11 · 5152 阅读 · 0 评论 -
vue-cli快速搭建项目配置
搭建项目之前,请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。如何安装node?安装好node默认已经安装好npm了,所以不用单独安装了。如何安装vue cli?剧场环境已搭建好,开始表演!1.进入一个目录,创建项目对应命令:vue create project-one2.我们这里选择手动配置按↓选择“Manually select features”,再按Enter3.选择你需要的配置项通过...转载 2021-04-16 17:21:09 · 209 阅读 · 0 评论 -
vue路由vue-router的安装和使用
1.安装,如果你没有在创建项目时候选择的情况下 cnpm install vue-router2.使用 假设App为根组件,两个自定义组件home及listmain.js里操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...原创 2021-04-15 13:02:51 · 194 阅读 · 0 评论 -
Vue使用中遇到问题汇总(一)32个
1、安装一些需要编译的包:提示没有安装python、build失败等 因为一些npm的包安装需要编译的环境,mac和linux都还好,大多都齐全 。window 用户依赖visual studio 的一些库和python 2+,windows的小伙伴都装上:windows-build-toolspython 2.x2、can't not find 'xxModule'- 找不到某些依赖或者模块 这种情况一般报错信息可以看到是哪个包抛出的信息。一般卸载这个模块,安装重新安...原创 2021-04-11 20:39:17 · 348 阅读 · 0 评论 -
vue-cli项目优化,缩短首屏加载时间
1、大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer查看工程js文件大小,然后有目的的解决过大的js文件。 安装:npm install--save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev的时候默认会在8888端口显示const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAna...原创 2021-04-11 20:35:28 · 157 阅读 · 0 评论 -
VUE性能优化总结
1、v-show,v-if 用哪个? 在我来看要分两个维度去思考问题: 第一个维度是权限问题,只要涉及到权限相关的展示无疑要用v-if, 第二个维度在没有权限限制下根据用户点击的频次选择,频繁切换的使用v-show,不频繁切换的使用v-if, 这里要说的优化点在于减少页面中 dom 总数,我比较倾向于使用v-if,因为减少了 dom 数量,加快首屏渲染,至于性能方面我感觉肉眼看不出来切换的渲染过程,也不会影响用户的体验。2、不要在模板里面写过多的表达式与判断 v-i...原创 2021-04-11 20:33:44 · 193 阅读 · 0 评论 -
new Vue() vs createApp()
从一个入口开始vue3从发布正式版到现在已经过去半年左右,大家聚焦讨论的重点集中在响应式api 和组合式api,无可厚非,这俩个api的变化确实可以直接影响到整个vue应用的开发方式和体验,今天我们来谈一个不那么起眼的小知识点相信大家在使用vue-cli脚手架开发vue应用的时候,一定在src/main.js里见过这样的代码new Vue({ render: h => h(App)}).$mount('#app')一切从new一个vue实例开始,然后当你使用vue3进行开发的.原创 2021-04-04 19:11:46 · 10774 阅读 · 1 评论 -
elementUI实现前端分页
按照他的文档来写分页,最主要的是el-table里面展示的数据怎么处理<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%"> 最主要就是上面标红这一块的处理: AllCommodityList是后台取得数据,currentPage是当前页,初始值0,pagesize当前需要展示的数据,初始值10原创 2021-04-02 21:59:55 · 222 阅读 · 0 评论 -
理解Vue的计算属性
计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行。 上述代码会源源不断的打印出 b 的值。如果希望 a 依赖 data 中的 x 而变化,只需保证 a 函数中有 this.x 即可。如果函数中没有出现 data 中的属性,那么无论 data 中的属性怎么变,a 对应的函数一次也不会执行。 Vue 怎么知道计算属性在函数中引用了哪个 data 属性?这个函数又是怎么知道 data 属性变了,而且...原创 2021-04-02 21:57:27 · 272 阅读 · 0 评论 -
vue中的css作用域、vue中的scoped坑点
一、css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。 在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便原创 2021-03-30 20:16:27 · 363 阅读 · 0 评论 -
vue-router登录校验后跳转到之前指定页面如何实现
两个需求:1、用户点击购买需要下单,并跳转到订单页面,但是如果用户没有登录的话,中间有登录验证,会拦截;2、点击购买的时候,登录校验成功了,跳转到订单页面时,订单已创建,去付款即可。3、处理拦截至登录页,然后点去注册页,完善信息页,再回登录页,再登录进去,依然进去目标order页一、解决方案对1: 大概思路:1、当你想进入http://localhost:8080/order(该页面需要登录授权),2、检查是否登录,如果没有登录就跳转到登录页,需要将上一页的path(‘/order’)作为que.原创 2021-03-27 21:16:52 · 2019 阅读 · 0 评论 -
vue-router路由模式详解
一、路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。 如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。 这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷原创 2021-03-27 21:09:58 · 1509 阅读 · 0 评论 -
vue-quill-editor富文本编辑器使用
vue项目中,npm安装依赖npm install vue-quill-editor --save两种引用方法,全局引用和局部引用全局引用,项目入口文件中(main.js)注册import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'// require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'imp原创 2021-03-27 11:41:46 · 112 阅读 · 0 评论 -
JWT Token使用JS用户登陆、登出功能
JWT 的原理是,服务器认证以后,生成一个 JSON 对象,发回给用户,就像下面这样。{ "姓名": "张三", "角色": "管理员", "到期时间": "2018年7月1日0点0分"}以后,用户与服务端通信的时候,都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据,服务器在生成这个对象的时候,会加上签名。服务器就不保存任何 用户凭证数据了,也就是说,服务器变成无状态了,从而比较容易实现扩展。JWT(JSON WEB TOKEN).原创 2021-03-25 16:28:20 · 1326 阅读 · 0 评论 -
sessionStorage和localStorage有什么区别
html5的本地存储是存储在客户端中,本地存储包括sessionStorage和localStorage。区别一:生命周期sessionStorage仅在当前会话下生效,当你关闭页面或浏览器后你存储的sessionStorage数据会被清除。localStorage生命周期是永久,储存的信息是永远不会消失的,除非你自己主动清除localStorage信息。区别二:各自的使用方法sessionStorage使用方法1、第一个参数是保存的变量名,第二个是变量的值sessionStor原创 2021-03-25 16:16:27 · 6053 阅读 · 0 评论 -
解决vuex在页面刷新后数据丢失的问题
一、原因 js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。二、解决方案 在客户端存储数据: HTML5提供了2种在客户端存储数据的新方法:localStorag原创 2021-03-25 16:08:50 · 321 阅读 · 0 评论 -
vue中render: h => h(App)的详细解释
=> 是es6 的箭头函数语法,并不陌生。但是h代表什么呢?跟踪源码后发现:h是createElement函数的别名,于是上面的写法等价于:render: h => h(App) 是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):render (createElement) { return createElement(App);}原创 2021-03-25 15:09:51 · 954 阅读 · 0 评论