Vue.js

人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。 你好，我是梦阳辰，期待与你相遇！ 文章目录 01.概述 02.axios请求方式 使用vue-axios(重点) axios模块封装（重点） 03.axios拦截器 01.概述 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios中文文档 Vue中发送网络请求有非常多的方式。那么,在开发中,如何选择呢? 选择一: 传统的Ajax是基于XMLHttpRequest（XHR) 为什么不用它呢? 非常好解释,配置和调用方式等非常混乱. 编码起来看起来就非常蛋疼. 所以真实开发中很少直接使用,而是使用jQuery-Ajax 选择二： 在前面的学习中,我们经常会使用jQuery-Ajax相对于传统的Ajax非常好用. 为什么不选择它呢? 首先,我们先明确一点:在Vue的整个开发中都是不需要 使用jQuery 了. 那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗? jQuery的代码1w+行. Vue的代码才1w+行. 完全没有必要为了用网络请求就引用这个重量级的框架. 选择三:官方在Vue1.x的时候,推出了Vue-resource.>Vue-resource的体积相对于jQuery小很多.>另外Vue-resource是官方推出的.

这里有一篇挺好的: https://www.cnblogs.com/sysuhanyf/p/7454530.html 来源： oschina 链接： https://my.oschina.net/u/3029829/blog/2120655

//父页面 <keep-alive> <router-view v-if="$route.meta&&$route.meta.keepalive"></router-view> </keep-alive> <router-view v-if="!($route.meta&&$route.meta.keepalive)"></router-view> 　　 //router router 添加meta属性和标识符 { path:'list', component: () => import('./views/staff/total_list.vue'), meta:{ keepalive:true } } 　　 //组件记录滚动条位置 //mounted 挂载时添加滚动事件 this.container=document.getElementById('container'); this.container.addEventListener('scroll', this.handleScroll); //methods handleScroll(){ this.scroll = this.container.scrollTop; } //activated 激活时赋值滚动条位置 activated() { this.container=document.getElementById(

1.需求：iview的table组件提供了自定义列模板的方式，使用slot-scop，解构出我们需要的数据项，极大方便了我们的开发，现在我们用vue3.x的v-slot来升级这种自定义列模板的写法。 2.子组件,slot上命名每一项的数据的name，并定义属性传入对应的数据项 < template > < ul > < li v - for = "item in data" > < slot : name = "item.slot" : row = "item" > < / slot > < / li > < / ul > < / template > < script > import { ref } from 'vue' export default { props : { data : { type : Array , default : ( ) => [ ] } } , } < / script > 3.父组件，根据v-slot:xxx来获取xxx项的插槽并解构对应属性获取该项数据 < template > < div > < test4 : data = "data1" > < template v - slot : name1 = "{row}" > < span > { { row . name } } < / span > < / template > < /

昨天搭建基础的Vue环境,看的视频比较老了,装的还是vue-cli ,现在官网提供安装是@vue/cli ,安装的时候报错了 $ npm install -g @vue/ cli npm WARN deprecated core -js@ 2.6 . 11 : core-js@< 3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@ 3 . 然后就根据要求装高版本呗 npm install --save -g core-js@^ 3 也提示成功了 然后再安装 ，， 姐姐出的问题怎么能一个小命令就能解决的，不出所料，果然还报同样的错 npm cache clean --force 缓存也清理了，，还是不行 脑海突然灵光一现，我一个前端大佬说我的npm不行，得用cnpm, 具体可以参照这个链接安装 https://blog.csdn.net/wjnf012/article/details/80422313 npm install -g cnpm --registry=https: // registry.npm.taobao.org 然后

因为我用了vue-electron 所以启动的时候是因为vue加载慢 用了官方文档，点击桌面应用后，等待2秒钟才打开程序，太慢了。 下面这个是官方文档的 const {BrowserWindow} = require('electron') let win = new BrowserWindow({show: false}) win.once('ready-to-show', () => { win.show() }) 所以进行检测，发现这个文件慢了 明白了以后，就直接用js load事件即可，注意这里还没有载入vue哦。 来源： oschina 链接： https://my.oschina.net/u/554046/blog/2245068

