Vue
关注
分享
扫一扫
文章平均质量分 57
Vue
小道仙97
一个不务正业的程序员，梦想成为家庭煮夫。【五十岁退休】
展开
-
Vue使用toFixed保留两位小数的三种写法
第一种：直接写在js里面，这是最简单的val.toFixed(2)第二种：在ElementUi表格中使用第三种：在取值符号中使用 {{}}定义一个方法 towNumber(val) { return val.toFixed(2) }使用 {{ towNumber(row.equiValue) ...原创 2019-10-31 16:34:14 · 5088 阅读 · 0 评论 -
Vue 读取本地静态文件 json【很全，很详细】
所有文章优先发布在个人博客上，后续更新可能会忘记同步到优快云上。给你带来不便抱歉。个人博客此篇文章：https://www.xdx97.com/article?bamId=654798704103915520方法一：require格式：var json = require('文件的相对地址');优点：可以按照你写的顺序去执行，没有任何书写方面的局限。缺点：当你...原创 2018-12-29 16:33:14 · 41961 阅读 · 2 评论 -
Vue 路由懒加载【简单使用】
这里说一下 router 懒加载的好处。 好处就是不一下全部加载。是的页面加载更加的快速。不使用懒加载的打包图。使用懒加载的打包图。使用懒加载的方法很简单。 具体看这个文档https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#把组件按组分块如果你想继续优化，你的打包可以看这篇博客Vu...原创 2018-12-29 18:03:12 · 2693 阅读 · 0 评论 -
phpStudy2018 发布 vue 项目 【最简单有效的办法】
目的：使用phpStudy发布已经打包好的vue项目准备工作： 1、安装好的phpStudy（安装路径不可以有中文，或者空格） 2、打包好的vue项目。项目目录大概如下（项目目录名字是不是 dist 无所谓）第一步：把打包的好文件放到phpStudy里面第二步：启动服务器 然后再 浏览器 访问 localhost 就好了...原创 2019-01-12 13:47:31 · 3748 阅读 · 6 评论 -
Antd日期选择框中文【最新版本，亲测有效】
不得不说Antd的确蛮好用的，但是还是要吐槽，遇到一点问题百度基本上解决不了，而且文档写的也的确不怎么样就这个日期选择器，默认竟然不支持中文？？？而且百度了半天都是什么鬼？？？这是默认效果这是之后的效果第一步：根据官方文档导入下面的代码（你可以放在使用日期选择框的界面也可以放在main.js里面）// import zhCN from 'ant-design-vue/lib/loc...原创 2019-04-10 17:40:53 · 5413 阅读 · 5 评论 -
Vue配置多页面，多入口【vue-cli3 配置登陆页面】
很久之前就想去配置一个非单页面的登陆页面，一直到今天才完成我将给出最简单的代码，完成最基本的配置。需要更强的功能自己去加上效果如下第一步：创建登陆页面的文件1-1：login.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta...原创 2019-04-02 20:10:50 · 10720 阅读 · 0 评论 -
Vuex刷新页面数据消失问题解决【Vue多页面跳转数据消失】
问题说明：登陆成功后，后台返回token我设置到Vuex中去了，但是跳转到主页的时候token没了 如果你还不知道怎么设置vue多页面共用Vuex看这里Vue多页面共用一个Vuex我的跳转是用window.location.href，我也不知道为什么我的$router.push无法成功跳转window.location.href跳转会导致你的页面刷新，从而丢失Vuex的数据如果你是单页面刷...原创 2019-04-15 16:21:44 · 5189 阅读 · 0 评论 -
创建Moment对象
在做一个日期回显的功能，发现无法回显，原来是需要Moment 对象，但是怎么都创建不了这个对象，弄了很久翻墙才找到答案效果图第一步：安装moment （说明我这个是在vue里面使用的）1-1：npm install moment --save 1-2： 在使用的页面引入 1-3: 核心代码(可以改变第二行的代码获取你想要的时间) var time = "16:00";...原创 2019-04-12 17:38:36 · 2578 阅读 · 0 评论 -
Antd日期回显
Antd 日期回显，注意看下图的右上角日期其实只要创建好了 Moment对象，然后再用setFieldsValue方法就可以了 第一步：创建Moment对象https://blog.youkuaiyun.com/Tomwildboar/article/details/89248441第二步：回显...原创 2019-04-12 17:49:19 · 4308 阅读 · 0 评论 -
Vue多页面共用一个Vuex【共用store】
刚刚在百度的时候发现sf上说多页面不可以公用一个vuex，我也不知道我这个是不是真正的共用，但是最后的结果和我想要的一样 我有两个页面，一个是主页面，一个是登陆页面。我只有一个store，里面放了一个url的前缀，我要在登陆页面和主页面都可以使用 第一步：配置store第二步：main.js 和 login.main.js 引入第三步：测试主页面毫无疑问是可以使用的，主要看登...原创 2019-04-14 09:51:14 · 13017 阅读 · 17 评论 -
nginx发布vue多页面程序
使用nginx发布多页面程序【vue的登陆页面和主页面】第一步打包：npm run build (打包好的结构如下)第二步配置：配置 nginx.conf location / { root /software/vue/dist; index index.html; ...原创 2019-04-23 19:06:42 · 2097 阅读 · 0 评论 -
Antd按需引入【Vue版】
antd给了两种按需导入的，我很想用第一种，但是弄了半天，就是弄不好，就算了。有知道的小伙伴可以在下面留言告诉我话不多说直接上代码// 按需引入antdimport { Button,Input,Form,Select,Table,Drawer,Icon,Popconfirm,Steps,Col, Radio,DatePicker,Switch } from 'ant-desig...原创 2019-04-23 20:52:51 · 10819 阅读 · 7 评论 -
springBoot2.0+vue实现websocket通信【最新，亲测有效】
先来看下效果，如果是你想要的效果就继续往下面看如果你只是单纯的想使用前端或者后端也是可以的前端：vue<template> <div> <h1>测试webSocket</h1> <button @click="getWebsocket">点击请求后台数据</button> ...原创 2019-05-09 09:44:31 · 10088 阅读 · 11 评论 -
Vue+ajax实现文件下载【这里的ajax->axios】
文章转自：https://www.cnblogs.com/yulj/p/8494465.htmlajax不可以下载文件的原因ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的接收类型只能是string字符串，不是流类型，所以无法实现文件下载。但用ajax仍然可以获得文件的内容，该文件将被保留在内存中，无法将文件保存到磁盘。这是因为JavaScript无法和磁...转载 2019-05-06 17:26:30 · 3521 阅读 · 0 评论 -
cnpm安装报错，npm安装vue超时(ERR! errno ETIMEDOUT)
莫名奇妙使用cnpm安装就报错，使用npm安装就超时解决方案：清空一下npm缓存npm cache clean -f然后再使用 npm i 安装就好了原创 2019-06-28 11:05:25 · 2080 阅读 · 0 评论 -
nuxt，axios中使用Vuex【获取Vuex中的值】
登录的时候，需要设置一个token请求头，想在axios里面全局配置一下找了半天，终于被我找到了。原创 2019-07-24 22:03:40 · 3555 阅读 · 1 评论 -
Vue 创建 404 页面【超级简单】
目的：在vue项目中，添加一个 404 页面。 具体效果，可以去这个网站测试 http://www.xdx97.com 简单说明： 404 页面，也就是一个页面而已，你只需匹配相对应的 路由就好了。 第一步：创建一个 404 页面<template> <div class="error"> <span c...原创 2018-12-10 23:30:45 · 7397 阅读 · 0 评论 -
vue v-bind 三元表达式 动态绑定 选中的样式
效果如下： 也就是随着我们的鼠标点击而去选中某一个选项。 我们需要之前写好 两组样式，也就是没有选中，和选中的样式。然后我们使用 v-bind 加上三元表达式来实现。 实现思路：我们定义一个 active 的变量，给它一个默认值， 当我们点击了某一个标签，就让这个 active 的值等于 这个标签的值。也就是选中那个标签的意思。下面给出实现代码。 至于两组 ...原创 2018-12-19 15:43:07 · 9485 阅读 · 1 评论 -
axios + webpack + vue。 axios基本使用
目的：在wepack+vue 项目中使用 axios第一步：安装cnpm i axios -S 第二步：导入2-1导入：import axios from 'axios'2-2：导入了不可以直接使用，还有一步 ↓ ↓ ↓ 第三步：测试 注意：箭头部分必须这样写 写成箭头函数，如果你写成 function 下面 this.sowingMapList = res...原创 2018-09-05 23:24:12 · 765 阅读 · 0 评论 -
Vue 中 把表单form数据 转化成json格式的数据
目的：Vue 中 把表单form数据 转化成json格式的数据第一步：创建一个数据集（就是你表单需要的数据）如果你表单都是一些正常的数据，比如 text 什么的。你定义好数据集，就去用 v-model 绑定数据。这样就可以实现数据同步了。数据集v-model绑定如果你的数据不全是这种可以用 v-model 绑定的数据，比如我这个里面需要获取一个 img 的 src ...原创 2018-09-12 22:09:39 · 12417 阅读 · 0 评论 -
vue全局监听页面的改变
目的：vue全局监听页面的改变，从而做出相对应的结果。第一种：你的监听源包含了所有的你需要监听的组件eg：你把监听事件写在了 App.vue 组件中，而你需要监听 1.vue 2.vue 3.vue 组件。你全部都在 App里面引用了。为了方便，我直接把代码也复制过来<script> //引入导航栏子组件 import navigationBar from "...原创 2018-09-07 19:02:03 · 9572 阅读 · 0 评论 -
vue，在当前路由下点击没反应。
目的：解决vue在当前路由下点击没反应。其实这里包含两个问题。第一个是：你是想刷新这个路由页面。那么之需要在路由后面加个时间改变一下就好了:to="{path:'/blogfile',query:{filetitle:'全部文章',t:+new Date()}}第二个是，你点击了别的 <router > 参数已经改变了，但是没有同步到当前路由页面，这也是我遇到的问题...原创 2018-09-18 18:41:56 · 3579 阅读 · 0 评论 -
Vue 改变/动态改变 title
目的：vue改变 title。分两种情况，第一种你事先已经定义好了 title，比如 首页 啊什么的，第二种，是你无法确认的，比如一个看文章的页面，这个 title 就是文章的标题，你事先无法知道用户获取的是那个文章。第一种：1-1、首先我们需要给路由设置 title1-2、在main.js 文件写入下面的代码// 根据路由设置标题router.befo...原创 2018-09-19 09:17:51 · 25224 阅读 · 7 评论 -
vue 中获取 wangeditor 的 html 和 text。
目的：vue 中获取 wangeditor 的 html 和 text。原创 2018-09-30 20:23:08 · 3939 阅读 · 2 评论 -
使用Vue，获取当前页面的 IP
目的：使用Vue，获取当前页面的 IP说明：在做一个点赞功能，获取当前用户的ip，判断它是否点赞过。第一步：使用vue引入外部js。（这里是使用搜狐的api来获取用户的ip）直接在 index.html 里面引入这个js<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>第...原创 2018-09-20 20:24:47 · 10367 阅读 · 15 评论 -
[Vue warn]: Missing required prop
异常如下：这个异常是路由传参引起的。分两种情况第一种：使用 props 定义了参数，但是没有在组件调用的时候传递参数。正常定义如下：调用如下：第二种：使用 query 传递参数，但是使用了 props 定义参数正确定义和获取参数如下：传递方式如下： （也可以在 router-link-to里面）...原创 2018-09-26 21:18:26 · 60713 阅读 · 9 评论 -
Vue 解决 路由不改变，参数改变了，重新加载数据的问题
http://www.cnblogs.com/first-time/p/7067674.html转载 2018-09-21 16:40:24 · 3389 阅读 · 0 评论 -
element-ui 获取当前行的 id
目的：element-ui 获取当前行的 id我们需要获取当前行的 id ，然后去做增删改查操作。找了半天发现，获取每一行的全部信息（也就是你自己定义数组的某一项）可以用eg：比如我每一行的信息有： id，name，age，password 我需要使用id那么 scope.row.cid 就可以了实际用法自己在下面定义一个 Delete 方法就好了。...原创 2018-09-28 10:03:27 · 12610 阅读 · 10 评论 -
Vue 使用 axios 415 错误
目的：解决Vue 415 错误415 ： 简单理解，就是发送的数据格式，和接受的数据格式不一样。如果我后台java 要求接受 json 格式，而前台传递的是 字符串 格式 （这里的格式不单单是表面的格式）。所以我们前台要设置一下 （我使用的是 axios）...原创 2018-10-21 15:51:33 · 6226 阅读 · 0 评论 -
webpack解决Invalid Host header
目的：webpack解决Invalid Host header1、解决办法网上说有两种，一直是加上一个 disableHostCheck: true, （我找了半天，没找到在哪里去加上这句，而且说是不安全）本来我的 package.json 是这样写的改成我是用这个主要是做QQ互联，有兴趣可以看看这个 ：https://blog.youkuaiyun.com/Tomwildb...原创 2018-10-27 11:07:04 · 948 阅读 · 0 评论 -
Nginx发布Vue项目【 CentOs7，build打包】
1、所有文章优先发表在个人博客，后续如果有修改的话，可能忘记更新到优快云了，给你带来不便，抱歉。2、个人博客本篇文章地址 ：https://www.xdx97.com/article?bamId=651064809940320256在 linux的nginx上发布vue。 需要两步操作1、在linux安装 nginx https://blog.youkuaiyun.com/T...原创 2018-11-15 16:23:39 · 1730 阅读 · 2 评论 -
Vue打包导致 JS 很大的问题解决【完美解决】
先来叨叨一下： 这个问题困扰我很久了，一直没有解决。最后只好把 js 放到七牛云上面cdn，没想到，这样直接导致，流量访问超出，达到了百分之600，然后被通知欠费。这才痛下决心一定要解决这个问题。阅读下面的文章，一定会给你带来帮助，你所遇到的问题我基本都遇到了。问题说明：打包导致 js 很大，然后访问特别慢。Q：如果你的 js 达到了好几M，（除了个别情况，比如的代码量真的超级大到不...原创 2018-11-17 11:33:00 · 11339 阅读 · 0 评论 -
使用 vue-cli3 创建项目 【简单明了】
首先的要安装 node.js 8.10 以上版本 并且安装 vue-cli3 （具体安装方法百度）第一步：使用cmd 到指定的位置 安装 第二步：创建指定文件 2-1： vue create xxxx (xxx 表示你的项目名) 然后会出现上面选择，你可能没有第一个 aaa （这个是我之前创建的，它记录了你的选项）我们选择最后一个 【手动选择】回车后出现...原创 2018-11-17 12:18:39 · 1338 阅读 · 0 评论 -
Vue页面实现简单的增删改查
目的：用vue实现简单的增删该查注：我自己测试的后台是java+mysql。 这里提供前端页面。 只需要连接你的后台url就好了需要准备 vue.js 和 bootstrap.css代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...原创 2018-08-16 10:07:13 · 15394 阅读 · 2 评论