Vue+Element+axios+store(vuex)
文章平均质量分 90
面条请不要欺负汉堡
道理不是拿来懂的,而是拿来悟的
展开
-
vue3+wangEditor5/vue-quill自定义上传音频+视频
wangEditor5用在Vue3中自定义扩展音频、视频、图片菜单;并扩展音频元素节点,保证音频节点的插入、读取、回写功能正常;支持动态修改尺寸。原创 2023-07-04 15:57:12 · 3535 阅读 · 0 评论 -
搞懂pinia状态管理
如果你学过Vue2,那么你一定使用过Vuex。我们都知道Vuex在Vue2中主要充当状态管理的角色,所谓状态管理,简单来说就是一个存储数据的地方,存放在Vuex中的数据在各个组件中都能访问到,它是Vue生态中重要的组成部分。转载 2023-02-23 17:20:33 · 376 阅读 · 0 评论 -
对vite的简单了解
vite 是一种新型的前端构建工具,能够显著的提升前端开发者的体验。它主要有俩部分组成:一个开发服务器:它基于原生的es模块,提供了丰富的内建功能,如速度快到惊人的模块热更新HMR.一套构建指令:使用Rollup打包代码,并且它是预构建的,可输出用于生产环境的高度优化过的静态资源。vite旨在提供开箱即用的配置,但同时它也提供插件API和JavaSccript API 带来高度的可扩展性并且有完整的类型支持。原创 2022-09-07 15:25:52 · 7642 阅读 · 0 评论 -
Vue3 组合式函数,实现minxins
截至目前,组合式函数应该是在VUE 3应用程序中组织业务逻辑最佳的方法。它让我们可以把一些小块的通用逻辑进行抽离、复用,使我们的代码更易于编写、阅读和维护。原创 2023-02-28 11:22:13 · 4676 阅读 · 0 评论 -
vue3 虚拟DOM的底层原理
Vdom (虚拟dom)凭借着出色的性能成为了目前的主流的前端框架都会选择的渲染方案。再加上优秀的 diff 算法对它的一步步的优化,使框架的价值得到了极致的体现,几乎成为了我们前端开发必不可少的方案。...转载 2022-07-15 08:57:06 · 664 阅读 · 1 评论 -
Vue3 的函数式编程
vue3 setup 所有单独的功能模块全部都独立开来,最后在 setup 函数中统一暴露给模板使用。我们甚至可以把组合后的逻辑放在单独的js文件中,这样会使我们的代码逻辑更直观,可维护性更高,复用性更强。...转载 2022-07-13 11:32:28 · 2266 阅读 · 0 评论 -
Vue3内置组件Teleport
Teleport是Vue 3.0 新增的一个内置组件,主要是为了解决一些特殊场景下模态对话框组件、组件的渲染。原创 2022-07-12 11:23:07 · 1712 阅读 · 0 评论 -
vue3细节的改变以及unocss 原子化
vue3在vue2中细节的变化原创 2022-07-11 17:17:43 · 1958 阅读 · 2 评论 -
vue3 的组件通信以及ref的使用&v-model
vue3 组件通信以及ref的使用原创 2022-07-05 15:52:31 · 10373 阅读 · 0 评论 -
Vue3 composition-api&setup 生命周期
setup是组合Composition API中的入口函数,也是第一个要使用的函数。setup只在初始化时执行一次,所有的Composition API函数都在此使用。Composition API代码组织很灵活,代码直接全部都写在setup里面即可(简单点来说,就是vue2⾥⾯的data,method,computed···全不要啦,所有数据⽅法全写在setup⾥*)........................原创 2022-07-01 16:52:50 · 3839 阅读 · 0 评论 -
watch 和 watchEffect 的区别
Vue3中 watch、watchEffect 详解转载 2022-06-28 15:07:11 · 671 阅读 · 0 评论 -
前端自动化测试Vue Test Utils - vue单元测试 (二)
一.TDD介绍测试驱动开发(Test Driven Development,简称TDD)。TDD 是敏捷开发中的一项核心实践和技术,也是一种设计方法论。TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代码确定需要编写什么产品代码。TDD 是 XP(Extreme Programming)的核心实践。它的主要推动者是 Kent Beck。测试驱动开发的思想就是“测试的目的是让你知道,什么时候算是完成了。如果你聪明,你就应该先写测试,这样可以及时知道你是否真地完成了。否则,你经常会不知道,到底原创 2020-12-21 16:03:53 · 4844 阅读 · 1 评论 -
如何构建出色的Vue组件?
通过对大量的开源组件进行调查后,我认为一个出色的 Vue 组件需要实现以下几点: 1. 实现 v-model 兼容性 2. 对事件透明 3. 为恰当的元素赋予属性 4. 拥抱浏览器标准,实现键盘导航功能 5. 优先选择事件,而不是回调 6. 限制组件内样式的使用实现 v-model 兼容性某些组件主要是为表单字段所设计的,包括搜索自动完成、日期选择字段,或是为简单的字段添加额外的功能,使组件的使用者能够添加数据属性。为了使所设计的组件符合使用标准,最重要的一种方式就是支持 v-model转载 2021-11-05 17:06:24 · 369 阅读 · 0 评论 -
ECharts 入门学习
一.简单使用1、echarts柱状图x轴数据隔一个显示xAxis: { axisLabel: { interval:0 }},2、显示数值柱状图上方显示数值 series: [ { type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 posit...原创 2021-10-27 11:44:10 · 3625 阅读 · 1 评论 -
创建发布npm包
什么是npm?npm网站地址npm是javascript的包管理工具,是前端模块化下的一个标志性产物简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率1.从社区的角度:把针对某一特定问题的模块发布到npm的服务器上,供社区里的其他人下载和使用,同时自己也可以在社区里寻找特定的模块的资源,解决问题2.从团队的角度:有了npm这个包管理工具,复用团队既有的代码也变的更加地方便创建npm库在npmjs上注册一个自己的账号。在本地创建项目在执行npm init之前,有两点需要我们注原创 2021-09-26 16:51:18 · 293 阅读 · 0 评论 -
vue-cli3结合webapck优化
vue-cli3结合webapck优化1 . 懒加载(1). js 需要的时候加载app.vue:<template> <div id="app"> <button @click="fn">按钮</button> </div></template><script>export default { name: "App", created() { c原创 2021-07-28 14:21:34 · 442 阅读 · 0 评论 -
令人眼前一亮的 Vue 实战技巧
minxin 让组件复用灵活化Vue 提供了 minxin 这种在组件内插入组件属性的方法,个人建议这货能少用就少用,但是有个场景则非常建议使用 minxin:当某段代码重复出现在多个组件中,并且这个重复的代码块很大的时候,将其作为一个 minxin 常常能给后期的维护带来很大的方便。这是项目中封装一个列表功能,有下拉刷新,加载自动请求数据,上拉加载下一页数据等等,它是这样的看不懂没关系我只是开发中举了一个例子export default { data() { return {转载 2021-06-23 15:09:02 · 416 阅读 · 0 评论 -
Ant Design of Vue 开发中遇到问题
一.Ant Design of Vue1. 官网地址2.安装npm install ant-design-vue --saveA.全局引入import ant from 'ant-design-vue'import 'ant-design-vue/dist/antd.css';Vue.use(ant)注意:全局引入时,babel-plugin-import 里配置 需要删除,否则会报错"antnot defined "B.按需加载安装:npm i babel-plug.原创 2021-04-06 15:27:36 · 1101 阅读 · 0 评论 -
vue 在线访问word,excel,pdf 文件以及打印
一.pdf安装npmi--savevue-pdf语法在组件种使用importpdffrom'vue-pdf'pdf.createLoadingTask(url,httpHeaders);参数:url(所请求的接口),headers(请求头信息)或者url是pdf的链接地址案例(1)简单使用<template> <div> <pdf ref="pdf" :src="url"> &...原创 2021-03-29 17:10:59 · 10337 阅读 · 2 评论 -
vue3基础语法
一.组合式API(1). vue2组件的局限性1.组件越大,可续性越差2.相同的代码逻辑很难在多个组件中复用二.原创 2021-02-24 14:44:54 · 2233 阅读 · 0 评论 -
Vue常见面试题
1.聊聊你对vue的理解vue是一个渐进式的JS框架。他易用,灵活,高效; 可以把一个页面分隔成多个组件;当其他页面有类似功能时,直接让封装的组件进行复用; 他是构建用户界面的声明式框架,只关心图层;不关心具体是如何实现的2.Vue 的生命周期是什么?Vue 的生命周期指的是组件从创建到销毁的一系列的过程,被称为 Vue 的生命周期。通过提供的 Vue 在生命周期各个阶段的钩子函数,我们可以很好的在 Vue 的各个生命阶段实现一些操作。3.Vue 的各个生命阶段是什么?Vue 一共有8个转载 2020-12-29 11:22:02 · 2250 阅读 · 1 评论 -
跨域问题
一.http(一).http请求的推演过程 1. url(www.baidu.com) =>进行DNS域名解析 => 得到 ip (192.168.1.2) 2. 拿到ip 去跟服务器建立 tcp 连接 3. 建立 tcp 连接之后发起 http 请求 ( tcp是比http更底层一个连接协议)(ip是tcp下面一层) 4. http连接建立之后 服务器把html 发送给浏览器 5. 浏览器解析html...原创 2020-11-24 10:03:52 · 933 阅读 · 0 评论 -
vue项目部署以及解决代码部署后浏览器存在缓存问题
开发完的vue项目,需要部署到Nginx/Tomcat服务器上运行,作为一个前端小白,刚接触vue不久,研究了一番,于是写下这篇文章,记录下来便于今后部署。1.router(history)模式vue项目部署到nginx1)修改router模式为history(默认为hash)const router = new VueRouter({ routes, mode: 'history'});对路由模式不清楚的小伙伴,可以看这篇vue-router路由模式详解2)修改config原创 2020-10-29 11:01:29 · 7227 阅读 · 1 评论 -
crypto-js 前后加密解密
一.java 加密import javax.crypto.Cipher;import javax.crypto.spec.IvParameterSpec;import javax.crypto.spec.SecretKeySpec;import sun.misc.BASE64Decoder; public class Encryption{ public static void main(String args[]) throws Exception { String .原创 2020-09-29 11:29:11 · 1080 阅读 · 1 评论 -
Vue 中mixin 的用法详解
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。一.区别1.mixin混入对象和Vuex的区别: Vuex是状态共享管理,所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的; mixin可以定义公用的变量或方法,但是mixin中的数据是不共享的,也就是每个组件中的mixin实例都是不一样的,都是单独存在的个体,不存在相互影响的; mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin转载 2020-07-09 11:50:21 · 21970 阅读 · 5 评论 -
vue-element-admin-master框架结合element UI 组件 权限的问题以及element 组件使用中遇到的问题
一、细节注意点1.settings.js 文件 1.showSettings: false,//右边设置 是否关闭 2.tagsView: false,导航栏是否关闭 3.fixedHeader: false, 4.sidebarLogo: true,左边菜单顶部是否显示标题和logo2.permission.js 是权限控制的二、业务操作1.主菜单......原创 2020-04-03 13:52:59 · 11030 阅读 · 1 评论 -
vue 登录拦截及权限管理
一.登录拦截用户登录成功后服务端返回token的值,然后前端使用axios中请求拦截器(service.interceptors.request.use)再每个的请求接口上加上Authorization:token的值,服务端通过这个Authorization来获取token的值,来进行判断token的值是否过期,如果过期则接口返回403,前端得到403的状态,则提示用户返回登录页。1.r...原创 2020-02-27 16:43:15 · 7867 阅读 · 1 评论 -
vue中proxyTable反向代理进行跨域
一.分析(一).jsonp的方式<script>标签里的src是没有跨域限制的,<img>标签里的src也是没有限制的,我们书写网页的过程中不难发现这一点。jsonp就是通过在本站脚本创建一个<script>便签,将地址指向第三方的API地址来达到第三方通讯的目的,并提供一个回调函数来接收数据,第三方响应为json数据的包装,这个是jsonp名字的由来(json...原创 2018-05-23 14:23:22 · 4870 阅读 · 0 评论 -
vue的生命周期
一.概念了解1.什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直...原创 2018-07-04 17:26:10 · 32280 阅读 · 1 评论 -
Vue CLI 3 安装、创建、配置、安装插件
一、安装1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它:npm uninstall vue-cli -g //或者 yarn global remove vue-cli注意:如果卸载不了(我卸载2.9.6,还剩下一个2.9.3版本一直卸载不了),就直接安装vue cli3,包直接安装就能覆盖掉2.安装 vue cli3npm install -g @vue/...原创 2019-01-04 10:55:48 · 14101 阅读 · 0 评论 -
mockjs的常用方法
一.mock.mock()根据数据模板生成模拟数据。更关键的是,我们发起Ajax请求的时候要能够接收到这些数据。这就是Mock.mock()的作用啦!Mock.mock( rurl?, rtype?, template|function( options ) )(1).参数的含义和默认值参数 rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\...原创 2018-03-28 11:28:02 · 5687 阅读 · 2 评论 -
开始 Vue 之旅--开发项目(一)
首先通过前面俩篇 Vue.js安装以及创建项目和vue.js项目结构,我们自己心中对vue项目也了解百分之80了,现在我们来开始开发项目。 根据vue.js项目结构,我们了解到vue的项目结构,我们只要修改src文件里面的内容就好,其他的文件是配置好的,每个项目都是一样(有遇到特殊情况的时候,我们再来讨论) 所以在这里我们直接把官网的项目打包过来,开发新的项目只要原创 2017-08-03 11:15:50 · 436 阅读 · 0 评论 -
vue.js-使用slot插槽分发内容
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。一、单个插槽子组件,备用内容在子组件的作用域内编译,并且只有在宿主元素为空时,且没有要插入的内容时才显示备用内容1.parent.vue<div id="exp1"> <h1>我是父组件的标题</h1>...原创 2018-05-22 09:40:24 · 470 阅读 · 0 评论 -
vue.js事件修饰符(阻止冒泡 默认行为)
事件处理函数只有纯粹的逻辑判断,不处理DOM实践的细节,例如:阻止冒泡,默认行为,判断按键。vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次,可以使用@click.once。一.原生事件对象vue可以通过以下方式,获取原生的事件对象。<button @click="getEventDom($event);">getEventDom</button...原创 2018-05-18 13:55:16 · 21078 阅读 · 1 评论 -
Vue.js常用的语法(二)
1.说明与比较:new Vue() 和 export default {} 在生成、导出、导入、使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。 它们含义到底是什么,又有什么异同呢? 首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象原创 2017-08-30 13:28:13 · 563 阅读 · 0 评论 -
Vue自定义事件解读
Vue事件分两部分,一是DOM绑定事件,二是自定义事件。一.DOM事件在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件 二.自定义事件Vue自定义事件是为组件间通信设计,自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中,$broadcast、$dispa原创 2017-09-07 11:42:43 · 2061 阅读 · 2 评论 -
Vue.js安装以及创建项目
一.安装Vue.js怎么搭建vue.js的环境呢?要搭建vue的环境需要借助node.js的npm的包管理器,所以先去看下NodeJS、NPM安装配置步骤。1.安装淘宝的npm镜像(可安装可不安装): 如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:输入npm install -g cnpm –registry=https://r原创 2017-07-25 10:56:27 · 2378 阅读 · 0 评论 -
开始 Vue 之旅--开发项目(二)vue组件通信
上篇讲得是简单案例开发(开始 Vue 之旅--开发项目(一)),但是我们都知道项目不可能那么简单,会越来越复杂的,这时候我们就要合理的分配,使其项目更加简单明了。一.组件的分配重要是这俩种划分,但是不管这么划分其做法是一样的。下面我们以页面区域划分来做介绍二.页面区域划分---创建新项目(一)知识点及步骤app.vue是入口文件 components...原创 2017-08-03 16:32:25 · 492 阅读 · 0 评论 -
Vue.js学习笔记:props传递数据
一.传递数据就像 data 一样,prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用 {{title}} import Vue from 'vue';Vue.component('child', { // 声明 props props: ['message'], template: '原创 2017-08-25 11:46:52 · 44866 阅读 · 0 评论 -
Vue.js学习笔记:v-if条件渲染与v-show区别
一.v-if是什么? v-if是用于根据表达式的值的真假条件渲染元素,可以在 Vue 插入/更新/删除元素时自动应用过渡效果。 v-if是真实的条件渲染,因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。二.v-if分析 v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对原创 2017-07-27 15:21:54 · 4550 阅读 · 0 评论