每日前端夜话 第284篇 翻译： 疯狂的技术宅 作者：Mokhtar Ali Ebrahim 来源：likegeeks 正文共： 2403 字 预计阅读时间：7分钟 我们都想通过共享托管来省钱，但是对于某些网站，VPS 甚至专用计划都是不可避免的。如果你不得不做一个更高级的计划，这可能意味着你的网站正在成长并获得更多的流量——因此，付出的财务成本将是值得的。 但是，你如何计划该财务成本，并尽可能降低呢？首先，你需要知道网站的目标。 你网站的目标是什么？ 为了找出最适合你自己的网络托管计划预算，确定你网站的目标是很非常重要的。无论是太复杂还是不够可扩展，最终都会为次付出代价。 如果你的目标是网站… 在家人和朋友中吸引少量粉丝 作为当地企业的联系点 展示个人的作品或简历 …那么 共享托管（2.75 - 15.00 美元/月） 绰绰有余。但是，如果你希望该网站： 处理中型企业的流量需求 有足够的安全性来处理电子支付 承载成功和活跃的博客 随着流量的增加，保持良好的页面速度和图像加载时间 …你需要升级到 VPS（5 – 80美元/月） 。 唯一需要为 专用计划（80 – 730美元/月） 掏钱的网站是： 面向拥有大量跨国受众并产生大量访问量的公司的页面 电子商务需求特别大的网站，例如存储大量高分辨率产品图片 如果你现在经营的是一个只有几页的小型网站，但目标是最终扩大规模并成为高流量

我所要讲述的是，基于.net core3.1环境下的webapi项目，如何去使用axios对接前端的vue项目 既然谈到axios，这里贴出axios的官方文档地址： http://www.axios-js.com/zh-cn/docs/ 首先是前端部分进行设置 第一步，在vue项目中安装axios 在vs code的终端中输入命令 npm install axios 稍等片刻，即可完成安装 第二步，构建axios的测试api 首先需要在main.js中，引入前面安装的axios 然后在某个组件的钩子函数里，写入以下代码 在组件被创建的时候，向后台发送get请求，获取数据。如果对axios的api不太熟悉的话，可以转到 axios的官方文档 当然我也为新手提前准备好了截图，供查阅 上面这张图片来自于axios的官方文档 前端部分就此完成 接下来是配置.net core webapi项目 其实后端的配置极其简单，只需启用cors，然后做一些服务注入和中间件的添加即可 在微软的文档中也有对这部分给出了相关的注解，这里可以选择查阅 微软的官方文档 第一步，服务注入 在startup.cs中加入以下代码 readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins"; #region cors services

在 Vue.js 中制作自定义选择组件 疯狂的技术宅 前端先锋 翻译：疯狂的技术宅 作者：Lane Wagner 来源：hackernoon 正文共：2337 字 预计阅读时间：7 分钟 定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件。 Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML 1<template> 2 <div 3 class="custom-select" 4 :tabindex="tabindex" 5 @blur="open = false" 6 > 7 <div 8 class="selected" 9 :class="{open: open}" 10 @click="open = !open" 11 > 12 {{ selected }} 13 </div> 14 <div 15 class="items" 16 :class="{selectHide: !open}" 17 > 18 <div 19 class="item" 20 v-for="(option, i) of options

目录 1，NodeJS 2，Vue CLI 3，Vue UI 4，后台接口反向代理 5，vue-devtool s 1，NodeJS 访问 nodejs.org 下载。这是必不可缺的环境之一。 下载最新的 LTS 版本。LTS 代表长期维护，通常比较稳定。 2，Vue CLI vue-cli 是从头搭建 vue 工程的脚手架工具，通过该工具，可以简化工程环境的配置。vue-cli 的官网地址为： cli.vuejs.org/zh/ 。 使用命令安装： npm install -g @vue/cli # OR yarn global add @vue/cli 安装后检查版本： vue -V 最新版本在 3 以上： 3.3.0 安装 VUE CLI 之后，就可以使用create指令创建项目了： vue create hello-world 除了命令行创建，还可以使用 VUE UI 创建。 如上所示，在创建过程中，涉及到这些工程特性： Babel，必选，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包 Typescript，微软开发的JS的强类型版本，通过Babel能够编译成JavaScript，可选 PWA，Progressive web apps，渐进式Web 应用，一般不选 Router，路由组件，用于页面跳转，多页面程序必选，单页面不选 Vuex