vue | 易学教程

【Vue】Vue 中解决跨域问题

阅读更多关于【Vue】Vue 中解决跨域问题

背景跨域问题，来源于浏览器中的同源策略。同源（或同一个域）是两个页面具有相同的协议，主机和端口号。在前后端分离的项目中，两个页面（即访问端与服务端）通常是非同源的，因此会出现跨域时，浏览器阻止一个域的访问，导致取不到后端的数据。本文只讨论博主在 Vue 的学习过程中如何在前端解决跨域问题，更多跨域解决方案参考这篇文章，感谢该博主的分享！个人理解，如有错误，还请评论区多多指教！问题来源在尝试获取新型肺炎疫情信息，并将其制作成表格和地图来显示的时候，发现在前端访问接口时会因为跨域问题而取不到数据。（后面会编写关于如何制作新型肺炎疫情的信息展示） 1、修改配置文件中的接口(示例：请求腾讯官方新型肺炎疫情信息接口）打开 config -> index.js 的如下位置，添加 proxyTable，各配置项含义如下： target：要访问的接口的基础地址 changeOrigin：是否可以跨域 secure：是否进行 https 验证 pathRewrite：将 api 替换成 ' ' 中的值 2、在组件调用中，使用代理接口代替在组件中调用时，用 api 替代 target 3、遗留问题在使用了热门的后台管理框架 vue-element-admin 之后，无法采用如上方式来解决跨域问题，搜集了非常多的资料也未能解决。还请懂该问题的大神评论赐教！感激不尽。

Vue中的同步调用和异步调用

阅读更多关于 Vue中的同步调用和异步调用

Promise实现异步调用异步调用，增加a、b两个方法，并在mounted中调用。观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。观察客户端，并没有按照方法执行的顺序输出，使用Promise实现了异步调用。 async /await方法实现同步调用使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果观察服务端控制台发现是按照a，b的调用顺序输出1，2，使用async/await实现了同步调用。来源： CSDN 作者： dustdawn 链接： https://blog.csdn.net/qq_37808895/article/details/104628448

Vue项目中IE11兼容性问题记录

阅读更多关于 Vue项目中IE11兼容性问题记录

1. 判断IE浏览器版本 // 获取IE版本 function IEVersion() { // 取得浏览器的userAgent字符串 var userAgent = navigator.userAgent; // 判断是否为小于IE11的浏览器 var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否为IE的Edge浏览器 var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11; // 判断是否为IE11浏览器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1; if (isLessIE11) { var IEReg = new RegExp('MSIE (\\d+\\.\\d+);'); // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！ IEReg.test(userAgent); // 取正则表达式中第一个小括号里匹配到的值 var IEVersionNum = parseFloat(RegExp['$1']);

Vue.js 自定义指令

阅读更多关于 Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo"> <p>元素默认无焦点</p> <input type="text"> <p>使用v-focus的元素将自动获得焦点</p> <input type="text" v-focus> </div> <script> //注册全局指令v-focus Vue.directive("focus", { //当元素被插入到DOM中 inserted: function (el) { el.focus() } }) // 创建根实例 new Vue({ el: '#demo' }) </script> 指令定义函数提供了几个钩子函数（可选）： bind : 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

Vue组件库

阅读更多关于 Vue组件库

滴滴cube-ui https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 有赞开源Vant（适合做商城） https://tech.youzan.com/vant-1-release/?from=timeline Radon-UI https://luojilab.github.io/radon-ui/#!/ WD-UI https://wdfe.github.io/wdui/#/components/dialog https://github.com/jrainlau/vue-donut zanUI https://www.youzanyun.com/zanui/vant#/zh-CN/component/quickstart 滴滴移动端组件库 cube-ui https://didi.github.io/cube-ui/#/zh-CN Vux (这个大家都知道的) https://vuxjs.gitbooks.io/vux/content/ vue-strap （bootstrap 的 Vue 版 1.0的） http://yuche.github.io/vue-strap/ n3-components（电脑端UI,貌似刚出来的,没下面几个好看） https://n3-components.github.io/N3

使用vue-cli脚手架创建项目

阅读更多关于使用vue-cli脚手架创建项目

ue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。 GitHub地址是： https://github.com/vuejs/vue-cli 一、安装Nodejs 首先需要安装Node环境。安装完成之后，可以在命令行工具中输入 node -v 和 npm -v ,如果能显示出版本号，就说明安装成功。二、安装vue-cli 安装好node之后，我们就可以直接全局安装vue-cli: npm install -g vue-cli 使用这种方式可能会安装比较慢，推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了) cnpm install -g vue-cli 如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存安装完成后，可以使用vue -V(大写的V)查看vue的版本。如果接下来你不知道要干嘛，那么你可以在命令行中输入 vue -help 它会有以下提示：懂点英语的意思应该能看到提示的信息，聪明的你此时接下来执行vue list看看有哪些可用的官网模板： vue list Vue.js官方提供了两种类型的模板项目：基于vue cli和browserify的项目模板基于vue cli和webpack的项目模板 vue

Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

阅读更多关于 Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

1、绑定监听@click: （以监听click为例，其他如keyup，用法类似） v-on:click="fun" @click="fun" @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <button @click="test3('abcd', $event)">test3</button> methods: { test1(eve) {//test1函数没有参数，默认传递 $event alert(eve.target.innerHTML) //test1 }, test2 (msg) { //test1函数有参数，传递该参数 alert(msg) // abc }, test3 (msg, event) { //有参数，如果想获取到enevt，则函数中需要写 $event alert(msg+'---'+event.target.textContent) // abcd---test3 } } 2、@click.stop与@click.prevent @click.stop 阻止事件冒泡 <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis"

Vue组件自定义事件$emit()报错

阅读更多关于 Vue组件自定义事件$emit()报错

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。我在自定义事件的时候，使用了事件名：cDoing 然后程序报错无法执行后来改成cdoing就结局了。也就是说这个事件名是不可以包含大写字母的，嗯，反正我是这么理解的！！！代码大概是这个样子的 this.$emit("cdoing") 来源： https://www.cnblogs.com/chenyingying0/p/12401181.html

Vue.js 组件

阅读更多关于 Vue.js 组件

全局组件：注册一个全局组件语法 Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件 <tagName></tagName> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff} .pink{background:pink} </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="demo">  <cyy></cyy> </div> <script> //注册组件 Vue.component("cyy",{ template:"<p>这是cyy的御用组件</p>" }) new Vue({ el:'#demo' }); </script> 局部组件： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <style> .base{color:#fff}

windows手动安装npm教程即vue

阅读更多关于 windows手动安装npm教程即vue

1、在使用之前，先类掌握3个东西，明白它们是用来干什么的： npm: nodejs 下的包管理器。 webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。 2、nodejs下载网址： https://nodejs.org/en/ 【如果嫌下载的慢，可以下载其他网站上的，别人有现成的，下载的比较快】 3、下载好后，双击安装： 4、默认，下一步： 5、接受协议： 6、选择安装路径： 7、会默认自己添加环境变量： 8、接下去一路“next”，最后点击finish 9、安装好后，对应的各个文件的作用： 10、cmd打开终端： 11、检查是否正常 12、再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录： 13、然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"

订阅 vue