Alisane的博客

功能描述：初始状态下，可以看到所有数据在地图上的分布的省份及相应的分布数量，点击点标注可以弹出对应的详细信息。该例子使用了高德地图原生API去实现上述功能，效果图如下:下面附上实现步骤：1.vue使用高德地图原生API。vue使用高德地图原生API的步骤在我的这篇博客中：https://blog.csdn.net/wsymcxy/article/details/114082139?spm=1001.2014.3001.55012.在步骤1的基础上在index.html中新加下面代码...

在vue项目中使用高德地图，大家应该会使用vue-amap组件，但vue-amap中的大部分功能还是要使用高德地图原生API,所以我直接使用了高德地图原生API进行开发。首先附上高德地图原生API文档地址：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show1.index.html中添加：<script type="text/javascript" src="http://webapi.amap.co

vue中使用element ui中的Table实现对全部数据进行排序

需求描述：封装一个进度条组件，点击该组件，传值给父组件父组件通过属性给子组件传值，子组件用props来接收父组件的值子组件通过$emit给父组件传值，父组件通过相应的方法接收子组件的值父组件：parent.vue<template> <div> <Progress v-for="(item,index) in text" :key="index" :parentData="item" @clickProgress="progress">&.

vue中使用echart并在echart中添加警戒线，通过配置visualMap和series.markLine实现警戒线效果 this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { title: { text: '温度趋势图', textStyle: { color: '.

echart实现三维立体图，这个有一个踩坑点，echart在渲染数据的时候，会有过渡动画效果，当数据量大的时候，会使图表在绘制过程中卡住，解决这个问题的办法是去掉过渡动画效果：grid3D.viewControl.animation = false。 this.myChart3 = this.$echarts.init(document.getElementById('myChart3')) this.option3 = { title: { t.

elementv UI 中的Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点（或者选中该父节本身）如图所示：<template> <div> <el-tree :data="deviceList" ref="tree" :props="defaultProps" node-key="id" :default-expanded-k..

<div class="con-footer"> <div class="con-image-text"><span>1</span><span class="qiti-right">796&nbsp;正常</span></div> <div class="progress-out"> &lt...

第一种：渐变曲线图且改变网格样式 <div id="myChart1" :style="{width: '100%', height: '330px'}"></div> this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { // 用于区域缩放 dataZoo..

首先描述一下业务逻辑：要求在一段长度不固定的电缆上面显示故障点（电缆最长10000米）思路：判断电缆长度的位数，根据电缆位数去计算刻度尺的坐标。第一种：刻度间的距离是10的整数倍splitCable(num) {// num表示电缆长度 let i = parseInt(num); let l = 0; let a = [0,1,2,3,4,5,6,7,8,9,10] while(i >= 1){ i=i/10; l++; if(l==1){..

vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。把组件共享的状态抽取出来。核心概念：state computed: { count () { return this.$store.state.count } }mapState辅助函数+对象展开运算符 computed: { ...mapState({ token:

一、安装对应依赖node模块：1.npm install node-sass --save-dev2.npm install sass-loader --save-dev二、解决 $ npm install node-sass --save-dev 失败的问题npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-b

本人第一次着手一个完整的vue项目，从2019.12开始至2020.7结束，中间由于各种需求的的变动，真正的开发时间只有3个月。总结一些我遇到的一些问题：1.同一个路由但是参数不同(例如page?id=1与page?id=2)，无法刷新页面？ 解决方法：利用<router-view>的key属性，这两个路由的$route.fullPath并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:beforeRouteUpdate => created => moun...

get请求，浏览器可以直接下载后台返回的文件流，但是post请求，浏览器不会直接下载。直接贴代码： myPlanEdit(type) { this.$http.defaults.headers.common['token'] = this.token; this.save_type = type let datas = { 'id':this.planId, 'name':this.dataObj.name

Vue 的核心库只关注视图层Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统Vue的是以数据驱动页面，页面中使用变量来表示可变的数据组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：父组件为子组件传值使用prop：&lt;d...

 data: 类型-Object | Function只有当实例被创建时 data 中存在的属性才是响应式(改动将会触发任何视图的更新)的vue实例中的data选项是对象，则所有的实例将共享引用同一个数据对象。组件中的data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回...

本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助&lt;本文所有相关代码均在git...

 这是基于vue-cli实现的 利用v-for循环遍历tabItems，class绑定到当前点击的tab项，&lt;router-link :to=item.tab&gt;{{item.name}}&lt;/router-link&gt;表示点击之后要跳转的路径（相当于每个tab项对应的div内容），&lt;router-view&gt;&lt;/router-view&gt;表示内容展示的地...

{ path: '/vWatchNet', component: resolve =&gt; require(['@/components/vWatchNet/vIndex.vue'], resolve), children:[ { path: '/lm...

store.js文件夹下的baseInfo.jsexport default { state: { token:'', currentArtDetails:{} }, mutations: { setToken (state, newUser) { state.token = newUser; }, setCurrentArtD...

&lt;div :class="{articleDetails:true, phoneWidth:phoneW}"&gt;&lt;/div&gt; if(window.matchMedia("(max-width:767px)").matches){ this.phoneW = true; } .phoneWidth{ width: 10...

beforeCreate:刚刚创建组件，数据还没有挂载，意思是还拿不到data中的数据。created:可以获取到data中的数据，也可以更改数据，这里更改数据不会触发updated函数beforeMount:虚拟dom已经创建完成，马上就要渲染，这里更改数据不会触发updated函数mounted:组件已经出现在页面上，数据及真实的dom都已经处理好了，事件已经挂载好了befor...

<div class="content-box"> <span v-for="(item,index) in classListChan" :key="index" :class="[{active: checkedGroup.indexOf(index) > -1},'class-item']" @click="changeStyle(index)"&...

1.在本地开发的时候 跨域用proxyTable反向代理。2.vue-cli项目打包给后台的时候，资源找不到，设置config文件夹下的index.js中的assetsPublicPath: './'。3.h5下拉刷新，上滑加载4.路径传参a.vuethis.$router.push({ path: `/homeworkSend`, ...

1.阅读源码：总结来说就是要按照框架的核心执行流程，找到核心函数，依次阅读。而不要试图每句都读懂。2.vue项目中仍然存在项目首屏优化，Webpack编译配置等问题，要关注vue项目性能方面的优化，使项目具有更高效的性能，更好的用户体验。*vue代码层面的优化*webpack配置层面的优化*基础的web技术层面的优化一.vue代码层面的优化1）.v-if与v-show的使用...

1.Vue基本指令v-model:实现数据的双向绑定v-once: 记录第一次的值，不随改变而改变v-if: 条件渲染指令 v-if="expression"expression返回的是bool值 dom树改变v-else: 与v-if配套使用 必须紧跟在v-if后面v-show: 条件渲染指令 v-show="expression"expression返回的是bool值 cs...