Vue笔记
个人技术学习路线、笔记,整理分享
是是非非iiee
这个作者很懒,什么都没留下…
展开
-
Vue笔记(十六)—— Vue PageHelper(SpringBoot)实现后台分页
前端开发请直接跳到第4歩1.pom引入依赖:<!--导入pagehelper相关依赖--><dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>...原创 2020-04-22 09:16:19 · 1195 阅读 · 0 评论 -
Vue笔记(十五)—— Vue 结合router文档实现登录页跳转首页,同级和子级视图组件替换
1.router声明(index.js)增加登录拦截,同时更新路由嵌套,更新部分代码如下:export default new Router({ routes: [ // HelloWorld { path: '/', name: 'HelloWorld', component: HelloWorld, }, // 登录 ...原创 2020-04-22 09:13:49 · 1541 阅读 · 0 评论 -
Vue笔记(十四)—— Vue eventBus自定义组件间值传递及状态过渡
1.新建eventBus.js:import Vue from 'vue';export default new Vue();2.自定义组件引入:// 引入自定义组件间传递依赖js import eventBus from '../../static/eventBus.js';3.声明/传值方:data() { return { isCollapse...原创 2020-04-17 09:43:10 · 571 阅读 · 0 评论 -
Vue笔记(十三)—— Vue axios 跨域登录 SpringSecurity 图片验证码 Session空问题解决
基本跨域问题:后台改动:不同框架不同版本多种方式,网上也各种方案,所以这里只说我的,我的项目是SpringBoot2.x+SpringSecurity,直接改动SpringSecurity...// 请求伪造防护功能关闭.csrf().disable().cors()Vue改动:详见Vue axios异步、跨域请求及proxyTable无效问题详解进入正题:问题场景:通过跨...原创 2020-04-13 23:05:36 · 1371 阅读 · 0 评论 -
Vue笔记(十二)—— Vue脚手架结合ElementUI文档引入ElementUI组件步骤详解
1.cd 项目目录2.npm i element-ui3.main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'Vue.use(ElementUI)new V...原创 2019-09-30 08:55:34 · 696 阅读 · 0 评论 -
Vue笔记(十一)—— Vue axios 传 字符串/键值对 后台@RequestParam接收为空 及使用application/x-www-form-urlencoded问题详解
直接上相关代码:let data = { "userId": userId,};let config = { headers: { "Content-Type": "application/x-www-form-urlencoded", },};_this.$axios.post(url, _this.qs.stringify(data), config).t...原创 2019-09-23 17:46:29 · 2888 阅读 · 0 评论 -
Vue笔记(十)—— Vue 引入自定义JS方法/函数步骤详解
接上篇:Vue 引入自定义JS步骤详解1.同样新建JS文件并引入,JS文件代码如下:export default { methods: { youMethod(param) { }, },}2.模版引入:import CommonUtils from "../../static/CommonUtils.js"3.调用:if (...原创 2019-09-08 17:13:46 · 4145 阅读 · 4 评论 -
Vue笔记(九)—— Vue 自定义子组件向自定义父组件传值详解
接上篇:Vue 子组件利用父组件数据/props初始化data及问题详解直接上代码:1.自组件相关代码(this.$emit()):methods: { /** * 弹窗关闭 */ ok() { this.$emit('toParentSaveUser', this.userDetailOfParent) // 关联名称和传递参数 }, /*...原创 2019-09-08 15:35:48 · 328 阅读 · 0 评论 -
Vue笔记(八)—— Vue 子组件利用父组件数据/props初始化data及问题详解
接上篇:Vue 自定义父组件向自定义子组件传值详解props: ['initialCounter'],data: function () { return { counter: this.initialCounter }}这是官网给出的示例,对子组件改写,部分代码如下:<Form> <FormItem> <Label...原创 2019-09-08 14:56:07 · 4084 阅读 · 0 评论 -
Vue笔记(七)—— Vue 引入自定义JS步骤详解
1.创建自定义JS:/my-project/static/xxx.js2.xxx.js增加export供外部调用:let OPT_TITLE = { "create": "新建", "update": "编辑", "delete": "删除", "detail": "详情", "select": "查询",};export { OPT_TITLE,...原创 2019-09-03 08:38:24 · 2984 阅读 · 0 评论 -
Vue笔记(六)—— Vue 自定义父组件向自定义子组件传值详解
1.自定义子组件,示例代码如下:<template> <div> <Form> <FormItem> <Label> 用户名 </Label> <Input type="text" placeholder="请输入用户名" ...原创 2019-07-30 11:36:15 · 864 阅读 · 0 评论 -
Vue笔记(五)—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分!因部分内容自动转为代码格式,所以代码部分请主要关注注释部分!1.Table表格组件内容自定义:官网Table表格组件部分示例代码:columns12: [ { title: 'Name', slot: 'name' }, { title: 'Age', key: 'age' }, { t...原创 2019-07-29 15:19:10 · 5026 阅读 · 0 评论 -
Vue笔记(四)—— Vue生命周期中mounted和created的区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。如:数据初始化一般放到created里面,这样可以及早发请求获取数据,如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* co...原创 2019-07-29 08:52:25 · 30783 阅读 · 8 评论 -
Vue笔记(三)—— Vue axios异步、跨域请求及proxyTable无效问题详解
一、异步请求:1.命令行 :cd my-projectnpm install --save axios2.main.js:// 引入axios异步请求import Axios from 'axios'Vue.prototype.$axios=Axios;3.xx.vue:mounted() { this.getUserList();},methods:...原创 2019-07-28 14:44:44 · 7072 阅读 · 3 评论 -
Vue路由使用总结
一、vue中路由的使用1、定义组件<template> <div class="hello"> <h1 @click="info" :class="color">{{ msg }}</h1> </div></template><script>export default { n...转载 2019-07-12 12:12:46 · 293 阅读 · 0 评论 -
Vue笔记(二)—— Vue路由入门配置步骤
1.加入路由插件:项目路径下命令行:npm installvue-router2.main.js文件:import Vue from 'vue'import App from './App.vue'// 引入路由组件import VueRouter from 'vue-router'// 引入iView框架import iView from 'iview'import ...原创 2019-07-12 12:04:05 · 581 阅读 · 0 评论 -
Vue笔记(一)—— Vue脚手架结合iView文档引入iView组件步骤详解
可同时参考iView文档:https://www.iviewui.com/docs/guide/installhttps://www.iviewui.com/docs/guide/starthttps://www.iviewui.com/components/icon1.安装iView项目下:$ npm install iview --save安装到node_modules...原创 2019-07-11 11:29:41 · 2158 阅读 · 0 评论 -
npm install -save 和 -save-dev 傻傻分不清
回顾 npm install 命令最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用比较混乱。其实博主在这之前对这两个参数的理解也是模糊的,各种查资料和实践后对它们之间的异同点略有理解。遂写下这篇文章避免自己忘记,同时也给node猿友一点指引。我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式...转载 2019-07-11 10:26:14 · 3285 阅读 · 0 评论