![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 77
归来巨星
一名致力于新技术的推广与优秀技术的普及的前端开发工程师。个人开源项目:TinkerBell-ui,TinkerBell-ui-react,TinkerBell-ui-next,react_ruoyi_admin,Tinkerbell-Blog等。
展开
-
如何使用 markdown 结合组件 props 实现可控制的响应式 ui组件库 文档
✨ 每天创作一点点✨ 开心快乐一整天✨ 美好一天又一天。原创 2022-10-24 09:04:24 · 951 阅读 · 0 评论 -
vue Template模板中针对属性如何写空白字符串占位符?(\u00a0)会是一个好的空格占位解决方案
解决空白占位符的几种方案原创 2022-09-05 18:07:36 · 2309 阅读 · 0 评论 -
(扩展 vue 思维)使用 React 构建一个轮子(LoadingBar加载组件)让 useState 挂载 ref 实例,函数外部 js 调用实例 ref.useState 实现子组件更新
文章目录一、组件概述、使用场景描述(Vue2版本)1、思维,及实现方式描述2、main.vue3、index.js二、组件构思(react版本)1、思考如何挂载组件问题2、函数式编程,其中没有类的概念,没有this,如何在外部调用实例方法?3、使用 React.createRef() 获取一个ref实例4、index.tsx5、index.scss6、引入调用及功能实现一、组件概述、使用场景描述(Vue2版本)1、思维,及实现方式描述先上一个图,这边的ui库是我这边之前使用vue2版本构建的一个组件原创 2022-03-23 14:14:54 · 1864 阅读 · 21 评论 -
前端 vue 上传文件到阿里云 OSS 服务器
oss设置跨域js文件// 创建OssClient.jsimport OSS from 'ali-oss'const client = new OSS({ region: '地区名称', accessKeyId: 'oss申请的keyId', accessKeySecret: 'oss申请的keySecret', bucket: 'oss设置的bucket'})// client.options.bucket = 'jbd-jxy/files/'export default原创 2021-09-28 09:02:22 · 1404 阅读 · 1 评论 -
浅谈总结 vue2 到 vue3 的细节变更
文章目录1、v-for的ref数组。2、异步组件的加载3、attribute的变更。[4、$attrs 的变更。](https://v3.cn.vuejs.org/guide/migration/attrs-includes-class-style.html)5、$children的变更。6、vue自定义指令的变化。7、新增emits选项。[8、$on、 $off、 $once 实例方法的变更。](https://v3.cn.vuejs.org/guide/migration/events-api.html原创 2021-08-26 11:15:58 · 891 阅读 · 0 评论 -
vue3 props 如何接受多个类型?
采用vue2写法,编辑器报错vue3 变更为数组写法原创 2021-08-23 10:57:22 · 6371 阅读 · 0 评论 -
如何在 npm 上发布一个 vue-cli 构建 Vue3+TypeScript 的项目?
文章目录一、变更目录结构名称1.1、新增packages文件夹用于存放开发的组件。二、开始开发组件。三、使用组件。3.1、在main.ts中写入组件。四、如何将项目打包?4.1、配置 package.json 打包初始化。4.2、在package.json文件scripts标签中新增两个命令。五、推送项目到npm。一、变更目录结构名称首先我们看到的是一个新建好的 vue3 项目结构1.1、新增packages文件夹用于存放开发的组件。二、开始开发组件。在packages中新建一个这样的目录结构原创 2021-08-20 15:04:55 · 671 阅读 · 3 评论 -
如何在H5移动端页面中调起手机拨打电话功能?
文章目录一、如何在H5移动端页面中调起手机拨打电话功能?二、Vant搭建页面js函数调用弹窗,如何实现对应点击功能?一、如何在H5移动端页面中调起手机拨打电话功能? <a href="tel:对应电话号码" ref="telPhone"></a>二、Vant搭建页面js函数调用弹窗,如何实现对应点击功能? <a href="tel:010-87799168" ref="telPhone" style="display:none;"></a>原创 2021-08-12 08:45:24 · 6511 阅读 · 1 评论 -
vue 进入到一个新路由页面后,路由组件页面缓存,如何实现路由组件刷新重载?
文章目录一、如何实现路由重新加载?1-1、设置要刷新的组件v-if,通过v-if实现页面组件层重载。1-2、对外暴露main.js中的 new Vue()实例。1-3、来到我们的路由守卫配置页面。1-4、配置router.beforeEach钩子守卫。一、如何实现路由重新加载?1-1、设置要刷新的组件v-if,通过v-if实现页面组件层重载。<template> <el-container> <el-header>Header</el-header&g原创 2021-05-31 15:40:36 · 3095 阅读 · 15 评论 -
在js文件中使用Vue.extend与new Vue().$mount 实现挂载vue文件?
Vue.extend( options )参数:{Object} options用法:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数原创 2021-05-25 10:57:55 · 3835 阅读 · 18 评论 -
vue如何在style标签中使用data响应式数据?
文章目录一、面临到的需求?二、如何在css中使用变量?三、vue如何在style标签中使用data响应式数据?一、面临到的需求?首先我们知道css对应是有伪类的,如:hover, :active 等等。我们需要想的是如何获取到这个对应的dom节点的伪类然后将对应的伪类,通过js的方式进行变更呢?我们要知道的是,此种如:hover是不引用元素的,而是引用任何满足样式表规则条件的元素。我们直接通过获取dom节点,然后变更里面的样式是行不通的。此时我们就需要用到一个apiCSSStyleDecla原创 2021-05-19 17:30:01 · 6728 阅读 · 9 评论 -
display设置显示隐藏,transition过渡不起效果,采用opacity+visibility+dispaly解决问题
文章目录一、场景如下,需要给一个弹出窗设置动画,淡入淡出效果。二、直接采用display:none;display:block;过渡transition不起效果。三、解决方案3.1 visibility与opacity二者区别?3.2 如何不让其占据页面位置?一、场景如下,需要给一个弹出窗设置动画,淡入淡出效果。当我们点击按钮123时,对应的下方弹出层展示在页面上,再次点击或点击文档其他处时,我们需要将弹出层隐藏(带有动画效果)。二、直接采用display:none;display:block;过渡原创 2021-05-10 16:38:10 · 7457 阅读 · 0 评论 -
Vue中如何正确的使用jsx语法书写代码
文章目录一、首要了解vue的render函数?1、什么是虚拟dom?2、如何在render中使用jsx语法进行书写?3、写法示例二、案例编写一、首要了解vue的render函数?我们得知道有些特定的场景下 我们是需要去用到render函数去渲染vue模板的,那么何种场景呢?在这里我可以找两个例子当然我们也可一看一下element的源码 package.json中是否存在这两个依赖以下是官网采用的两个依赖(其实两者是一样的 只不过由于版本问题)当然这两个依赖也同样是我们在vue中书写js原创 2021-05-06 10:36:29 · 4428 阅读 · 5 评论 -
JS 原生事件绑定,Vue路由变换,事件再次绑定,导致事件绑定两次,无法销毁给单个节点绑定的scroll事件。
文章目录一、绑定事件的两种方式二、主要思考的问题如下:三、采用on事件绑定解决问题:一、绑定事件的两种方式addEventListener : js原生事件绑定,累加式绑定,可以给一个元素绑定多个相同事件。on:js事件绑定,替换式绑定,使用 on 的方式绑定事件,一种事件只能绑定一次,绑定多个相同事件,后面的事件会覆盖前面的事件。二、主要思考的问题如下:vue当中,如果我们去在onMounted中去采用dom节点的方式去绑定了一个事件,那么我们需不需要在页面销毁时去将这个绑定的事件销毁呢?从逻原创 2021-02-27 13:53:01 · 2215 阅读 · 1 评论 -
vue引入图片报错?VueCli 关于静态资源(图片) 引入问题
文章目录一、关于Vue-Cli图片引入问题?二、两种引入方式三、相对路径动态时如何使用?四、背景图片background-image如何渲染?一、关于Vue-Cli图片引入问题?首先我们要清楚Vue-cli是基于Webpack来进行的打包,其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。二、两种引入方式简单的来说一种是相对引入方式,一种是绝对引入方式相对引入: <img src="../assets/logo.png" alt="" />原创 2021-02-24 13:53:28 · 15609 阅读 · 6 评论 -
前端代码连续点击多次按钮,导致数据提交多次,导致后端幂等,解决方案(全局 每次前端请求设置Loading加载效果,请求完成后,关闭Loading加载)
文章目录1、文章开篇:什么是幂等?1、文章开篇:什么是幂等?幂等(idempotent、idempotence)是一个数学与计算机学概念,常见于抽象代数中。在编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。幂等函数,或幂等方法,是指可以使用相同参数重复执行,并能获得相同结果的函数。这些函数不会影响系统状态,也不用担心重复执行会对系统造成改变。例如,“setTrue()”函数就是一个幂等函数,无论多次执行,其结果都是一样的.更复杂的操作幂等保证是利用唯一交易号(流水号)实现。原创 2020-12-30 11:21:31 · 5915 阅读 · 0 评论 -
vue-Cli3,Vue-Cli4打包后如何配置静态资源路径?(自定义浏览器icon图标,title文本)
文章目录为什么要配置静态资源路径?1、首先我们要清楚什么样的环境下我们需要配置静态资源路径?2、如何配置?为什么要配置静态资源路径?1、首先我们要清楚什么样的环境下我们需要配置静态资源路径?那肯定是不是单纯的一个前端写的单页面应用的时候,我们仔细想想,如果我们开发了一个新模块,但是不是基于原来项目开发的,而实更换了一个路径?不不不,只是说新起了一个子路径,相当于二级路径,那么这个时候我们还能用原来的默认的配置去寻找接口地址,静态资源地址吗?当然这样肯定是行不通的,所以说我们需要配置一下你当前这个模块原创 2020-12-28 17:23:18 · 3071 阅读 · 0 评论 -
Vue实例$options调用没有定义在data,methods中的属性和方法
export default { name:'Demo', text:'我爱他轰轰烈烈最疯狂', app1(num){ return '外部方法:'+num }, data() { return { gFather: '祖先', form: { inp1: '123', obj: { inp2: '123', }, }, } }, created() {原创 2020-12-22 16:38:45 · 1287 阅读 · 0 评论 -
Vue input文本框v-model与ref.value不能同时使用赋值,如何实现操作节点方式赋值?
我们开发时有是会遇到这样一个场景,点击某一个文本框,蹦出弹窗,里面是一系列的表格,勾选表格项,将其指定的内容赋值到对应的我们点击的那个文本框上。如下 需求现在有两个文本框,当我们点击时让其蹦出弹窗,内容123变成abc。我们可以看到,两个对应的v-model值已经绑定到了对应的文本框上面。 methods: { proup(dom) { let vm = this // Dialog是vant的弹窗 Dialog.alert({ t原创 2020-12-21 18:54:16 · 4373 阅读 · 1 评论 -
vue如何实现组件传值?掌握provide、inject此种传值方式代表你就已经是一位大佬了!
vue常见的传值方式有很多?大体的我们可以分为以下几种传值方式父子组件传值:props ,$emit。兄弟组件传值:eventBus公交车机制。上方是最为常用的三种传值方式但是你以为传值方式只有那么多?并不是通过Session Storage缓存、Local Storage缓存。// 父组件const s = { name: '小明', age: 18 }sessionStorage.setItem('缓存名称', JSON.stringify(orderData))// 子组件c原创 2020-12-11 09:43:44 · 1061 阅读 · 1 评论 -
一篇博客 教会你在Vue中快速上手TypeScript(在Vue中使用typescript)
TypeScript2020年了,身为前端的我们来说,要承认的一个事实就是typescript是越来越火了。可以看看NPM官方的周下载量达到了1000+万次的周下载量这个图可以告诉我们确实,将来的前端主流可能要向TypeScript偏移了,因为免不了的就是规范。那么说到TypeScript,那么他到底是什么呢?他到底怎么去使用呢?其实众所周知 javascript是一个弱类型语言,举一个最简单的比方我们在使用js声明一个变量时,是不需要去声明变量类型的var a = 10 // 我声明了一个原创 2020-09-29 10:55:35 · 2345 阅读 · 0 评论 -
Vue配置TinyMCE富文本编辑器 + 图片(本地)上传到服务器
一、TinyMCE是什么?TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。我们可以先大体看一下配置完成后的样子注:博主使用的TinyMCE版本是 “tinymce”: “^4.8.2” 如果超过此版本可能会导致一些问题。首先如果想要在Vue中使用TinyMCE,我们需要准备一些什么?汉化的中文语言包:zh_CN.js下载下原创 2020-08-04 10:03:49 · 5732 阅读 · 6 评论 -
Vue 使用element-ui时 el-table表格无法对齐问题
遇到的问题解决办法在App根组件style中填入对应的样式body .el-table th.gutter { display: table-cell !important;}问题完美解决原创 2020-07-30 09:58:35 · 3537 阅读 · 3 评论