前端
关注
分享
扫一扫
分享vue、react、bookstrap等知识
码农藏经阁
定期fanqie学习，多找点资料文档和朋友们一起共享。
展开
-
vue axios封装和详细使用
网络模块封装axiosajax i/o system 使用自己已经封装好的模块，进行网络请求。假如第三方网络请求框架有一天，出现了不维护申明，那么对于项目来说就是很严重的问题。那么，开发中有啥网络请求选择呢？如下：方式1：Vue中发送网络请求有非常多的方式，那么，在开发中，如何选择呢？传统的Ajax是基于XMLHttpRequestP(XHR)到为什么不用它呢？非常好解释，配首和调用方式等非常混乱，编码起来看起来就非常蛋疼．所以真实开发中很少直接使用，而是使用Jquery-ajax原创 2020-07-06 21:01:29 · 3111 阅读 · 4 评论 -
vue使用axios出现Network Error或者404
在使用axios请求本地某个接口的时候,接口是有效的，但是控制台出现了报错:Error: Request failed with status code 404或者控制台Network Error报错,那么下面为可能解决的方式原因更换url中的地址需要将127.0.0.1换成http://localhost 本机域名识别。在后台模块中相关ApplicationContext启动类中加入如下注解加入@CrossOrigin注解，重新运行后台。运行后，打印结果如下：..原创 2020-07-06 14:26:07 · 41952 阅读 · 4 评论 -
vue封装导航栏组件
在项目中，经常需要我们自己封装组件，需要对组件进行抽取至封装度最高。这样一来，使这个组件复用性变得非常高，往往可以直接把封装好的组件文件一拖拽到另外的项目就可以直接使用。现在来封装一个底部导航栏组件。首先先来看封装好的组件的效果图,文末尾附项目下载地址，可以直接拖过去使用：首先，我们需要思考，如何才能写出这一个组件以及如何对他进行不断抽取的思想。我们想要封装好一个组件，都是从静态到动态行为开始的，就是说，一开始，先最简单的做出来，然后一层一层把它抽取，不原创 2020-07-05 13:09:17 · 2915 阅读 · 0 评论 -
vue Route参数传递和导航守卫
路由的传递参数对于params方式的传递参数，我们已经讲过。现在我们来使用第二种参数方式来进行练习：新建Profile.vue组件<template> <div> <h3>通过query来获取 参数 数据</h3> <h5> {{$route.query}} </h5> </div></template><原创 2020-07-04 21:07:51 · 1219 阅读 · 0 评论 -
vue的路由Route安装和使用
路由 在vue中，route,即为前端路由。下面是专业名词解释：前端渲染和后端渲染在使用route之前，我们需要知道一些基础知识：改变url不刷新页面:使用hash值来进行变化route。location.hash("路径")通过html对象修改url：history.pushState(data,title,url)在该基础上，把urlpush进堆栈。然后使用back方法，弹出栈history.back()上面是用push方法，就是一直压栈和出栈，原创 2020-07-04 14:42:08 · 1577 阅读 · 0 评论 -
vue脚手架cli的基本使用
Vue cli 脚手架的介绍和安装看到这里的大家，都应该安装了node。假设大家已经安装了node。如果已经装了2.x版本，请先卸载:npm uninstall vue-cli -g使用命令安装cli,安装脚手架3.0.xnpm install -g @vue/cli认识Vue Cli3创建vue项目:vue create 项目名称 vue create test启动服务器Ui管理在控制台输入如下：vue ui启动后，界面如下:...原创 2020-07-04 14:34:08 · 235 阅读 · 0 评论 -
vue webpack的基本使用
安装webpack在命令行中输入,来安装webpack。[假设已经安装了node]npm install webpack@3.6.0 -gwebpack.config.js用来配置打包路径:module.exports={ entry: './src/main.js' ,output: { path: './dist' ,filename: 'bundle.js' }}npm init 使用如上命令 初始化webp原创 2020-06-30 23:00:38 · 285 阅读 · 0 评论 -
vue组件化开发简单实例(下)
儿子访问父亲的值<!doctype html><html><head><meta charset="utf-8"><title>vue事件监听练习</title></head><body> <div id="calc"> <test></test> </div></body></html>&原创 2020-06-27 23:30:41 · 663 阅读 · 0 评论 -
vue组件化开发简单实例(上)
Vue组件化的实现和使用步骤注册组件的基本步骤创建组件构造器注册组件使用组件具体实现[最基础的使用]：<!doctype html><html><head><meta charset="utf-8"><title>vue事件监听练习</title></head><script src="./js/vue.js"></script><body>原创 2020-06-25 23:15:29 · 1422 阅读 · 0 评论 -
vue表单各控件绑定案例使用
javaScript过滤器使用: 对数组的元素进行过滤，使用array.filter(function(n){return true})来进行实现，代码如下：v-model常用作表单的控件，对其进行双向绑定案例: 在输入框中输入信息，同时在下面的文本输入中显示输入的内容代码如下:<!doctype html><html><head><meta charset="utf-8"><title>vue事件监听练习</t原创 2020-06-22 23:54:58 · 617 阅读 · 0 评论 -
vue从循环分支到购物车各种案例
Vue条件判断v-if 当值为true的时候，能够对元素进行显示<!doctype html><html><head><meta charset="utf-8"><title>vue if else </title></head><body> <div id="calc"> <a v-if="true">看看我能不能显示</a>原创 2020-06-22 00:32:55 · 768 阅读 · 0 评论 -
编写接口时间效率提升一倍的方法
什么？还在一个字段一个字段从数据库的表复制到Mapper文件中？最近，随着工作量的增加，感觉重复性的工作越来越多，这感觉让我的时间浪费很多。我举个例子，就是说，现在我要写查询用户详情的语句，在Mapper中查询，那么我们是不是还要根据表的字段，然后然后编写查询语句，然后每个字段要对应实体类的那些字段，这样一复制，一粘贴。5分钟就没了。今天写了个懒人转换语句，可以实现减损99%时间。比如要花原创 2020-06-21 18:03:44 · 663 阅读 · 0 评论 -
vue各种事件监听实例
计算属性的Get方法和Set方法看代码说话:<!doctype html><html><head><meta charset="utf-8"><title>vue小练习</title></head><body> <div id="calc"> <a v-cloak="">{{name}}</a> </div><原创 2020-06-21 00:38:37 · 2599 阅读 · 3 评论 -
vue动态绑定(基础练习必会)
Vue的基本语法插值操作Mustache 也叫作胡子语法，{{message}},此时{{}}为胡须语法。{{message}},单值{{message + firstname}}多值操作{{message +’ s '+ firstname}}多值操作并且可以在其里面加上自定义字符串{{counter * 2}} 在里面进行加减乘除操作v-once 只会在第一次的时候进行元素赋值，无法在后面进行对元素再次赋值。v-html 展示代码为html代码原创 2020-06-19 23:31:42 · 1509 阅读 · 0 评论 -
vue超简单的数据绑定
Vue的声明式编程在传统的编程中，我们编程是命令式编程，也就是一步一步一行一行写代码，然后执行，就像下面：<script> var value = document.getElemenyById("apple").value; document.getElemenyById("applevalue") = value;</script>然后呢，在vue中，编程通常为声明式编程，那什么是声明式编程呢？举个如下的例子:声明式编程本质是语法层面的封装，看起来像是声明原创 2020-06-12 23:51:11 · 875 阅读 · 1 评论