![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 58
vue、js
优惠券已抵扣
余额抵扣
还需支付
¥9.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
hello_world!
java coder
展开
-
vuex中commit和dispatch的区别
commit 和dispatch的区别在于commit是提交mutatious的同步操作,dispatch是分发actions的异步操作dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)如图...原创 2021-12-27 16:46:09 · 3344 阅读 · 0 评论 -
vuex里mapState,mapGetters使用详解
一、基本用法1. 初始化并创建一个项目vue init webpack-simple vuex-democd vuex-demonpm install2. 安装 vuexnpm install vuex -S3. 在 src 目录下创建 store.js 文件,并在 main.js 文件中导入并配置store.js 中写入import Vue from 'vue'//引入 vuex 并 useimport Vuex from 'vuex'Vue.use(Vuex)原创 2021-12-22 19:51:19 · 427 阅读 · 0 评论 -
windows 安装 elasticsearch
一、安装jdkElasticSearch是基于lucence开发的,也就是运行需要java jdk支持。所以要先安装JAVA环境。由于ElasticSearch 5.x 往后依赖于JDK 1.8的,所以现在我们下载JDK 1.8或者更高版本。下载JDK1.8,下载完成后安装。二、安装ElasticSearch1.ElasticSearch下载地址:https://www.elastic.co/downloads/elasticsearch2.下载安装包后解压3.原创 2021-11-01 18:47:29 · 139 阅读 · 0 评论 -
webpack、npm、node、nodejs之间的关系
简略:1、手撸HTML,CSS,JS的时代已经过去,前端产品,不再是手撸HTML了,他们会先安装node.js,用npm,用webpack,用yarn,用各种cli。2、vue-cli是一个vue项目的脚手架,可以快速的构建一个vue的基于npm的模块化项目,vue内部的打包机制其实还是借助webpack;3、webpack是一个打包工具,可以帮你把你通过模块化开发的项目 打包为简洁版的浏览器可识别的静态资源;4、npm包管理工具传统的HTML,CSS,JS管理太繁杂,模块化就是原创 2021-10-23 22:38:50 · 526 阅读 · 0 评论 -
如何搭建一个vue项目(完整步骤)
一、安装node环境 1、下载地址为:Node.js 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3、为了提高我们的效率,可以使用淘宝的镜像:淘宝 NPM 镜像 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。 检查是否安装成功: 二、搭建vue项目环境 1、全原创 2021-10-10 17:38:31 · 349 阅读 · 0 评论 -
JavaScript、ES5和ES6的介绍和区别
什么是JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。(好吧,概念什么最讨厌了)动态:在运行时确定数据类型。变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型。弱类:计算时可以不同类型之间对使用者透明地隐式转换,即使类型不正确,也能通过隐式转换来得到正确的类型。原型:新对象继承对象(作为模版),将自身的属性共享给新对象,模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性原创 2021-10-07 10:36:54 · 403 阅读 · 0 评论 -
从零开始学习D2-Admin,只要学习,任何时候都不晚!
最近开始学习D2-Admin,记录学习过程,以备以后查询!因为本机已经安装了node.js等基础环境,所以本文略过以上步骤。首先全局安装d2-adminnpminstall-g @d2-admin/d2-admin-cli我理解的这个全局安装就是将安装文件缓存在本机,之后创建项目就直接从此缓存创建,不知道理解的对不对。接下来,就是创建项目d2 create 项目名称 或者 d2 c 项目名称我的建议是使用简化版起始模板因为在完整版的基础上做减法,要比在简化版基础上做加法.原创 2021-06-29 21:28:22 · 1134 阅读 · 0 评论 -
理解vue之element-ui中的 <template slot-scope=“scope“>
如果有用过element-ui中的table组件,可能会发现有这么一个写法:在实际的使用过程中,这种用法当然不仅仅局限于此,其他的地方也会用到。到底这里有什么特别之处呢?我们看看普通的table用法:我们先说一说这个基础的用法里面,在el-table中,:data="tableData"是数据集,结构如下:那么对于每一个el-table-column,我们只需要使用prop="date",就可以将该列的数据绑定为该数组所有的对象中的“date”属性,我们可以理解为对于tabl原创 2021-06-25 09:37:32 · 1088 阅读 · 0 评论 -
用 async/await 来处理异步
https://www.cnblogs.com/yuanyingke/p/10280681.html原创 2021-06-25 09:08:08 · 109 阅读 · 0 评论 -
VUE基础回顾6
1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法。 <div ref = "box"></div> 在js中,这个原生会被存到this.$ref这个对象中,对应的键名就是为这个元素的ref属性设置的值 使用this.$ref.box访问这个元素 在组件中这个属性尤为有用。同一组件的代码可能在页面中出现多次,这从根本上不能为组件内的元素添加唯一类名而使用querySelector来选择该元素,相比之下re..原创 2021-02-19 17:11:05 · 134 阅读 · 0 评论 -
vue 父子组件的方法调用
$emit 子组件触发父组件的方法:<!-- 子组件 --><template> <div id="child"> <button @click="tryToParent">click</button> </div></template><script>export default { name: 'child', methods:{ ...原创 2021-02-19 16:44:48 · 211 阅读 · 0 评论 -
在Vue中使用async函数
在Vue中使用async函数async/await语法 在生命周期钩子上使用async函数 在methods中使用async函数 源代码async/await语法在ES7标准中新增了async和await关键字,作为处理异步请求的一种解决方案,实际上是一个语法糖,在ES6中已经可以用生成器语法完成同样的操作,但是async/await的出现使得用这样的方式处理异步请求更加简单和明白。下面是MDN上使用async/await语法的一个例子:function resolveAft.原创 2021-02-19 16:30:34 · 1386 阅读 · 0 评论 -
vue 深度watch,新值和老值打印出来结果一致,怎么解决?
watch的基本用法:watch:{watchData:function(value,oldValue){console.log(value,oldValue)}},但是如果需要监听的数据如下:data:()=>({tableAll:{tableData:[]}}),则需要用到watch中的deep属性。于是我们写成了这个:computed:{newTableData(){r...原创 2021-02-19 16:28:13 · 2623 阅读 · 0 评论 -
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
:id绑定 :id="‘a_'+index"输出的id为a_0,a_1。。。。。 1 2 3 <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id 1 2 3原创 2021-02-19 16:28:24 · 3181 阅读 · 0 评论 -
@click.native中 .native 的含义与使用
vue 当中的 @click.native.native--侦听组件根元素上的原生事件作用: 给组件绑定原生事件@click是我们在vue开发中经常用到的事件绑定,而@实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口也就是说,在处理DOM原生事件的场合中需要添加额外的标识符比如:如果使用router-link标签,加上@click事件,绑定的事件会无效,因为router-link的作用是单纯的路由跳转,会阻止click事件,如果不加.nativ.原创 2021-02-18 16:27:42 · 7388 阅读 · 0 评论 -
vue--显示和隐藏
一、v-if判断通常是对用户行为的判断用js来控制,则是使用if语句进行判断,而vue也提供了一个类似if语句的指令——v-if实现条件判断首先在数据项里设置变量 data() { return { content: "喵喵喵", play: true } }通过控制play的值就可以实现元素隐藏与显示在html文件中是这样写的:<template> <div id="root"原创 2021-02-18 16:05:13 · 1232 阅读 · 0 评论 -
JavaScript ES6 规范
JavaScript ES6 规范ES6 简介ECMAScript 6 简称 ES6,是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ECMAScript 和 JavaScript 的关系:前者是后者的语法规格,后者是前者的一种实现Babel:将ES6代码转为ES5代码新特性let、constlet 定义的变量不会被变量提升,const 定义的常量不能被修改,原创 2021-02-18 15:58:40 · 337 阅读 · 0 评论 -
echarts双向条形图案例
双向条形图图表效果如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>双向条形图案例 </title><!-- 引入 ECharts 文件 --><script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </sc..原创 2021-02-18 15:31:38 · 1076 阅读 · 0 评论 -
ECharts3基础教程(二)Option简单配置篇
上一篇中简单的介绍了,echarts3 生成图形的简单使用,可以看出其中最主要的在于 Option 的配置,下面简单的介绍一下其配置方法;以后会着重介绍并添加实例。先了解一下 Option 有哪些可配置项,如下图中带红色标签(如:title)指常用的,带黑色标签(如:animation)指动画修改,带蓝色标签(如:color)指样式属性,其它的一些是根据所画图形的要求需要而添加的,与图形类别相关。Option 的配置格式是 Json 格式,从上一篇中可以看出,整个图形的生成过程都..原创 2021-02-17 23:01:35 · 1053 阅读 · 0 评论 -
如何在vue中使用echart,以及使用的事项
019年10月23日进行更新,这里不再建议使用document.getElementById的方式获取元素的id,而是建议使用ref来代替。这样的话就会避免Echarts的图形容器还未生成就对其进行了初始化,产生如下的错误。1.安装echarts依赖 npm install echarts --save2.在main.js中全局中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts...原创 2021-02-17 23:00:18 · 1980 阅读 · 0 评论 -
vue中watch高级用法(deep和immediate)
一、handler方法和immdiate属性watch默认绑定,页面首次加载时,是不会执行的。只有值发生改变才会执行。如果想立即执行怎么办?1 watch:{2 name:{3 handler(newName,oldName){4 //执行代码5 },6 immediate:true //true就表示会立即执行7 }8 }二、deep属性如果是监听的是对象类型,当手动修改对象的某个属..原创 2021-02-17 22:59:06 · 3269 阅读 · 0 评论 -
vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <div> <button@click="toParent">点击传到父级</button> </d...原创 2021-02-17 22:55:29 · 177 阅读 · 1 评论 -
Vue-组件通信-props和$emit
props用于父传子用法父组件:在子组件标签中自定义一个属性(:content="")进行传值(content)<D :content="content"@getD="get"></D>子组件:在子组件中创建rops属性,然后在属性中添加接收的自定义属性名props:{ content:String, },操作props方法有很多,比如创建一个值存储,也可以用计算属性去操作,但我更推荐用监听.原创 2021-02-17 22:54:13 · 184 阅读 · 0 评论 -
d2-admin
https://d2-admin.netlify.app/#/indexhttps://gitee.com/d2-projects/d2-admin原创 2021-02-16 23:17:54 · 327 阅读 · 0 评论 -
如何设置npm镜像
https://www.cnblogs.com/shangyueyue/p/10042720.html一、临时使用npm --registry https://registry.npm.taobao.org install express二、永久使用npm configset registryhttps://registry.npm.taobao.org通过npm co...原创 2019-12-16 20:53:39 · 955 阅读 · 0 评论 -
vue项目中,后端返回文件流,axios发送post请求下载文件
https://www.cnblogs.com/rongjuan/p/9644676.htmlaxios拦截处理service.interceptors.response.use( response => { // 导出 const headers = response.headers if (headers['content-type'] === ...原创 2019-09-17 18:10:40 · 502 阅读 · 0 评论 -
echart 双向柱子
https://www.makeapie.com/editor.html?c=xSJpbfafAGvar myData = ['立案变更率', '一审案件陪审率', '发回重审率', '起再审率', '重审率'] var lastYearData = { 1: [89, 29, 22, 32, 55] } var thisYearData = { 1: [21, 38, 23, 39, 66] } var timeLineData ...原创 2021-02-02 22:38:59 · 154 阅读 · 0 评论 -
手把手教你用ECharts画柱状图
https://www.sohu.com/a/446161899_178408导读:柱状图主要用于表示离散数据的频数,也是一种基础可视化图。作者:王大伟来源:大数据DT(ID:hzdashuju)01 简单的柱状图在ECharts中制作柱状图也十分简单,通过将series中的type设置为bar即可,代码如下:option = {xAxis: {type:'category',data: ['Mon','Tue','Wed','Thu','Fri','Sat...原创 2021-02-02 22:33:40 · 1431 阅读 · 0 评论 -
[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件
2019-05-10[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件原理也很简单,子组件使用$emit来触发父组件的函数,子组件借助这个父组件的函数将数据传给父组件。父组件中方法:<template> <div>{{ChildData}}</div> <router-view @pushData="getChildData"></router-view></template>.原创 2021-02-01 23:47:50 · 3980 阅读 · 0 评论 -
VUE的学习文档&社区及学习书籍如下
介绍:Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。一、VUE学习文档&社区1、vue.js官方文档 https://cn.vuejs.org/2、vue router官方文档 https://router.vuejs.org/zh/3、vue-resource (axios) https://github.com/axios/axios4、原创 2020-08-28 11:45:30 · 910 阅读 · 0 评论 -
HTML 元素参考
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element#%E4%B8%BB%E6%A0%B9%E5%85%83%E7%B4%A0此页面列出了所有使用标签创建的HTML元素。它们已被按照功能进行分组,以便您更轻松地找到想要的内容。同时,侧边栏中也按照字母排序列出了所有元素。若想获知更多关于HTML元素、属性的基本信息,请查阅HTML 介绍中的相关内容。主根元素元素 描述 <html> HTML<h...原创 2020-08-28 10:24:18 · 164 阅读 · 0 评论 -
webpack——devtool里的7种SourceMap模式
我们先来看看文档对这 7 种模式的解释:模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释//@ sourceURL. source-map 生成一个SourceMap文件. hidden-source-map 和 source-map 一样,但不会在 bundle 末尾追加注释. inline-source-map 生成一个DataUrl形式的 SourceMap 文件. eval-source-map...原创 2020-05-19 11:23:17 · 719 阅读 · 0 评论 -
webstorm vue调试
调试编辑调试配置,新建JavaScript调试配置,并设置要访问的url,以及Remote url配置,如下图所示:在URL处填写: http://localhost:8080(古月: 本文章是8080端口, 具体的端口看自己的程序写的是监听哪一个)在src的Remote url处填写: webpack:///src保存好调试配置启动server,可以使用WebStorm npm scripts中双击start启动server, 也可以在命令行中执行命令npm run start启原创 2020-05-19 11:20:21 · 7030 阅读 · 0 评论 -
vue里ref ($refs)用法
ref 有三种用法: 1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 注意: 1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中.原创 2020-05-18 16:24:58 · 3980 阅读 · 0 评论 -
el-form的各种校验姿态
1.基础姿势/自定义姿势<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item la.原创 2020-05-18 16:22:19 · 658 阅读 · 0 评论 -
浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程
前序承接上一遍“通过webpack构建vue项目”构建的项目文件,简单阐述一下当我们构建完成后,vue项目中的index.html、main.js、App.vue、index.js的运行加载过程,以及首界面是如何出现的,逐步了解vue项目,针对刚开始接触vue,不知道vue项目如何加载的小白,大神请绕过。简介项目部署完成后的项目结构以及解释如下图所示项目运行项目的运行入口index.html为什么index.html是项目的入口以及为什么index.html加载后会继续加载main..原创 2020-05-18 16:20:57 · 1393 阅读 · 0 评论 -
VUE中watch用法
一、 watch是什么?监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。二、应用**当watch检测对象/数组的情况<template> <div> <p>a: {{a}}</p> <p>a: <input type="t.原创 2020-05-18 16:15:51 · 1321 阅读 · 0 评论 -
Vue之axios基础使用
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF安装npm安装$ npm install axios --save通过cdn引入<script src="ht原创 2020-05-18 16:14:03 · 270 阅读 · 0 评论 -
export default function 和 export function 的区别
// 第一种export default function crc32() { // 输出 // ...}import crc32 from 'crc32'; // 输入// 第二组export function crc32() { // 输出 // ...};import {crc32} from 'crc32'; // 输入上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,...原创 2020-05-18 16:12:39 · 372 阅读 · 0 评论 -
axios 发 post 请求,后端接收不到参数的解决方案
https://www.cnblogs.com/yiyi17/p/9409249.html问题场景场景很简单,就是一个正常 axios post 请求:axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd原创 2020-05-18 16:11:41 · 908 阅读 · 0 评论