VUE
关注
分享
扫一扫
文章平均质量分 62
卷毛崽
这个作者很懒，什么都没留下…
展开
-
el-table组件封装
el-table封装原创 2023-02-23 09:44:21 · 501 阅读 · 1 评论 -
vuex状态管理理解（自用）
vuex原创 2022-10-17 14:57:44 · 152 阅读 · 0 评论 -
vue3 配置正式环境 测试环境
vue3正式环境测试环境配置原创 2022-09-06 16:48:50 · 926 阅读 · 0 评论 -
XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能
vue xlsx读取excel文件原创 2022-08-11 14:53:51 · 1461 阅读 · 0 评论 -
vue 使用svg渲染地图
本人小白，看了同事代码实现的效果实现思路：1、找ui要到的svg图片，把其中path的值赋值过来，所有数据一起组成一个json文件Json文件{ "svgArr": [{ "d":"M440.9,128.9l25,16.3l9.5,32.3l9.5,4.3v6.3h7.5l13.3,7l2,8.5l24.5,9l4.4,3.3L530,222l2.9,15l11.8,7.1v12.2 l6.5,10.9l10,1l1.5,7.9l-17.5,4.6l-0.1,3.原创 2022-02-11 10:07:50 · 2292 阅读 · 1 评论 -
echarts实现svg地图
链接阿里云数据可视化平台介绍之前写了另一个echarts实现地图的，可以移步这里这次是用的echarts+svg实现的，参考了echarts的这两个案例庖丁解牛内脏数据代码废话不多说，直接上代码<template> <div> <h1>深圳罗湖区--svg地图</h1> <div id="main"></div> </div></template><script原创 2022-01-21 16:07:35 · 10528 阅读 · 5 评论 -
循环中执行好异步，再继续执行循环（async await ）
async await原创 2022-01-21 10:41:57 · 1722 阅读 · 0 评论 -
vue+echarts 区域地图绘制（街道）
vue+echarts 区域地图绘制（街道）1、以下是本人参考别的博主的链接2、需要用到的资源3、获取地图JSON（1）[阿里云](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)获取--只精准到市区（--这里以深圳市为例）（2）[北斗卫星软件](http://www.bigemap.com/)获取--精准原创 2021-12-21 17:37:33 · 7252 阅读 · 3 评论 -
pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览实现效果实现过程（1）安装pdfjs-dist（2）代码部分（3）原理项目要求实现pdf文件在线预览，并且pdf预览通过上下页滚动pdf,且兼容ie浏览器浏览器兼容参照了这位博主的文章，选择用pdfjs-dist 实现实现效果这是我随便写的一个pdf(一共2页)，可通过点击上下换页谷歌浏览器ie11实现过程（1）安装pdfjs-distnpm install --save pdfjs-dist@2.0.943这里需要指定2.0.943的版原创 2021-12-17 15:28:35 · 18149 阅读 · 8 评论 -
Vue-cli--jquery.ajax调用接口跨域问题（ No ‘Access-Control-Allow-Origin‘ ）
Vue-cli--jquery.ajax调用接口跨域问题（ No 'Access-Control-Allow-Origin' ），接口无法加载响应数据本人小白一个，在调用后台给的接口时，频频报错，特此记录一下项目是vue-cli搭建，分正式测试环境，接口使用jquery.ajax调用调用过程中出现以下两个错误一个是No 'Access-Control-Allow-Origin，在网上找了相关文章为跨域问题，因为我本地和接口所在地址不是同源，这个后面采用了代理处理另一个是failed to loa原创 2021-12-13 16:13:05 · 1376 阅读 · 0 评论 -
79-高阶
这里写目录标题mixinmixinMixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。mixin会和原本组件的选项里的数据合并(例如data,methods之类)，组件的选项优先级高于mixin,如果有相同的会被替换，如果是生命周期的钩子函数，会新执行mixin再执行组件里的钩子函数<!DOCTYPE html><html原创 2021-11-21 22:33:56 · 529 阅读 · 0 评论 -
vue布局组件(router-view)
网页中，很常见的是头部导航栏、底部链接、面包屑或者其他部分，在网站的每一个页面都会出现，并且样式统一可以使用vue-router提供的router-view来构成一个布局组件，将头部导航栏、底部链接等写在页面上固定渲染，切换页面时，只切换中间内容部分思路：1、创建一个layout文件，放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转，这里是示例每个页面都带一个面包屑组件（一般是app.vue，这里我自定义了一个）//layout文件<template>原创 2021-11-05 14:42:32 · 7581 阅读 · 0 评论 -
65-68 watch侦听 补充知识点
65-68 watch侦听 补充知识点watch侦听器单项数据流（补充）动态绑定传参便携写法no props 主要用于传递样式watch侦听器watch可以监听data中的数据，自带两个参数，current,prev分别是之前和之后的值掌握watch和计算属性的区别watch更适合异步的操作，适合一个属性变化引起一系列变化的情况计算属性:需要通过计算得到，直接计算结果 watch:{ price(current,prev){原创 2021-10-10 22:17:50 · 220 阅读 · 0 评论 -
62- 生命周期
这里写目录标题生命周期生命周期生命周期函数：在一个组件的生命周期范围内某一阶段自动执行的函数vue 官方生命周期图示原创 2021-10-08 23:39:24 · 236 阅读 · 0 评论 -
56-61 组件插槽、动态组件，异步组件
插槽的基本使用先写一个组件，然后将按钮注释，改为插槽，其中插槽可以编写默认内容，在应用组件时，将自定义元素写在组件中，就会替换slot的标签，十分灵活 <body> <div id="app"> <lk-box><button>点我</button></lk-box> <lk-box><input type="text" placeholder="输入名字"></lk原创 2021-10-05 21:44:08 · 420 阅读 · 0 评论 -
40-55 组件化、父子组件通信
40-全局化组件局部组件-使用components选项进行引入父子组件组件标签化第二种-template标签（项目开发中常用）掌握1、组件不能直接访问vue实例的数据data为什么是函数，不是对象全局化组件组件必须先进行注册，挂载到实例时当全局组件中使用其他组件时，必须在实例前使用；<body> <div id ="app"> <div id="home"><span>首页</span></div>原创 2021-09-23 00:10:26 · 365 阅读 · 0 评论 -
vue+js实现描点跳转的导航跟着滚动条实现变化
页面代码，导航条为ul部分 <div class="header-bookmark" ref="bookmark"> <ul class="bookmark"> <li v-for="(item, index) in bookmark" :key="index" class="bookmark-item" :原创 2021-09-22 16:15:38 · 897 阅读 · 0 评论 -
vue-前端实现省市三级联动选择（elementUI的级联选择器el-cascader）
参考链接：emementUI官方介绍element-china-area-data参考链接安装npm install element-china-area-data -S使用regionData是省市区三级联动数据（不带“全部”选项）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市import { regionData, CodeToText } from "element-china-area-data";省原创 2021-09-13 09:46:58 · 3274 阅读 · 0 评论 -
24-39 v-if/v-show；v-for；v-model
24v-if 和v-show区别小案例：登录方式切换v-if 和v-show区别v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁重建v-show不管初始条件是什么，元素总是会被渲染，并且只是简单基于css进行切换v-show适用于页面多次切换；小案例：登录方式切换v-if方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-09-05 22:09:20 · 446 阅读 · 0 评论 -
20-23 计算属性
20 计算属性函数和方法的区别计算属性1、计算属性体验2、计算属性运用计算3、计算属性内部实现4、计算属性和函数的区别函数和方法的区别函数：全局定义或者是windows对象方法：把函数绑定在具体的一些对象或者构造函数上，通过对象去调用的就是方法计算属性1、计算属性体验<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2021-08-29 23:41:57 · 250 阅读 · 0 评论 -
16-19 v-style和v-on基本使用
这里写目录标题1、v-style 动态绑定style2、v-on2-1 v-on基本使用2-2 v-on 参数传递2-3 v-on 常见修饰符（1）阻止冒泡@click.stop（2）阻止默认事件@click.prevent（3）只能点击一次 @click.once(4)键盘响应（回车）@keyup.enter1、v-style 动态绑定style<!DOCTYPE html><html lang="en"><head> <meta charset=原创 2021-08-29 21:42:21 · 733 阅读 · 0 评论 -
vue-14 v-bind动态绑定class
VUE课时14v-bind 动态绑定样式（css）第一种.字符串第二种 对象--最常用第三种 数组v-bind 动态绑定样式（css）第一种.字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-08-29 20:36:37 · 252 阅读 · 0 评论 -
vue、Element 点击按钮以弹窗形式预览pdf文件
原文链接<div > <el-button type="success" size="small" @click="isViewPdf20 = true" >按钮</el-button></div><el-dialog title="预览文件" :visible.sync="isViewPdf20" :before-close="handleClose" :fullscreen="true"> <ifram转载 2021-08-19 20:37:56 · 3640 阅读 · 0 评论 -
vue:自定义组件的v-model
参考链接1参考链接2运用：实现表单输入的双向绑定下面为转载的内容1 <div id="app">2 <input v-model="price">3 </div>1 new Vue({2 el: '#app',3 data: {4 price: ''5 }6 });通过该语句实现price变量与输入值双向绑定实际上v-model只是一个语法糖，真正的实现是这样的：1 <input t转载 2021-08-19 11:04:27 · 341 阅读 · 0 评论 -
vue 父组件与子组件之间互相传值
示例：代码：注册组件// 注册组件export default { components: { //注册的组件名，例如为InputNumber InputNumber }}父组件：<template> <div> <InputNumber :num="num" @num-change="handleNumChange"></InputNumber> </div></template><原创 2021-08-17 10:57:45 · 445 阅读 · 0 评论 -
弹窗提示，并倒计时
效果图：进入页面自动弹窗，开始倒计时，倒数十秒后才能进入下一步思路：自定义一个num值，对num值进行判断，大于10s后按钮才可点击，并进行mounted，在页面一加载完成就自动执行time（）开始倒计时，<el-button type="primary" id="kjzm" @click="kjzm()" :disabled="num !== 0" >{{ num === 0 ? "" :原创 2021-08-09 09:28:47 · 2011 阅读 · 0 评论 -
vue-day2
18 掌握 v-bind动态绑定style（对象语法）可利用v-bind:style来绑定一些内联样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi原创 2021-02-24 23:14:25 · 145 阅读 · 0 评论 -
VUE-DAY01
04、简单Vue创建实例总结:(1)定义变量:let 定义变量 ； const 定义常量；(2)const app = new Vue ({el:加上绑定的元素；data:{} })其中创建实例关键字为new，Vue指调用vue.js中的Vue函数直接调用函数进行创建实例，类似于var app= function vue(); <div id="app"> <p>{{message}}</p> <p>{{原创 2021-01-05 00:36:03 · 237 阅读 · 0 评论 -
vue创建项目
vue 创建项目1、参考资料2、命令行： vue创建项目3、图形化界面创建vue项目1、参考资料资料1：prettier和standard规则比较资料2：使用 vue-cli 3 快速创建 Vue 项目及项目配置 Vue.config.js资料3：vue创建项目资料4：图形化界面创建vue项目2、命令行： vue创建项目命令行窗口输入创建一个名为hello的vue项目vue create hello接着出现这个选择界面，default为默认配置，这里选择manually手动选择会有更大的原创 2021-02-08 23:41:49 · 706 阅读 · 0 评论