![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 209 阅读 · 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 · 186 阅读 · 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 · 388 阅读 · 0 评论 -
Axios封装
Axios封装 封装 network下的request.js import 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 · 88 阅读 · 0 评论 -
vuex和devtools
Vuex 简介 官方解释:Vuex是一个专门为Vue.js应用程序开发的状态管理模式 1.它采用集中式储存管理应用的所以组件的状态,并且相应的规则保证状态以一种可预测的方式发生变化 2.Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能. 应用场景 1.在大型的项目中,遇到的多个状态,在多个界面间得...原创 2020-03-08 14:59:46 · 862 阅读 · 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 · 85 阅读 · 0 评论 -
vue-Promise的all方法
vue-Promise 简介 1.promise是异步编程的一种解决方案 2.什么情况下会来处理异步事件? 1>一种很常见的场景就是网络请求 2>我们封装网络请求的函数,因为不能立即拿到结果,所以不能简单的像3+4=7一样直接返回结果 3>所以我们往往传入一个函数,在数据请求成功时,将数据从回调函数中拿出来 4>如果只是简单的网络请求,那么这种方案不会给我们带来很大的麻烦 ...原创 2020-03-07 15:22:36 · 7542 阅读 · 0 评论 -
给大家推荐个好玩的东西
阿里巴巴矢量图原创 2020-03-07 08:21:27 · 342 阅读 · 0 评论 -
(cheer you up)vue-router重点来袭
vue:Router路由 认识路由 简单认识 1.网络工程中的术语 2.路由(维基百科):就是通过互联网把信息从源地址传输到目的地址的活动. 后端路由 后端处理url和页面之间的映射关系.把数据返回到前端.然后进行渲染. 本人后端开发工程师不在解释. 前端路由 前后端分离技术ajax阶段:后端只提供数据支持,不进行数据的渲染.前端发起ajax异步请求,然后请求后台的数据,然后再通过js进行dom...原创 2020-03-06 18:29:30 · 580 阅读 · 0 评论 -
vue-cli脚手架3创建项目
vue脚手架3创建项目 1.创建项目 vue create myproject_name 2.选择配置方式 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 · 1034 阅读 · 0 评论 -
vue:Runtime-only和Runtime-compiler的区别
vue:Runtime-only和Runtime-compiler的区别 主要的区别在main.js Runtime-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 · 283 阅读 · 0 评论 -
vue脚手架创建项目细节及问题
Vue-Cli 细节及问题 使用脚手架创建项目 1.创建项目 vue init webpack 项目名称 2.project name Project name(VueLession04) vuelession04 3.项目描述 Project description(A. Vue.js project) vuelession04 4.作者,回车 Author(wkj <1547788...原创 2020-03-05 07:11:54 · 258 阅读 · 0 评论 -
vue-cli脚手架2搭建
vue脚手架 vue-cli简介 1>简单的写几个Demo程序就不需要Vue-Cli 2>开发大型项目,那么你需要,并且必然需要使用vue-cli a.vue.js开发大型项目需要使用,我们需要考录代码的目录结构,项目的结构和部署,热加载,代码单元测试, b.如果手动配置来完成,效率太低,所以借助脚手架帮我们完成这些工作 3>cli含义: a.Conmand-line...原创 2020-03-04 15:09:46 · 212 阅读 · 0 评论 -
vue配置文件分离
vue配置文件分离 1.安装插件webpack-merge npm install --save-dev webpack-merge 2.创建要分离出的配置信息文件比如:共有的base.config.js 注意:path路径 const path = require('path'); module.exports = { entry: './src/main.js', outpu...原创 2020-03-04 12:46:34 · 507 阅读 · 0 评论 -
vue-webpack搭建本地服务器
vue搭建本地服务器 1.安装webpack-dev-server npm install webpack-dev-server@版本号 2.配置webpack.json.js module.exports = { ... devServer:{ contentBase: './dist', inline: true, port: ...原创 2020-03-04 11:48:04 · 204 阅读 · 0 评论 -
使用vue配置过程
使用Vue配置过程 最终的目的是能在src文件下使用.vue文件开发项目 安装vue有三种方式: 方式1. npm install vue --save 方式二: CDN直接应用 方式三: 直接下载应用 问题: 解决Runtime-only和Runtime-compiler: Runtime-only:代码中不可以有任何得tenplate Runtime-compiler:代码中可以有templ...原创 2020-03-02 14:55:01 · 207 阅读 · 0 评论 -
vue--es6转es5打包
Vue–Es6转Es5 核心部署:babel-loader 部署过程: 首先是加载Es5 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 然后是配置webpack.config.js const path = require('path'); module.exports = { entry: '...原创 2020-03-02 11:31:50 · 6026 阅读 · 0 评论 -
vue文件管理
vue图片管理 图片加载 1.加载url-loader npm install --save-dev url-loader 2.配置webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { ...原创 2020-03-01 21:27:57 · 3033 阅读 · 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 · 89 阅读 · 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 · 176 阅读 · 0 评论