![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 64
丿刘先森
努力,奋斗!
展开
-
如何修改第三方UI组件的样式
开发项目的时候一般会使用第三方UI框架,如elementUI、Vant等,那么就存在一个比较棘手的问题,就是样式修改:一般在修改框架自带的样式时有时很难生效 或者只是想要修改当前组件内的样式,而不影响其他组件 在style标签携带scoped元素的时候就很难覆盖UI框架的样式这时候就需要使用深度选择器/deep/,或者>>>穿透 scoped,而有些Sass 之类的预处理器无法正确解析>>>。可以使用/deep/或::v-deep组合器 ( >...原创 2020-09-15 13:19:08 · 8193 阅读 · 2 评论 -
安装node-sass时报错,gyp ERR! stack Error: Can‘t find Python executable “python“,......(项目安装使用scss)
首先,node sass是什么?Node-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译。Sass是一种预处理器脚本语言,可以解释或编译成层叠样式表(CSS)。vue项目中安装使用scss时,需要安装node-sass 及 sass-loader第一步,安装淘宝镜像npm install -g cnpm --registry=https...原创 2020-09-11 18:34:59 · 11412 阅读 · 2 评论 -
vue 常用自定义指令
说明/*** 自定义指令对象可以接收的钩子函数* bind 只调用一次,指令第一次绑定到元素时调用* inserted 被绑定元素插入父节点时调用* update 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前* componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用* unbind 只调用一次,指令与元素解绑时调用*/...原创 2022-04-12 23:19:35 · 1859 阅读 · 0 评论 -
前端利用jsencrypt.js进行RSA加密
什么是RSA加密RSA加密算法是一种非对称加密算法,RSA加密使用了"一对"密钥.分别是公钥和私钥,这个公钥和私钥其实就是一组数字!其二进制位长度可以是1024位或者2048位.长度越长其加密强度越大,目前为止公之于众的能破解的最大长度为768位密钥,只要高于768位,相对就比较安全.所以目前为止,这种加密算法一直被广泛使用。RSA加密与解密使用公钥加密的数据,利用私钥进行解密 使用私钥加密的数据,利用公钥进行解密相关文档:前端利用jsencrypt.js进行RSA加密实践:使用j原创 2022-03-15 15:47:31 · 2255 阅读 · 0 评论 -
vue slot 插槽使用详解
vue 对于前端的重要性不言而喻,日常开发中要用好vue,学会使用插槽是很重要的,且组件的开发也是离不开 slot,无论是移动端或pc都是如此。下面说说vue slot 的相关知识点:原创 2022-02-09 00:21:18 · 6823 阅读 · 0 评论 -
组件二次封装之自定义 v-model
vue2.0基于 uniapp uView UI 封装时间组件v-model 的实现借助官方提供的model 选项,其实可以理解为一个语法糖用props 来接收父组件的数据,子组件通过model选项派发一个更新父组件数据的方法v-model 可以理解为下面两步::value="value" @input="value=$event.target.value"来看vue 官方对 model 选项的描述:允许一个自定义组件在使用v-model时定制 prop 和 event。..原创 2022-01-06 22:50:38 · 6700 阅读 · 0 评论 -
vue表单级别状态管理(vuex plugin 插件使用分享)
分享重点:1,组件级状态管理(vuex)的使用2,vuex plugin 使用3,表单数据处理上面三个其实是互相嵌套,相互制约,共同协作来完成任务的。1,在当前组件根目录注册store,新建store.js 文件,如下:import Vue from 'vue'import { SET, EDITED, LOAD, MERGE, SELECT_CARRIER_SUG } from './constants' // 常量import adaptor from './adapt原创 2021-11-11 18:31:50 · 2426 阅读 · 0 评论 -
vue transition 动画基本使用
关于 transition 的属性的了解还是直接看官网吧,这里不做阐述。基本使用方式了解一下:<div class="animation_content"> <el-button type="primary" @click="animationClick" style="margin-bottom: 100px;" >状态切换</el-button> <原创 2021-06-24 18:44:43 · 305 阅读 · 0 评论 -
Vue 使用 better-scroll
首先,什么是 better-scroll ?它是用来干什么的?better-scroll是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。...原创 2021-06-05 16:49:18 · 1138 阅读 · 0 评论 -
vue-quill-editor 富文本编辑器
import cookie from '@/storage/cookies'import { Message } from 'element-ui'import emojiList from "@/components/chat/announcement/js/emojiList"const emojiIcon = '<svg class="i" viewBox="0 0 24 24"><use href="#emoticon-happy"></use><.原创 2021-03-11 21:57:46 · 1011 阅读 · 0 评论 -
vue图片裁剪插件vue-cropper使用 (FileReader 函数 | URL.createObjectURL 方法)
感觉这个挺有意思的,所以就弄了,也需要了几个知识点,顺带学习了,记录一下。主要用到的是 vue-cropper 截图插件,具体的安装,引入,使用请看 vue-cropper官方文档 ,很详细了,这里不赘述。效果如图:在硬菜之前先来点前菜吧,使用中遇到的东西,记录一下:1,FileReader 函数FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。FileReade...原创 2021-02-08 19:02:29 · 2498 阅读 · 0 评论 -
vuex是什么?怎么用?
经常用vue的同学们,不管你们是否经常或者偶尔使用vuex,但是你们是否都了解vuex呐,这个听起来说起来还都感觉挺顺口的vuex到底是个什么东西呐?首先,vuex是vue官方提供给我们的,所以学习的小伙伴首先应该以官方文档教程的为准:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。听起来是不是很蒙逼?继续。。。状态管理的诞生是为了更好的解决以下问题:vue组件传参的方法对.原创 2021-02-02 22:02:51 · 730 阅读 · 0 评论 -
vue + elementUI 表格相互切换时内容显示异常问题
这次做项目的时候遇到需要再同一个页面切换展示多个table的需求,然而再完成之后遇到一个问题:表格之间切换的时候会出现内容消失和无辜出现的现象,感觉对vue掌握的还不好,这里记录一下。先奉上解决办法:Vue+ElementUI项目中条件渲染切换表格时单元格内容显示异常的问题及解决方法在面试的时候,面试官...原创 2021-01-28 18:59:39 · 3105 阅读 · 4 评论 -
原生input上传文件(聊天发送文件消息)
上传文件如果不是特殊的需求,推荐使用elementUI等UI框架自带的文件上传,方便快捷。elementUI上传文件这次的需求是这样的:点击图标发起文件发送操作,选择文件主要还是利用input[type="file"]的change事件,获取选择的文件内容发送图标的样式就不展示了,个人需求不同,样式不同,主要是图标的点击事件中执行input file的click事件。self.$refs.uploadFile.click();<!-- 图片/文件上传 multipl原创 2021-01-26 14:56:37 · 645 阅读 · 0 评论 -
vue计算属性传参(computed)
计算属性默认是无法传递参数的主要用于对当前文件组件的数据(data/props),进行操作,缓存当前计算属性的依赖而有些情况需要使用到计算属性来传递参数,可以使用闭包函数:computed: { // 获取数据进行操作 computedValue() { return function(val) { console.log(val); }; } }举一个具体例子,项目需要发送文件消息,需要根据文件类型显示文件图标类型,更.原创 2021-01-26 12:17:57 · 5062 阅读 · 0 评论 -
聊天笑脸表情
图片文件在百度网盘/* 表情原图配置文件 */let emojiList = { "emoji": { "[大笑]":{file:"emoji_0.png"},"[可爱]":{file:"emoji_01.png"},"[色]":{file:"emoji_02.png"},"[嘘]":{file:"emoji_03.png"},"[亲]":{file:"emoji_04.png"},"[呆]":{file:"emoji_05.png"},"[口水]":{file:"emoji_06.pn原创 2020-11-23 10:54:52 · 337 阅读 · 0 评论 -
Vue组件间数据传递常用方法
1,props父传子,在子组件中利用props属性来接受数据,第一步,在子组件中定义需要传递的props数据,定义props应该按照验证方式,为props中的值提供一个带有验证需求的对象。// 子组件 menu-treeprops: { className: { type: String, // props的类型,这是props的基本类型检查 required: true, // 是否必填 default: 'chart' // 默认值 ..原创 2020-11-23 10:45:00 · 779 阅读 · 0 评论 -
vue中的computed计算属性
computed:相当于method,返回function内return的值赋值在html的DOM上。但是多个{{}}使用了computed,computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比...原创 2018-10-06 19:12:08 · 3896 阅读 · 0 评论 -
vue 3.0 vue.config.js文件常用配置详解
在Vue 3.0中,与2.0版本相比有一定的差别,最明显的就是缺少了build、config文件夹,而在3.0中,关于项目的配置修改,需要手动创建一个新的文件:vue.config.js。一些项目的基本配置及webpack配置可以在vue.config.js文件中完成。所以这里记录一下,3.0版本中常用的配置项:// vue.config.jsconst path = require...原创 2020-04-20 15:41:51 · 8779 阅读 · 3 评论 -
vue vant 安装 使用详解
Vant是轻量、可靠的移动端 Vue 组件库,安装使用可以参照官方文档进行,但是我发现文档不是很全面,所以自己在这里记录一下vue使用Vant主要有四种方式,第四种通过CDN引入方式,这里不做介绍,主要是下面这三种:###在使用之前,首先安装,可以通过npm或yarn# 通过 npm 安装npm i vant -S# 通过 yarn 安装yarn add vant1,自...原创 2020-04-16 13:08:41 · 6748 阅读 · 2 评论 -
vue 安装 bootstrap(vue安装JQuery)
vue项目中使用bootstrap的时候需要安装jquery,bootstrap,并配置,为什么要安装jquery呢,来看bootstrap官网的一段介绍Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说,他们依赖的是jQuery、Popper.js以及我们自己开发的 JavaScript 插件。也就是说bootstrap依赖jQuery和Popp...原创 2018-12-14 17:05:28 · 1113 阅读 · 0 评论 -
vue-lazyload 插件使用((图片懒加载)
1,安装// 安装npm install vue-lazyload --save2,注册// 注册 main.js全局注册import Vue from 'vue'import vueLazyload from 'vue-lazyload'Vue.use(vueLazyload);在注册的时候是可以传入配置参数的,常规配置如下Vue.use(VueLa...原创 2019-02-26 14:49:41 · 978 阅读 · 0 评论 -
Vue中的watch 和computed 属性
之前写过一篇关于computed计算属性的文章,详见这里。computed内的function只执行一次,仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容。在官方文档中,强调了computed区别于method最重要的两点computed是属性调用,而methods是函数调用 computed带有缓存功能,而me...原创 2019-03-05 20:45:44 · 1514 阅读 · 0 评论 -
websocekt 应用案例
写过一篇关于websocekt的文章,感觉不太清楚,所以再次记录下实际项目中的使用方法在Vue中,created钩子函数中就可以初始化websocket// created钩子函数中初始化websocektcreated() { this.initWebSocket()},在websocekt初始化完成,连接成功之后,向服务器发送请求initWebSocket() {...原创 2019-08-17 16:45:03 · 598 阅读 · 2 评论 -
Vue使用viewerjs (图片查看插件)
项目创建 vue init webpack mytest001安装viewerjs npm install viewerjs删掉生成的项目里面的helloWord.vue 修改路由 创建一个index.vueindex.vue代码: ...转载 2019-03-10 20:23:55 · 2897 阅读 · 2 评论 -
Vue WebSocket
最近项目在使用websocket,自己研究了下,详细概念性的知识点可以看这里,vue使用websocket可以参考这篇文章,我这里分享下开发代码,系统理解下使用方法后面还有一篇文章,是关于websocket的案例的,看这里。// 初始化websocketinitWebSocket() { const vm = this // 创建一个websock...原创 2019-08-17 16:41:41 · 2699 阅读 · 0 评论 -
vue 文件导出(下载)
文件的导出格式为excel因为导出组件为封装的组件,所以主要应用的是父子传值,封装组件如下: 如下是在vue中导出的方法<template> <el-button @click="exportChecked" type="primary" size="mini">{{buttonName}}</el-button></template&g...原创 2019-03-20 11:37:06 · 4090 阅读 · 2 评论 -
Vue filter 过滤器使用详解
在Vue中当我们想要对一个数值进行处理时(改变格式、大小,类型,过滤等)可以使用filterVue过滤器有两种注册方式,全局、或者是局部注册在一个组件内部想要使用一个不太常用的过滤器,可以局部注册局部注册的过滤器可以直接在组件的选项中定义export default { name: 'FilterDemo', /* 局部过滤器 */ filters: {...原创 2019-04-12 13:30:00 · 885 阅读 · 0 评论 -
Vue keep-alive数据缓存与activated、deactivated钩子
keep-alive是Vue的内置组件,可以将状态保留在内存中,防止组件切换过程中重复渲染DOM<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。属性(prop)include:...原创 2019-04-26 15:47:06 · 4710 阅读 · 0 评论 -
vue 用户登陆 和 退出登陆
首页登陆事件一般有两种,点击登陆(click)和回车事件(keyup),触发的是同一个事件,上代码:// 如下是登陆页form表单部分代码<el-form :model="loginForm" class="login-form" :rules="loginRules" ref="loginForm"> <div class="userloging"&...原创 2019-07-24 16:30:53 · 12331 阅读 · 2 评论 -
vue + elementUI 表格多选框选中 回显
项目开发使用的elemnetUI的table组件,牵扯到一个多选框的回显机制,这里记录一下。那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效:<el-table ref="multipleTable" :data="carData" :empty-t...原创 2019-07-24 19:22:51 · 17077 阅读 · 1 评论 -
vue 封装 Axios详解
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。vue接口数据请求一般都使用的axios,先来看一下axios的部分常用配置项: // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // default // `base...原创 2019-07-22 23:44:03 · 1130 阅读 · 0 评论 -
锚点跳转(vue)
第一种: 利用a标记的herf属性和id属性来完成跳转,a标记的herf属性值等于想要跳转去的div的id属性的值。这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。demo:<div class="headertab"> <div class="tab"> <a href="#1">基本信息<...原创 2018-10-15 15:21:34 · 13511 阅读 · 0 评论