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
什么是Vue生命周期?我们知道每个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...