vue
关注
分享
扫一扫
vue使用总结和示例
前方太黑暗
这个作者很懒，什么都没留下…
展开
-
vue 配置绕过跨域问题
第一种：在代码里加上metaInfo后面这段。第二种：配置vue.config.js。原创 2023-11-07 10:32:13 · 354 阅读 · 0 评论 -
vue前端实现多个url下载并合并为zip文件
【代码】vue前端实现多个url下载并合并为zip文件。原创 2023-11-07 10:25:41 · 928 阅读 · 0 评论 -
vue实现时间段选择组件，分星期，最小粒度小时
vue实现时间段选择组件，分星期，最小粒度小时原创 2022-12-29 15:30:42 · 1914 阅读 · 4 评论 -
Element UI 分页列表中如何保留之前选中的数据
无原创 2022-09-15 10:39:15 · 543 阅读 · 0 评论 -
vue如何在光标处插入文字
列子：如何 想要在 侧的事故打打 的中间插入 下面的 日期，时间等文字思路，通过e.srcElement.selectionStart 记录光标位置，然后通过slice截取拼接字符串<el-form-item label="计划名称" prop="campaignName"> <el-input v-model="form.campaignName" size="small" style="width: 800px;" maxlength="100原创 2022-03-23 10:35:42 · 3755 阅读 · 2 评论 -
vue读取本地json
如图：想要读取本地json的内容let appData = require('./d_category.json'); this.dCategory = appData.categories;原创 2021-09-28 11:09:08 · 420 阅读 · 0 评论 -
vue 重写element input限制字数
在使用element时，提供了限制字数的属性<el-input v-model="form.campaignName" size="medium" style="width: 250px;" show-word-limit maxlength="150"></el-input>但是会发现，提示不管你输入啥都是按照一次字符算的。在开发头条的接口中，提示一个汉字占2个字符，所以要重写-------------------------------------.原创 2021-09-24 17:10:43 · 1855 阅读 · 0 评论 -
Elements in iteration expect to have ‘v-bind:key‘
在vscode 中包for循环的错误解决办法：选择setting在红框处输入如下 搜索（vetur.validation.template）将勾去掉如图：不在提示了原创 2021-03-05 11:53:18 · 155 阅读 · 0 评论 -
vue引入jquery
1、通过npm安装jquerynpm install jquery --save安装好后，在package.json中会有jquery2、在vue.config.js中引入webpackconstwebpack=require('webpack')3、在module.exports中加入pluginsplugins:[ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery'...原创 2020-12-18 13:52:37 · 799 阅读 · 0 评论 -
vue启动后页面始终在360浏览器打开，如何设置为谷歌浏览器
vue启动后页面始终在360浏览器打开，但是对于技术而言一般都是喜欢在谷歌上打开，如何解决呢。我的是win7系统，在控制面板打开“默认程序”设置默认程序选择google，将它设置为默认浏览器在启动项目后，就在google上展示了...原创 2020-12-11 17:49:07 · 997 阅读 · 0 评论 -
vue显示格式化的json
如图：基础代码（此段是将json高亮显示的），另外：此处的传入的json是json对象，不是json字符串// 格式化json syntaxHighlight(json){ if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').rep原创 2020-12-11 12:19:07 · 2242 阅读 · 5 评论 -
vue格式化数字（已万、千万、亿结尾）
如图：直接显示数值不好看，在后面追加单位filters: { numberFormat: function (value) { let unit = ''; var k = 10000, sizes = ['', '万', '亿', '万亿'], i; if(value < k){ val..原创 2020-09-02 13:58:29 · 3903 阅读 · 0 评论 -
vue实现时间段选择组件，分星期，最小粒度半点
实现样子：原创 2020-08-20 14:21:46 · 3056 阅读 · 0 评论 -
el-table 在不同的屏幕上显示，大屏上回显示出来空白
如图：后面很大一部分都是空白的，没有被填充上。原因是因为el-table 中的每个列都给设置了列宽造成的。将部分列宽去掉即可空白被填充了原创 2020-08-18 12:30:01 · 856 阅读 · 0 评论 -
vue项目搭建
1、首先需要确定有node（常规操作）命令：node --version, npm -v2、npm下载比较慢，为了提高效率，使用淘宝镜像：http://npm.taobao.org/npm install -g cnpm --registry=https://registry.npm.taobao.org3、全局安装vue-clinpm install --global vue-cli4、开始创建项目，通常都是使用webpackvue init webpack tes原创 2020-08-16 14:53:26 · 167 阅读 · 0 评论 -
vue 使用el-table的中的tooltip如何换行显示
如图：tooltip提示时，显示了很长的内容，即使我使用了<br/>也无济于事。如何才能使用它换行呢。show-overflow-tooltip是肯定实现不了，它显示的就是普通文本。需要我们自己去写。如图：<template slot-scope="scope"> <el-tooltip class="item" effect="dark" placement="top"> <div原创 2020-08-14 10:29:33 · 7167 阅读 · 6 评论 -
vue 使用element中的el-table ,页面卡死一直转圈
如图页面一直在加载，转圈，百度一圈，看到有说vue版本过低造成的。查看下当前使用的vue的版本为2.2.2升级vue的版本到最新版本发现可以了原创 2020-08-06 09:37:11 · 5926 阅读 · 1 评论 -
el-option 数据不回显，不选中问题
<el-form-item label="操作账户" prop="account"> <el-select v-model="ruleForm.account_.id" placeholder="请选择账户"> <el-option v-for="account in accounts" :label="account.name" :value="account.id"></el-option> .原创 2020-08-04 17:20:44 · 2506 阅读 · 1 评论 -
vue实现简单的表单添加、删除
vue实现简单的表单添加、删除。没有涉及到后台传参，纯前端表单样式：代码：<!DOCTYPE html><html><head> <title>vue练习</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="sty原创 2020-07-25 10:56:54 · 2126 阅读 · 0 评论 -
vue封装axios
1、首先安装axios2、封装jsimport axios from 'axios'var root = 'http://127.0.0.1:8081'axios.defaults.headers.post['content-Type'] = 'application/json;charset=UTF-8';// 自定义判断元素类型JSfunction toType(o...原创 2019-10-17 16:11:04 · 279 阅读 · 0 评论 -
vue 封装svg-icon
1、首先安装svg-sprite-loader2、配置webpack.base.conf.js{ test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { ...原创 2019-10-17 11:59:58 · 900 阅读 · 1 评论 -
vue 实现404 500页面
项目结构：404图片代码：<template> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="ht-not-found not-found-default"&...原创 2019-10-16 15:24:29 · 2426 阅读 · 0 评论 -
vue如何安装jquery和bootstrap
首先安装jquerynpm installjquery -S之后修改webpack.base.conf.js，添加2处第一处：const webpack = require('webpack')第二处：plugins: [ new webpack.ProvidePlugin({ $: "jquery", j...原创 2019-10-15 13:17:45 · 377 阅读 · 0 评论 -
vue 添加自定义全局组件及事件
在使用vue时，我们肯定会需要自己定义组件满足我们的需求，比如定义一个按钮组件定义组按钮组件后，需要将他引入到main.js中，从多个组件角度考虑。我创建了一个gobal文件夹，用来统一引入这些组件这里必须要使用install，vue规定的，都写好后，把global引入到main.js中使用use添加进去在HelloWorld中引入Button...原创 2019-10-12 14:57:30 · 916 阅读 · 0 评论 -
使用vue-cli 构建项目
1、首先确保是否有node 2、确保npm是否存在 vue-cli脚手架一般都是基于webpack，所以我们先要安装webpack全局安装（npm install webpack -g）安装好后，输入（webpack -v）会提示是否安装wenpack-cli安装好之后再次输入（webpack -v）全局安装vue-cli （...原创 2019-10-12 11:40:19 · 155 阅读 · 0 评论 -
vue 实现跨域请求
本人知道的跨域有2种方式：1）是后台允许跨域（也就是CORS）2）通过JSONP跨域第一个例子：CORSgithub是允许跨域的：我已访问用户个人信息为例(https://api.github.com/users/xuchangcheng)<!DOCTYPE html><html lang="en"><head> <m...原创 2019-09-24 22:20:56 · 2464 阅读 · 0 评论 -
使用vue-router实现简单的页面跳转
身为后端开发，和管理系统打交道是必不可少的，而我们的管理系统一般都是在一个页面展示多个菜单的内容，俗称单页面举个例子：点击不同的菜单 右侧显示不同的内容，那么使用vue如何实现呢首先我们需要引入vue-router 文档链接（https://router.vuejs.org/zh/api/）先实现一个hello world 非常简单<!DOCTYPE htm...原创 2019-10-08 18:14:55 · 3313 阅读 · 0 评论 -
router 路由嵌套以及普通参数传递问题
项目实际开发中肯定会出现一个菜单下有几个子菜单的情况，还有一个页面跳转到另外一个页面参数传递的问题，在vue中如何实现呢，通过children来实现路由嵌套，通过$route.query、$route.params实现参数的获取简单的页面效果（实现了路由嵌套和参数获取问题）<!DOCTYPE html><html lang="en"><head&...原创 2019-10-09 10:14:13 · 281 阅读 · 2 评论 -
vue创建组件和实现组件的动态切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js...原创 2019-10-10 17:34:55 · 344 阅读 · 0 评论 -
谷歌浏览器上如何安装Vue Devtools，GIt方式不好使时通过npm install vue-devtools解决
1、首先在下载vue-devtools https://github.com/vuejs/vue-devtools2、下载后在目录下打开cmd 执行 npm install （如果提示npm命令不存在，就去下载node）npm run build选在 shells/chrome...原创 2019-10-11 11:23:09 · 526 阅读 · 0 评论 -
vue组件间 父向子传递数值 和 子向父传递数值
1、父向子传递数值，子通过使用属性绑定和使用props接收即可获取到数值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn...原创 2019-10-11 12:09:13 · 245 阅读 · 0 评论 -
vue 单向数据流例子
1、父变子也变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue...原创 2019-10-11 15:44:55 · 290 阅读 · 0 评论 -
vue 非父子组件通信（一）
点击发送数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.3.2/v...原创 2019-10-11 16:42:23 · 109 阅读 · 0 评论 -
vue 通过axios实现get请求、post请求-----各2种方式
通过vue实现get请求、post请求-----------各2种方式axiso文档：http://www.axios-js.com/zh-cn/docs/index.html使用GET请求第一种使用纯url拼接方式get1_:function() { axios.get('/ajax/get?id=1&name=xcc') ...原创 2019-09-23 22:12:26 · 1914 阅读 · 0 评论