1.前言我在做项目的过程中，需要去请求其他域名下的api，项目用的是Vue+SpringBoot前后端分离，所以直接在前端用axios发送请求，但是却报跨域的错误，请求失败。什么是跨域？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。2.问题初步解决在经过百度查找了多种解决方案后，终于通过设置Vue.config.js文件中的代理解决了这个问题。2.1 配置proxy代理假定你要请求的接口是 https://www.baidu...
http://www.runoob.com/w3cnote/vue2-start-coding.html https://cn.vuejs.org/v2/guide/instance.html https://segmentfault.com/q/1010000005790864/a-1020000005791335 http://www.runoob.com/w3cnote/vue2-start-coding.html原文：https://www.cnblogs.com/chendeming/p/8300975.html
网页开发过程中，尤其是在表单开发过程中，不可避免的会有各种各样的基础数据需要展示，供用户使用。例如，大家在办理信用卡时，经常需要填写各种表单数据，其中：性别（男、女）、学历（高中及以下、大专、本科、研究生及以上）、状态（启用、停用）等等，均属此类。日常软件开发过程中，通常习惯称之为配置项。在系统中配置后，提供相应的接口，方便在多个表单页重复使用。 网页或APP中初始化配置项，通常的做法是在页面初始化的...
let const var 源码分析 有了这个function,就可以new Vue({})了 生命周期函数(钩子函数)的源码 点谁谁变红 原文：https://www.cnblogs.com/t1314/p/12663867.html
什么是Ｖue生命周期？我们知道每个Vue 实例在被创建之前都要经过一系列的初始化过程。开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等这一系列的过程，我们称这是Vue的生命周期。它包含了一个实例从创建到销毁的整个过程，同时在这个过程中也会运行一些我们自己的事件函数，给予我们机会在一些特定的场景下添加自己的代码，这就是我们通常说的生命周期钩子。首先，让我们先看看完整的vue生命周期图（此图来源于...
使用axios首先要下载axios模块包npm install axios --save其次需要在使用的文件中引入import axios from ‘axios‘一、调用axios常见两种方法(此处使用easy-mock模拟数据接口)：//方法1axios({method: ‘post‘,url:‘http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios‘}).then((response)=>{console.log(response.data)}).catch((error)=>{console.log(error)})//方法2axios.post(‘http://easy-mock.c...
前端Vue后端Django如何使用csrf? 后端Django在settings.py中将注释掉的csrf中间件取消注释（如果之前注释过）‘django.middleware.csrf.CsrfViewMiddleware‘,前端Vue的main.js中加上如下代码： import Axios from ‘axios‘let getCookie = function (cookie) {let reg = /csrftoken=([\w]+)[;]?/greturn reg.exec(cookie)[1]}Axios.interceptors.request.use(function(config) {// 在post请求前统一添加X-CSRFToken的header信息l...
这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。 使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。一、下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图：...
插件使用通过导出一个含有install方法的对象，即可作为插件使用，install方法始终接收一个app对象--createVue的返回值，所以app即是全局vue实例。配置全局属性// properties.js export default {install(app) {app.config.globalProperties.$test = {a: "aa",};}, }; // main.js import properties from "@/plugins/properties.js"; app.use(properties) 配置全局组件// components/index.js import HelloWorld from "./HelloWorld...
先使用vue cli构建一个自己的vue项目1.npm i -g vue-cli2.vue init webpack sell (sell是你的项目名)3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N）4.npm i (这个是安装项目的依赖包)5.npm run dev（启动你的vue项目） 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件6.webpack sell默认没有安...
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中； 先来第一个例子看一看<template><section><div ref="hello"><h1...
1.获取token值后台有接口调用直接返回token值//请求后台拿七牛云tokenasync getQiniuToken() { //tokenlet uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {method: "get",});console.log(uploadtoken);//赋值保存在本地this.QiniuData.token= uploadtoken.data.token }, 2.贴上页面代码<template><div class="upload-info"><div><el-uploadclass="upload-pic":action="domain":data="QiniuData":on-rem...
<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="root"><!-- 监听原生事件 --><child @click.native="ZGZ"></child></div><script>Vue.component(‘child‘,{template:‘<div >Child<div/>‘,})var vm=new Vue({el:"#root",methods:{ZGZ:function(){alert("666")}}})</script></body></html> 原文：https://ww...
需求： 产品经理在列表页（几千个数据，n个page）点击某一项进去到详情页后，再返回到列表页发现页面回到了第一页，找不到之前的查看的是哪一条了，为了方便咋公司产品经理，返回列表页时需要记住之前的page页解决思路： 在列表页点击某一条进入详情页的时候，触发当前页面的keep-alive缓存页面解决步骤：1. 设置路由 需要缓存的路由设置 keepAlive : true, 不需要缓存的路由设置 keepAlive: false router index.js[{path...
new Vue 发生了什么 new vue 我们从入口分析，我们new 一个实例化对象，是由Funcction实现的，来看一下源码，在src/core/instance/index.js 中。 import { initMixin } from‘./init‘import { stateMixin } from‘./state‘import { renderMixin } from‘./render‘import { eventsMixin } from‘./events‘import { lifecycleMixin } from‘./lifecycle‘import { warn } from‘../util/index‘functionVue (options) {if (proc...