vue笔记
Maple-Ning
这个作者很懒,什么都没留下…
展开
-
Vue实现一键复制文本内容
记录一下使用到的东西,将文字识别结果一键复制代码 // 文本复制 copyText () { //使用textarea的原因是能进行换行,input不支持换行 var copyTextArea = document.createElement("textarea"); //自定义复制内容拼接 var str = `银行卡卡号 ${this.recognizeList.card_num}\n有效期 ${this.recognizeList.da原创 2022-05-26 17:02:19 · 2629 阅读 · 0 评论 -
Vue以formdata的格式将文件传给后端
最近在项目中有使用到图片上传,在此记录一下。使用步骤1.使用了element-ui的upload组件 <el-upload class="avatar-uploader" action="" :on-change="(val)=>changeFile(val)" :auto-upload="false" a原创 2022-04-06 20:21:50 · 4048 阅读 · 0 评论 -
Echarts解决默认单位为PX
在使用echarts绘制图表时,遇到不适配不同大小的屏幕的问题,这是因为echarts默认的单位为px,我们可以采用类似于rem的单位来实现一定程度的大小屏适配。方法这个方法是在网上找的,亲测有效。 adjustSize(res) { let docEl = document.documentElement, clientWidth = window.innerWidth || document.doc原创 2022-03-04 13:09:26 · 1776 阅读 · 0 评论 -
Vue解决页面刷新时vuex中的值被清空的问题
问题描述:使用Vuex存储数据时,会出现刷新页面时Store中的值丢失的情况。这种情况下,可以将Store中的值存储在sessionStorage中。思路分析:1.监听页面刷新事件,可以使用beforeunload,页面刷新前,将Store中的值存储到sessionStorage中2.页面刷新时,从sessionStorage中取出存储的值,重新存储到Store中代码:created () { //重新将sessionStorage中的值存储到Store中,判断是否是初次进入的方法视原创 2021-12-29 13:52:35 · 2103 阅读 · 0 评论 -
vue中使用lang=“scss“
记录一下要安装sass-loader和node-sass,且版本组合适配一个适配的版本组合 sass-loader-7.3.1 node-loader-4.14.1下载命令:npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev原创 2021-12-24 10:07:13 · 2023 阅读 · 1 评论 -
Vue过渡实现div的展开和收起的动画效果
记录一下在项目中使用过的vue过渡效果//template部分//移入和移出改变mainDiv的显示状态<div @mouseover="mouseOver1" @mouseleave="mouseLeave1"></div>//vue的过渡<transition name="draw"> <div class="mainDiv" v-show="show1"> </div></transition>//s原创 2021-12-23 15:13:05 · 3260 阅读 · 0 评论 -
Vue中对象的某个新增属性在页面中不显示
总结在开发中,我们有时会给对象新增一个新的属性。这个属性虽然在控制台显示,但在页面中却不显示。这是因为Vue无法探测普通的新增属性,这时候可以使用this.$set()代替 写法this.$set( target, 'key', value ) => this.$set( 要改变的对象, '要新增的属性名', 新增的属性值 )...原创 2021-12-23 14:46:31 · 1601 阅读 · 0 评论 -
组件化开发中使用Vuex存储数据
原创 2021-12-23 14:31:47 · 759 阅读 · 0 评论 -
Vue中过滤器的使用
概念: 对要显示的数据进行特定格式化后再显示(适应于一些简单逻辑的处理)Vue.js允许自定义过滤器,可被用于一些常见的文本格式化格式:过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示过滤器可以用在两个地方,插值语法和v-bind表达式<!-- 插值语法中-->{{time|formatTime}}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div&g原创 2021-10-14 14:49:15 · 189 阅读 · 0 评论 -
Vue组件化
Vue组件化开发文章目录一、Vue中使用组件的步骤1.创建组件2.注册组件3.使用组件二、组件的嵌套一、Vue中使用组件的步骤1.创建组件Vue.extend(options),options为配置对象,与创建Vue实例的配置对象很相似,区别是data必须为函数形式。const myHeader=Vue.extend({ template:` <div> <h2>我是Header</h2> </div> `, .原创 2021-10-12 18:21:48 · 146 阅读 · 0 评论 -
Vue生命周期
Vue生命周期是什么?在vue的创建、使用、销毁的过程中,有许多事件,这些事件统称为生命周期函数。换而言之,生命周期就是Vue在关键时刻帮我们调用的一些特殊名称的函数。Vue生命周期主要分为四个阶段,八个过程四个阶段:Create 创建Mount 挂载Update 更新Destroy 销毁八个过程:beforeCreate 创建完成之前created  原创 2021-10-11 17:09:18 · 187 阅读 · 0 评论 -
Vue.js学习
学习Vue文章目录一、Vue.js是什么?二、Vue的特点三、html中引入Vue并使用一、Vue.js是什么?Vue.js是一套用于构建用户界面的渐进式JavaScript框架。构建用户界面:使用某种方式拿到数据,将数据放到合适的位置。渐进式:Vue可以自底而上逐层应用二、Vue的特点1.采用组件化开发,提高代码复用率,并且让代码更好维护2.使用声明式编码,让程序员无需直接操作DOM,提高开发效率3.使用虚拟DOM+Diff算法,尽量复用DOM节点虚拟DOM:使用普通的js对象来.原创 2021-10-11 15:52:15 · 664 阅读 · 0 评论 -
Vue脚手架的创建
学习如何创建vue脚手架文章目录一、创建准备二、创建步骤1.引入库2.读入数据三、允许一、创建准备二、创建步骤1.引入库代码如下(示例):import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')import sslssl._create_default_htt.原创 2021-09-22 12:59:58 · 412 阅读 · 0 评论 -
Vue中使用watch监听route.query传参的变化
在Vue项目中,当路由传参jquery的值发生变化时,需要重新发送请求获取数据,刷新页面的数据。这时我们就能通过监听器来监听路由的变化,重新发送请求。watch用于观察和监听页面上的vue实例,当你需要在数据变化响应时,执行异步操作,或高性能消耗的操作,那么watch为最佳选择一个简单的例子 // 侦听器 watch:{ //监听路由 //监听路由的categoryId属性的数据变化 '$route.query.categoryId': function(){ /原创 2021-09-19 17:02:31 · 10757 阅读 · 0 评论