VUE.js
关注
分享
扫一扫
mao_mao37
这个作者很懒，什么都没留下…
展开
-
Vue上传文件之后显示文件内容
<template> <el-form :model="formData" label-width="280px"> <el-form-item label="上传kbase视图文件"> <el-upload class="upload-demo" ref="upload" :action="formData.url" :he.原创 2021-09-15 15:57:41 · 994 阅读 · 0 评论 -
对于elemnet-ui的el-upload的使用总结（移除上传文件判断，action等问题）
el-upload官网使用范例：<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :f原创 2020-08-25 17:37:12 · 1030 阅读 · 0 评论 -
vue-cli 做前端+ nodejs做服务端的 IIS部署
vue-cli+nodejs的部署可能有其他方式，目前采用的是从asp.net工程使用windowsIIS 部署的那一套（IIS习惯了），步骤如下一、nodejs 配置为windows server服务，开机自启动：参考博客：https://www.cnblogs.com/burningmyself/p/7246156.html1、安装node-windows依赖npm inst...原创 2020-05-06 21:54:47 · 1162 阅读 · 0 评论 -
[转]el-table表格翻页后仍记忆所选项
大佬博客el-table多选，对于当前页的多选我们是很容易知道并显示给用户的，但是对于分页后要记住哪些页多选了哪些数据，并正确的显示给用户就有点小挑战了。具体实现：第一种，搬运工在此?，来自于大佬的文章详戳?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...转载 2020-04-17 14:47:51 · 330 阅读 · 0 评论 -
el-table对于超出长度限制的文本的处理(vue-cli)
1.使用省略号：<el-table-column prop="url" label="说明书下载地址" width='200' :show-overflow-tooltip='true'></el-table-column>2.超过字符数限制使用省略号：设置过滤器filters: { ...原创 2020-03-25 17:22:23 · 11097 阅读 · 2 评论 -
Vue中如何导入并读取Excel数据
在上一篇文章中我们完成了对excel的导出操作（链接：https://blog.csdn.net/a736755244/article/details/99426520），那么如何导入excel并读取其中的数据呢？一、导入并读取Excel功能从整体上来说两种方式，一是前端解析文件后将数据返回给后端，另一种是前端直接将Excel文档返回后台，由后台进行处理。使用哪种方法需要根据具体业务需求，下面...转载 2020-03-13 11:38:07 · 2331 阅读 · 0 评论 -
vue读取本机的excel文件的两种方式
安装依赖npm install xlsx引入import XLSX from 'xlsx'第一种input通常方式template中加入input<input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload">data中声明变量data() { return ...转载 2020-03-13 11:35:44 · 1772 阅读 · 0 评论 -
vue-cli3 处理静态文件 下载引用
转载地址：https://blog.csdn.net/qq_40247562/article/details/89921778问题：利用vue-cli3 写的项目，有一个下载excel 模板的功能，模板存放在前端本地，然后下载。解决：1）把excel 模板放到本地项目的 public 下（注意，一定要放在public 下，这样webpack 在打包的时候才不会解析他，会原封不动的引用他...转载 2020-02-28 00:47:48 · 1839 阅读 · 0 评论 -
vue中a标签跳转问题（跳转网址自动加上http://local：8080/）
最近做网站的时候随手写了一个测试行，<a :href="www.baidu.com"></a>点击跳转的时候，跳转网址为：http://local:8080/www.baidu.com如果把<a :href="https://www.baidu.com"></a>就不会出现那个问题算是一个小教训吧，记录一下...原创 2020-02-27 23:15:32 · 7552 阅读 · 0 评论 -
【转】Element-UI中上传的action地址相对问题
Element-UI中上传的action地址相对问题1、action直接写相对地址2、屏蔽掉action地址，我自己写请求我想要在vue里只出现上传地址后缀，然后具体的上传地址，前缀是项目配置里的服务器地址1、action直接写相对地址<el-upload class="import-btn" :action="/base_da...转载 2020-02-18 23:07:21 · 4212 阅读 · 1 评论 -
[转]Vue基于vue-quill-editor富文本编辑器使用心得
vue-quill-editor的guthub地址，现在市面上有很多的富文本编辑器，我个人还是非常推荐Vue自己家的vue-quill-deitor，虽然说只支持IE10+,但这种问题，甩给别人吧！那么我们直击正题，在vue中使用quill呢，我们需要npm进行安装，安装命令如下：npm install vue-quill-editor再安装依赖项npm install qu...转载 2020-02-13 16:55:26 · 258 阅读 · 0 评论 -
4-vue的生命周期（钩子函数）
钩子函数：程序在运行过程中任何发生变化时，比如开始、进行中之类的节点，可以使用钩子函数在这些节点的时候做一些事情。vue有10个钩子函数（生命周期）：相关代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...原创 2019-04-03 11:53:15 · 234 阅读 · 0 评论 -
js时间戳写入mysql
vue-cli3在项目过程中，需要将时间控件的时间戳写入mysql中，但是js的时间戳格式如下：2019-07-23T16:00:00.000Z而mysql的datetime的格式为‘yyyy-mm-dd hh:mm:ss’，因此需要转换，在查询各种资料的情况下，找到一个比较好的解决方案：使用moment库使用moment库npm install moment --s //为项目注册组...原创 2019-07-29 15:15:24 · 1494 阅读 · 0 评论 -
【error】vue-cli3 报Computed property “tableData” was assigned to but it has no setter.
对于vuex，使用getter获取state数据，并绑定到组件上，是很常规的操作但是在严格模式下，在属于vuex的state上使用v-model这种需要双向绑定的数据类型，单单使用getter就会报错：Computed property “searchWebName” was assigned to but it has no setter.错误代码如下：<!--vue--...原创 2019-07-31 16:16:41 · 4231 阅读 · 0 评论 -
vue-cli3+element-ui+vuex+nodejs+mysql前端项目记录
好记性不如烂笔头，记录一下前端最基本全栈的实现过程。 项目配置： 1.创建项目，并修改配置，详情查看博客完整的vue-cli3项目创建过程以及各种配置2.添加mysql组件npm install mysql --s3.在项目根目录下创新server文件夹，保存服务端代码4.为前端配置访问信息：新建vue.config.js文件，文件内容如下：详细参考信息可查看...原创 2019-08-01 18:19:41 · 2453 阅读 · 3 评论 -
mongoose学习记录
mongoose官网地址：https://mongoosejs.com/docs/index.htmlnodejs的mongoDB官网地址：https://docs.mongodb.com/manual/introduction/官网很全，基本官网就可以了，但是官网是英文，所以下边推荐几个比较全、比较好的中文博客博客：https://www.cnblogs.com/w...原创 2019-08-28 16:39:35 · 151 阅读 · 0 评论 -
element-ui中分页 跳转页面时出现刷新网站的问题
在写项目时，遇到了element-ui 中的分页组件出现问题，问题如下：问题：在进行页面跳转时，输入页数之后，点击enter键，首先跳转到指定页，但是接下来会重新刷新页面。查看Pagination官方说明，也并没有提到这个情况解决办法：在pagination中添加阻止enter刷新事件即可@submit.native.prevent参考博客1参考问答2例子如下：...原创 2019-09-10 11:17:10 · 1216 阅读 · 0 评论 -
moongose模糊查询相关博客
mongoose模糊查询及联表查询等mongoose 多条件模糊查询的实现mongoose多条件模糊查询mongoose 多条件 模糊查询官网 andor原创 2019-09-16 15:32:37 · 267 阅读 · 0 评论 -
vue组件之间互相传值：兄弟组件通信
文章地址：https://blog.csdn.net/Amanda_wmy/article/details/80134823原创 2019-09-16 15:32:21 · 144 阅读 · 0 评论 -
【转】详解vue的diff算法
转载地址：https://juejin.im/post/5affd01551882542c83301da#commenthttps://github.com/aooy/blog/issues/2https://github.com/answershuto/learnVue/blob/master/docs/VirtualDOM%E4%B8%8Ediff(Vue%E5%AE%9E%E7%8E...转载 2019-09-17 10:36:52 · 154 阅读 · 0 评论 -
【转】VirtualDOM与diff(Vue实现).MarkDown
VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最简...转载 2019-09-17 10:50:35 · 126 阅读 · 0 评论 -
【转】VNode节点
抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。可以想象，最...转载 2019-09-17 10:53:39 · 343 阅读 · 0 评论 -
【转】vue双向绑定原理分析
当我们学习angular或者vue的时候，其双向绑定为我们开发带来了诸多便捷，今天我们就来分析一下vue双向绑定的原理。简易vue源码地址：https://github.com/jiangzhenfei/simple-Vue1.vue双向绑定原理vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，g...转载 2019-06-24 10:04:56 · 113 阅读 · 0 评论 -
【转】vue中如何实现数据的双向绑定
转载地址：https://www.cnblogs.com/webspace/p/8625143.html目录 vue中如何实现数据的双向绑定 vue中的指令 v-cloak： v-model（表单元素设置了之后会忽略掉value，checked，selected） v-text：代替 {{}} 渲染成文本（不会识别html标签）可以防止网速卡慢时{...转载 2019-06-24 10:03:58 · 353 阅读 · 0 评论 -
vue-cli 安装
1.npm install vue-cli -g或者cnpm install vue-cli -g2.vue init <template-name> <project-name>template-name:webpack webpack-simple browserify browserify-simply simplyvue init webpac...原创 2019-04-09 17:14:23 · 104 阅读 · 0 评论 -
vscode保存代码，自动按照eslint规范格式化代码设置
https://www.haorooms.com/post/vscode_eslint原创 2019-04-16 09:16:23 · 956 阅读 · 0 评论 -
vue前端项目打包并且在服务器上部署过程
两篇推荐博客：https://blog.csdn.net/qq_33661804/article/details/85340697https://blog.csdn.net/kaola_l/article/details/80497490https://blog.csdn.net/qq_32340877/article/details/79105565https://blog.cs...原创 2019-04-16 09:15:55 · 18991 阅读 · 0 评论 -
6-vue-component
组件：data属性必须是一个函数全局和局部的作用域问题：只要变量是组建内部的，这些变量就必须是局部的，而在外部html结构中引用的变量，都引用的改挂在下的实例里边的变量Vue中所谓的全局指的是该挂载下的区域；全局组件：构造器外定义全局组件必须写在Vue实例创建之前，才在该根元素下面生效；组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信<body...原创 2019-04-03 16:25:34 · 299 阅读 · 0 评论 -
5-vue-template模板制作
有四种方法制作模板，下边先将前三种制作模板。注意：模板组件里面第一行只能有一个标签，并且结束标签必须在最后一行，否则结束标签之后的html是无法显示的；一：直接在构造器中制作模板，构造器模板 <script> new Vue({ el:'#ele', data:{ mes...原创 2019-04-03 15:27:12 · 277 阅读 · 0 评论 -
3-VUE -set
语法 ：Vue.set( target, key, value ) 参数： {Object | Array} target {string | number} key {any} value 返回值：设置的值。 用法： 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通...原创 2019-04-03 11:13:44 · 911 阅读 · 0 评论 -
vue项目实战中的笔记
1.引入icon使用阿里巴巴的iconfont：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.21.选择所需要的icon2.添加到购物车3.选择完毕，点击购物车，将选择的icons添加到一个项目中4.进入我的项目，选择fontclass标签下的‘暂无代码，点此生成’，生成链接5.复制此链接，将...原创 2019-04-12 10:31:37 · 197 阅读 · 0 评论 -
2 VUE.js 内部指令
1.v-if v-else v-show 指令v-if/v-else：是vue的一个内部指令，指令作用对象为html，作用是用来判断是否加载html的DOMv-show：调整css中的dispaly属性，DOM已经加载，只是css控制是否显示出来v-if和v-show的区别：v-if:判断是否加载，可以减轻服务器压力，在需要时加载。v-show：调整css display属性，...原创 2019-04-02 09:19:56 · 140 阅读 · 0 评论 -
1.VUE 安装以及vue.js下的第一个hello world
1.进入官方网站下载最新的vue.js 官方网站有两个文件可供选择：开发者版本（vue.js）:包完整的警告和调试模式 发布版本(vue.min.js)：删除了警告，进行了压缩 网址：https://cn.vuejs.org/v2/guide/installation.html 2.项目结构搭建本项目用的集成开发工具为Visual Studio Code，也可...原创 2019-03-28 11:16:45 · 391 阅读 · 0 评论 -
iframe页面相互调用方法
https://blog.csdn.net/qq_37952101/article/details/81201102转载 2019-04-16 10:59:33 · 225 阅读 · 0 评论 -
iframe 父页面与子页面之间的方法、属性的相互调用
https://blog.csdn.net/qq_27261333/article/details/69945791Web前端之iframe详解https://www.cnblogs.com/lvhw/p/7107436.html网页中嵌入外部页面的四种方法https://blog.csdn.net/lingchen1112/article/details/42519757...转载 2019-04-16 11:00:10 · 637 阅读 · 0 评论 -
vuex学习网址
vuex不用看其他教程，官网指南写的特别清晰网址：https://vuex.vuejs.org/zh/guide/原创 2019-06-21 16:12:53 · 262 阅读 · 0 评论 -
完整的vue-cli3项目创建过程以及各种配置
1.创建工程代码目录下打开cmd，输入'vue create projectname'命令创建工程项目创建的时候的配置进入工程目录：cd projectname2.配置工程在项目根目录下创建vue.config.js文件，进行devserve的配置，在这个文件里，可以进行mock数据的编写module.exports = { configureWebpac...原创 2019-07-25 23:35:05 · 1420 阅读 · 0 评论 -
【转】mutation接收单个参数和多个参数
利用$store.commit 里面 写参数相当于 mutation的函数名字 在组件里面： 第一种方式： this.$store.commit("addIncrement",{name:'stark',age:18,n:5}) 第二种方式： this.$store.commit({ type:"addIncrement", n:...转载 2019-06-01 22:53:23 · 3344 阅读 · 0 评论 -
[转]Vue Cli3 + VS Code 愉快调试
1. 设置vue.config.js以便能够准确命中断点module.exports = { configureWebpack: { devtool: 'source-map' }}2. 打开调试配置文件launch.json, 添加或修改以下配置：{ // Use IntelliSense to learn about possible attribute...转载 2019-06-01 22:50:33 · 2251 阅读 · 0 评论 -
【转】：localStorage使用总结
转载地址：https://www.cnblogs.com/st-leslie/p/5617130.html一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器...转载 2019-05-29 11:52:44 · 162 阅读 · 0 评论