Dark_programmer的博客

vue3 - - - - - post请求实现文件下载

【代码】vue - - - - 数据刷新试图不刷新？是不外层有个table？

i18n$t()无法获取数组、对象

vue3使用draggable拖拽组件

Vue3+i18n多语言动态国际化设置

获取图片exif相关信息

vue - - - - - vue-qr插件生成二维码

使用code编辑器codemirror

vuejs - - - - - 递归组件的实现

antdv - ui框架修改主题色

vue3全局配置挂载axios

鲜为人知的

vue-property-decorator的使用

拖拽交换元素位置

vite创建vue项目

资源访问403

vue预览pdf文件

vue那些一般人不知道的技巧1. @hook的使用1.1 关于自身组件定时器的清除1.2 关于子组件生命周期的监听2. $props妙用1. @hook的使用1.1 关于自身组件定时器的清除在使用定时器setInterval的时候，有过因为定时器掉坑的同学，都会下意识的在卸载组件进行定时器的清除。即：<template> <div>1</div></template><script>export default { name

不论是vue项目还是react项目，在添加新功能页面时，都需要进行手动配置路由表才会生效。那么有没有可能在按照一定格式创建文件之后，会自动添加到路由配置表 里呢？答案当然是可以！思路：检索指定文件夹下的文件 （ require.context(directory, useSubdirectories, regExp) ）directory{String} -读取文件的路径useSubdirectories{Boolean} -是否遍历文件的子目录regExp{RegExp} -匹配文件的正

安装marked的插件npm install marked -S2.文件内引入import { marked } from 'marked'3.使用计算属性进行markdown to htmlcomputed: { markdownToHtml(){ return marked('# 我是markdown的一级标题'); }}4.页面使用<div v-html="markdownToHtml"></div>上述是最简单的用法，再高深一些的使用.

有个重构项目的需求，其中有个功能就是渲染后端返回的html字符串。一般的标签展示出来没问题，但是在有video标签时出现了问题，此时控制台有一些403的报错如果直接在网上找的视频，是可以直接使用的，但是调了接口就会出现403的报错video标签加载出来了，但是不能进行控制播放代码：<div class="html_container text_start" ref="content" v-html='vHtml'></div><script>export

效果图：有的时候，在图片或者标签的左（右）上角展示一个角标。那么该如何实现呢？思路：图片包裹在一个容器里，且这个容器有定位属性便于后代元素进行定位，溢出部分隐藏（为了仅显示一个三角）一个角标标签，旋转45度+绝对定位（top:角标标签高度的一半，right:角标标签宽度的一半）角标标签内部一个元素，用于控制文案展示在角标标签的底部代码如下：<template> <div class="root-container"> <h2 class="m

先上效果图：实现代码：<script>export default { name: "index", data() { return { txt: ["给个关注", "有求必应", "交个朋友", "多多留言", "点个赞吧"] }; }, beforeMount() { let _this = this; this.$nextTick(() => { let ele = document.getElement

provide与inject1. provide与inject用法2.使用示例3.provide与inject实现双向绑定vue 组件间的通信方式有很多种，所以使用时需要考虑哪种方式是最合适的。若仅仅是简单的隔代组件通信，我认为使用provide与inject会更加方便。1. provide与inject用法作用：实现组件间的通信适用范围：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。使用方式：provide 选项应该是：一个对象或返回一个对象的函数inject 选项应该是：一

EventBus具体使用如下：index.jsparent.vueChildA.vueChildB.vueGrandSon.vue关于vue组件通信，是有很多方式和方法的。父子组件通信、兄弟组件通信、隔代组件通信。。。。。。此次说的EventBus是适用于所有情况的通信。使用方式：创建一个新的Vue实例（等价于提供中转）监听(.$on)事件 & 抛发(.$emit)事件文件目录：具体使用如下：1.创建一个新的Vue实例文件路径（可自行选择位置创建）：/src/views/E

Vue是单页面应用，所以对于SEO并不友好。那么如何进行SEO优化呢？？？Vue实现SEO优化一、实现方案二、预渲染prerender-spa-plugin1.安装插件2.vue.config.js配置3. main.js配置一、实现方案SSR服务器渲染预渲染prerender-spa-plugin使用Phantomjs针对爬虫做处理关于SSR服务器渲染，可查看 【官网介绍 】二、预渲染prerender-spa-plugin使用步骤：1.安装插件yarn add prerender

滑动验证码一、关于插件二、项目实战一、关于插件【vue-puzzle-verification】二、项目实战安装插件yarn add vue-puzzle-verification引入声明组件并使用<script>import PuzzleVerification from "vue-puzzle-verification";export default { name: "Puzzle", components: { PuzzleVerification },

成功 = 艰苦劳动 + 正确方法 + 少说空话vue3.x项目的创建有两种方式，一种是使用vue-cli创建，另一种是使用vite进行创建。很多同学应该是对于vue-cli比较熟悉，所以采用该种方式进行创建。查看 vue-cli 版本vue -Vnpm install -g @vue/cli --// 用以升级@vue/cli版本对于该种方式创建Vue3.x的项目，有个前提条件就是@vue/cli的版本至少为 4.5.0。所以如果你的版本过低，是会有问题的执行创.

未来不完美，所以一直要努力Vue修饰符一、vue修饰符 --- v-on修饰符.stop: 阻止事件冒泡.prevent: 阻止默认事件.capture: 开启捕获模式.self: 仅当点击自身才会触发回调.once: 只触发一次回调.{keyCode | keyAlias}: 监听特定键从而引发回调特殊键盘按键监听二、vue修饰符 --- v-mode修饰符一、vue修饰符 — v-on修饰符修饰符：.stop: 阻止事件冒泡.stop- 调用 event.stopPropagation.

行百里者半九十table拖拽一、安装插件并引入二、插件使用关于拖拽效果，之前手动写过拖拽交换的逻辑，但因为这次拖拽的是element的table行，所以想找下有没有好用的插件。经过一番查找，找到一个很nice的插件SortableJS，功能强大的JavaScript 拖拽库使用介绍：安装插件并引入获取拖拽元素的父元素创建并配置相关参数回调函数使用注意：element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况，但是不可用ind.

vue 使用webpack插件打包时候报错，错误如图所示：因为安装的时候是直接使用如下指令：npm install compression-webpack-plugin此时安装的即为该插件的最新版本，现在是2021.7.16，最新版本为经过查找已经自行尝试，实现解决该问题。方案如下：使用低版本该插件具体步骤如下：卸载当前版本npm uninstall compression-webpack-plugin安装低版本npm install compression-webpa

道路千万条，安全第一条在移动端常见的联动选择，vantUI里有封装好的组件，但是PC端并没有，该如何实现呢？项目配置 : vue + element经过尝试摸索，总结如下：1.安装 elementnpm i element2.将省市文件拷贝到目录下3.将文件引入 使用的组件内进行使用<el-cascader :options="options" v-model="value" separator=" " @change="handleChang.

前人栽树，后人乘凉vue3.x的时代，已然来临。相对于vue2.x的版本，是有很大的变化出入。在此，仅记录vue3.x使用lodash的操作一、安装npm i lodash -S oryarn add lodash -S 二、使用2.1 vue3.x使用在需要使用lodash的组件内进行引入import _ from 'lodash';setup(){ // 防抖 const _debounce = _.debounce(function() { // ..

vue中使用moment.js时间格式化1. js转换2. moment.js2.1 安装插件2.2 全局过滤器定义2.3 组件使用关于时间，一般存储的都是时间戳，但是想要展示给用户看的又有可能是各式各样的日期格式，那么该如何优雅的转换呢？时间格式化1. js转换function dataFormat(now){ let date = new Date(now) Year = date.getFullYear() + '-'; Month = (date.getMonth()+1 < 1

transition & vueVue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果在vue里，可给任何元素和组件添加进入/离开过渡举个栗子：html:<template> <div class="root-container"> <div id="databinding"> <el-button :type="show?'warning':'success'" @click="show = !show"

vue项目使用markdown1.创建vue项目2.安装markdown插件3. 引入插件使用3.1 在main.js中全局引入3.2 在组件中进行使用4.进行编辑markdown业务需求千奇百怪，编程人员想破脑袋。1.创建vue项目【 vue-cli创建项目(没有最全只有更全)】vue create md_project我此处创建的是基于vue2的项目，并非vue3创建完成，可按照指令进行项目启动2.安装markdown插件npm i mavon-editor -Soryar

img动态路径网络资源路径 & 本地静态资源路径有的时候业务需求，是动态切换图片。而图片资源，有的时候是来自CDN托管资源的，有的时候是本地public存储的。整理了一下代码，接下来稍微分别展示一下网络资源路径 & 本地静态资源路径html布局<!-- 网络资源图片路径 --><p> src 动态 网络路径 <el-button @click="changeSrc('online')">切换</el-button><

1

webpack搭建vue项目1. 创建根文件并初始化mkdir hand-democd hand-demonpm init -y2. 创建目录// 打包输出地址dist //公共资源public index.html //入口页面// 开发操作的目录src main.js // 入口js文件 App.vue // 根 组件 components // 公共组件目录 router //前端路由配置 index.js store // s

文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。注意: 如果是手动搭建的项目，需要通过安装插件才可使用JSX。vue如何使用jsx编写1.创建Test.jsx文件export default { render() { return ( <div> <p>vue 使用 jsx</p> </div> ); },};如此就是最简