vue.js
FromNowOnUntilTheEnd
每日记录
展开
-
vue-cli+elementUI:个人信息提交表格显示Demo(附代码)
效果图 1、先创建一个Vue项目2、安装element-ui3、修改main.js,引入element-ui4、新建NewContact.vue文件,对原HelloWorld.vue修改,使其路由指向newcontact(新url:http://localhost:8080/#/newcontact)5、打开router/index.js,添加该路由6、添加页面内容...转载 2018-07-27 17:56:26 · 11290 阅读 · 0 评论 -
axios中文文档(较深入)
axios基于http客户端的promise,面向浏览器和nodejs特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 转化请求和返回 取消请求 自动转化json数据 客户端支持抵御 安装使用npm:$ npm i axiso...转载 2018-08-02 10:42:09 · 1631 阅读 · 0 评论 -
vue项目引入bootstrap及jQuery
引入jQuery:在当前项目下cmd,输入 npm install jquery --save-dev 用npm下载jquery依赖、找到build文件夹下的webpack.base.conf.js文件打开,修改配置:1、加入webpack对象:var webpack=require('webpack'); 2、在module.exports里面加入:plugi...转载 2018-08-14 19:26:33 · 458 阅读 · 0 评论 -
使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 前言: Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与...转载 2018-08-03 14:52:27 · 204 阅读 · 0 评论 -
vue 发送ajax请求
一、 简介 1、vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现 2、axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 3、参考:GitHub上搜索axios,查看API文档二、 使用axios发送AJ...转载 2018-08-03 15:26:56 · 907 阅读 · 0 评论 -
Vue项目的package.json文件解释
package.json文件:1、可以手工编写或者npm init命令自动生成(在当前目录生成一个基本的pakage.json文件,其中项目名称name和项目版本version必填,其他选填)package.json在每个项目的根目录的下面,定义项目所需要的各种模块,以及项目的配置信息(如版本、名称、许可证等)然后npm install根据这个配置文件,自动下载所需的模块,即配置项目所需的...原创 2018-08-16 19:52:56 · 6217 阅读 · 0 评论 -
vue:纯js分页(不操作数据库)--复制到页面即可用
页码:<nav style="float:right;"> <ul class="pagination pagination-lg" style="list-style-type:none;"> <template v-for="page in Math.ceil(rows.length/pagesize)">原创 2018-08-17 19:39:39 · 1558 阅读 · 0 评论 -
ajax后台返回json到vue显示图片:SpringCloud+vue
vue ajax访问springcloud,返回一个图片路径:C:\Users\yckj1221\Desktop\goods\5.jpg然后在vue的页面中无法显示,其路径变为:http://localhost:8080/C:\Users\yckj1221\Desktop\goods\5.jpg解决办法:1、进入vue项目build文件夹下的webpack.dev.conf.js,注释掉...原创 2018-09-04 14:58:44 · 1811 阅读 · 0 评论 -
SpringCloud+vue启动步骤及相关文件介绍
启动方式:eureka-server controller my-project 访问:localhost:8080---------------------------------------------从Springboot多模块到SpringCloud多模块SpringCloud教程 | 第十篇: 高可用的服务注册中心????没有成功https://blo...原创 2018-09-04 14:59:44 · 805 阅读 · 0 评论 -
vue的超链接传值取值
vue的超链接传值方式准备工作:①新建一个vue页面②在router/index.js下1)头顶引入页面,加入这行代码:import GoodsDetail from '@/components/GoodsDetail'// 代码解释:第一个GoodsDetail是第二步里面routes里面的name值// 后面from就是你这个vue页面的路径2...原创 2018-09-12 10:52:32 · 5224 阅读 · 0 评论 -
Vue学习之前端增删改查及表格
看到这个文章,用来学习vue还是挺好的,这个是文章链接:https://blog.csdn.net/liuyan55/article/details/79311819 我也想把他文章的内容都复制过来放在我这里啊,但是太多了,所以只能挂个链接了。挂羊头卖狗肉一波!...转载 2018-11-21 11:07:31 · 2476 阅读 · 1 评论 -
element-UI表格中拿到每一行的index----scope
这里拿到每一行的index----------scope.$index这里拿到每一行的数据-----------scope.$row 原文链接:https://blog.csdn.net/Bright2017/article/details/77452648转载 2018-11-21 11:09:07 · 6130 阅读 · 0 评论 -
Spring Cloud整合Vue
由于公司项目是前后端分离的,我前段时间将后端的Spring Cloud框架搭建的差不多了,包括Eureka服务发现中心,远端配置中心Config,不同服务接口调用组件Feign等。最近前端开发也将前台搭建的差不多了,于是领导让我将Vue整合到Spring Cloud里面。话不多说,开干:1.将前端给我的Vue项目的压缩文件解压后,将其添加到VS Code编辑器里:2.电脑安装好np...转载 2018-11-20 11:06:32 · 2393 阅读 · 2 评论 -
纯html:vue+element-ui入门例子todolist(粘贴可用)
效果图 代码及其注释:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0转载 2018-07-27 15:19:15 · 8131 阅读 · 0 评论 -
Vue.js中 watch(深度监听)的最易懂的解释
假设有如下代码:<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({转载 2018-07-30 16:36:09 · 76013 阅读 · 8 评论 -
初学Vue + Vue调试神器 vue-devtools 的安装
Write By Monkeyfly以下内容均为原创,如需转载请注明出处。前提今天准备开始学vue.js了,不为别的,只是因为我女朋友毕设项目的前端是使用vue开发的,而我作为一个前端开发却无能为力,你说可不可笑。 她需要一个会vue的前端帮她做界面,而我虽然身为一个前端开发,但是并不会vue,所以作为男朋友的我本身就很自责。 现阶段的情况是:我只是知道有这些框架,再加上公司的项目...转载 2018-07-17 12:05:20 · 7610 阅读 · 0 评论 -
vue.js 和 vue.min.js 文件
https://download.csdn.net/download/qq_36688143/10546461原创 2018-07-17 15:10:45 · 9978 阅读 · 0 评论 -
vue.js:todolist任务列表代码(copy即可用)
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue todolist - fxy</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"原创 2018-07-23 11:33:32 · 785 阅读 · 0 评论 -
创建vue项目及项目架构详细步骤(前提:安装了node和npm/文末有链接教程)
1、创建vue项目(my-project可以直接改成要创建的项目名)①******** ②********** ③******* 2、搭建完项目,会在所选目录下有项目文件夹,可以选择使用sublimetext整个文件夹打开(拖动该项目到sublimetext),项目架构解释:build目录下放置的是项目的webpack配置文件,可以不动c...原创 2018-07-24 17:15:11 · 831 阅读 · 0 评论 -
让sublime text3支持Vue语法高亮显示
让sublime text3 支持vue文件语法高亮 的插件安装(其他插件安装也是)就是下面的两个步骤:1,把插件放入插件包 Sublime Text 3.3126x86\Data\Packages ;2 . 载入插件按下快捷键"shift + ctrl +p" 在打开的packages输入框中输入vue,选择"Set Syntax:Vue Component" 进行加载。 以下...转载 2018-07-24 18:57:53 · 375 阅读 · 0 评论 -
安装node js到构建一个vue并启动它
1、安装node js 下载地址:http://nodejs.cn/download/这里选择msi,安装过程就一路next2、安装完成后运行Node.js command prompt(node -v查看安装版本) 3、安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v查看版本) 4、注册cnpm来代替npm和淘宝镜像 使用命令...转载 2018-07-19 11:35:11 · 568 阅读 · 0 评论 -
Sublime Text3快捷键大全
sublime复制当前行到下一行Ctrl+shift+d:快速复制光标所在的一整行,并复制到改行之前。 选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。 Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。 Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+...转载 2018-07-25 17:46:28 · 2001 阅读 · 0 评论 -
vue.js在线引入、v-bind、v-model、v-on、v-for
1、js文件动态引入<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>2、v-for:循环,(item,key,index)位置不能随意...原创 2018-07-25 19:31:56 · 7477 阅读 · 0 评论 -
在已有的Vue项目(新增页面)
1、在router文件夹下的index.js,仿照原有的代码,import新页面的路径2、在routes/children下,仿照原有代码,添加内容 3、在api/mock.js下,仿照原有代码,添加内容,修改resCanme页面名字,resOrder页面所属的dtree位置,Url页面路径...原创 2018-07-26 15:32:41 · 18396 阅读 · 0 评论 -
自定义一个路由:路由就像超链接,跳到别的页面
注意:vue文件全部放在src/components文件夹下自定义一个路由(超链接):1、先新建一个vue项目2、新建RouterTest.vue文件,存放路径src/compents3、修改src/router下的index.js文件(头顶引入vue和vue-router的组件)import Vue from 'vue'import Router from 'vue-ro...原创 2018-07-30 14:48:12 · 1482 阅读 · 0 评论 -
"router-link"各种属性解释
在vue1.0版本的超链接标签还是原来的a标签,链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签,但最终在页面还是会被渲染成a标签的至于为什么要把a换成router-link原因还是有的,比如我们之前一直惯用的nav导航里面结构是(ul>li>a),router-link可以渲染为任何元素,这里可以直接渲染成li标签,同样...转载 2018-07-30 15:09:26 · 10069 阅读 · 0 评论 -
localStorage:自定义存储数据方法及其使用总结
自定义一个localStorage本地存储数据接下来我们在src内新建一个store文件夹,和App.vue、components同一个层级,在里面新建一个store.js,内容如下const STORAGE_KEY = 'tabale-vuejs'//名字随便起export default {//向外输出,以便组件接收 fetch() {//我们定义的获取数据的方...转载 2018-07-30 15:24:54 · 2545 阅读 · 0 评论 -
vue样式问题overflow-y:点击之后页面抖动,y轴出现滚动条
情景再现完成了多选框功能,点击查询,表格中无数据显示(数据库中无数据),表格的高度出现了变化,导致Windows下谷歌浏览器页面出现自动适配,y轴就会出现一个滚动条。再次点击多选框,页面y轴就会在出现滚动条<--->滚动条消失之间转换,所以页面就会抖动注意:在macOS苹果的系统下,不会出现这个问题,除非手动把浏览器页面拉到非常非常小解决办法在前端页面,样式顶层,添加这...原创 2019-09-27 09:45:38 · 3877 阅读 · 0 评论