Vue
两人走
Long long ago.I bagan to learn java, because of her.As your think,i love her very much.So i must make a lot of money.I want to have a family with her.
When I was in college, I found programming very profitable, so I began to try to contact it. The more I contacted it, the more I liked it.
展开
-
js时间格式转换
前端时间格式的转换 DateFormat(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } const o = { 'M+': date原创 2021-08-19 16:37:45 · 232 阅读 · 0 评论 -
Vuex和Axios企业级实战
前端AXIOS网络请求实战网络请求工具的封装import axios from 'axios'import router from '../router'const service = axios.create({ baseURL:'' /*store.state.migrateInfo.region == "sh" ? process.env.VUE_APP_API_ROOT : "h1"*/, //api的base_url timeout: 60000, headers: {原创 2021-06-01 15:42:44 · 208 阅读 · 2 评论 -
EChart折线图实战
Echart多图例折线图实例前端前端我们需要提供的是一个div容器,使用id选择器,给一定的宽度和高度,宽度用来固定X轴宽度,高度用来显示Y轴 <template> <Row style="margin-top: 25px; margin-left: 10px" :gutter="40"> <RadioGroup v-model="lineStatisticsType" type="button原创 2020-11-23 15:07:13 · 412 阅读 · 0 评论 -
Axios封装
Axios封装封装network下的request.jsimport axios from 'axios'export function request(config) { const instance = axios.create({ baseURL:'http://123.207.32.31:8000', timeout: 5000 }); return...原创 2020-03-09 08:20:06 · 91 阅读 · 0 评论 -
vuex和devtools
Vuex简介官方解释:Vuex是一个专门为Vue.js应用程序开发的状态管理模式1.它采用集中式储存管理应用的所以组件的状态,并且相应的规则保证状态以一种可预测的方式发生变化2.Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能.应用场景1.在大型的项目中,遇到的多个状态,在多个界面间得...原创 2020-03-08 14:59:46 · 881 阅读 · 0 评论 -
vue-父子组件通信
vue-父子组件间的数据传递父传子props的使用1.父组j件定义数据2.子组件定义props,具体的做法一般是例如:props:{msg:{type:String,default:‘默认数据’}…};3.父组件使用子组件把数据传递过去,通过v-bind;具体用法:<!DOCTYPE html><html lang="en"><head> ...原创 2020-03-08 09:37:45 · 90 阅读 · 0 评论 -
vue-Promise的all方法
vue-Promise简介1.promise是异步编程的一种解决方案2.什么情况下会来处理异步事件?1>一种很常见的场景就是网络请求2>我们封装网络请求的函数,因为不能立即拿到结果,所以不能简单的像3+4=7一样直接返回结果3>所以我们往往传入一个函数,在数据请求成功时,将数据从回调函数中拿出来4>如果只是简单的网络请求,那么这种方案不会给我们带来很大的麻烦...原创 2020-03-07 15:22:36 · 7589 阅读 · 0 评论 -
给大家推荐个好玩的东西
阿里巴巴矢量图原创 2020-03-07 08:21:27 · 352 阅读 · 0 评论 -
(cheer you up)vue-router重点来袭
vue:Router路由认识路由简单认识1.网络工程中的术语2.路由(维基百科):就是通过互联网把信息从源地址传输到目的地址的活动.后端路由后端处理url和页面之间的映射关系.把数据返回到前端.然后进行渲染.本人后端开发工程师不在解释.前端路由前后端分离技术ajax阶段:后端只提供数据支持,不进行数据的渲染.前端发起ajax异步请求,然后请求后台的数据,然后再通过js进行dom...原创 2020-03-06 18:29:30 · 608 阅读 · 0 评论 -
vue-cli脚手架3创建项目
vue脚手架3创建项目1.创建项目vue create myproject_name2.选择配置方式Vue CLI v4.2.3? Please pick a preset: (Use arrow keys)> default (babel, eslint) Manually select features一般选第二个自定义的3.选择配置项(选中点空格)? Ple...原创 2020-03-05 13:28:10 · 1059 阅读 · 0 评论 -
vue:Runtime-only和Runtime-compiler的区别
vue:Runtime-only和Runtime-compiler的区别主要的区别在main.jsRuntime-compiler的main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf...原创 2020-03-05 10:56:56 · 310 阅读 · 0 评论 -
vue脚手架创建项目细节及问题
Vue-Cli 细节及问题使用脚手架创建项目1.创建项目vue init webpack 项目名称2.project nameProject name(VueLession04) vuelession043.项目描述Project description(A. Vue.js project) vuelession044.作者,回车Author(wkj <1547788...原创 2020-03-05 07:11:54 · 266 阅读 · 0 评论 -
vue-cli脚手架2搭建
vue脚手架vue-cli简介1>简单的写几个Demo程序就不需要Vue-Cli2>开发大型项目,那么你需要,并且必然需要使用vue-cli a.vue.js开发大型项目需要使用,我们需要考录代码的目录结构,项目的结构和部署,热加载,代码单元测试, b.如果手动配置来完成,效率太低,所以借助脚手架帮我们完成这些工作3>cli含义: a.Conmand-line...原创 2020-03-04 15:09:46 · 221 阅读 · 0 评论 -
vue配置文件分离
vue配置文件分离1.安装插件webpack-mergenpm install --save-dev webpack-merge2.创建要分离出的配置信息文件比如:共有的base.config.js注意:path路径const path = require('path');module.exports = { entry: './src/main.js', outpu...原创 2020-03-04 12:46:34 · 521 阅读 · 0 评论 -
vue-webpack搭建本地服务器
vue搭建本地服务器1.安装webpack-dev-servernpm install webpack-dev-server@版本号2.配置webpack.json.jsmodule.exports = { ... devServer:{ contentBase: './dist', inline: true, port: ...原创 2020-03-04 11:48:04 · 228 阅读 · 0 评论 -
使用vue配置过程
使用Vue配置过程最终的目的是能在src文件下使用.vue文件开发项目安装vue有三种方式:方式1.npm install vue --save方式二:CDN直接应用方式三:直接下载应用问题:解决Runtime-only和Runtime-compiler:Runtime-only:代码中不可以有任何得tenplateRuntime-compiler:代码中可以有templ...原创 2020-03-02 14:55:01 · 215 阅读 · 0 评论 -
vue--es6转es5打包
Vue–Es6转Es5核心部署:babel-loader部署过程:首先是加载Es5npm install --save-dev babel-loader@7 babel-core babel-preset-es2015然后是配置webpack.config.jsconst path = require('path');module.exports = { entry: '...原创 2020-03-02 11:31:50 · 6066 阅读 · 0 评论 -
vue文件管理
vue图片管理图片加载1.加载url-loadernpm install --save-dev url-loader2.配置webpack.config.jsmodule.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { ...原创 2020-03-01 21:27:57 · 3066 阅读 · 0 评论 -
webpack
Vue之WebPack模块开发要解决的问题是模块的导入和导出问题1.CommonJS进行模块开发示例:导出module.export = { flag: true, add(num1,num2){ return num1 + num2; }}导入let {flag,add} = require('./path')或者let arg_...原创 2020-02-28 10:03:42 · 107 阅读 · 0 评论 -
Vue作用域插槽
Vue作用域插槽编译作用域的理解:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>编译作用域</title> <script src="https://cdn.jsdelivr.net/npm/vue/...原创 2020-02-27 00:45:58 · 199 阅读 · 0 评论