经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

12 种使用Vue 的最佳做法

作者:Matt Maribojoc 译者:前端小智 来源:medium 随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。 1.始终在 v-for 中使用 :key 在需要操纵数据时,将ke...[2020/3/30]

vue跳转页面的几种方法(推荐)

vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to=''/testDemo''> <button>点击跳转2</button> </router-...[2020/3/27]

vue在线动态切换主题色方案

主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色c 然后根据配置动态生成替换的c 具体实现步骤如下: 1.添加webpack插件,新建文件webpack/themePlugin.js const ThemeColor...[2020/3/26]

安装多版本Vue-CLI的实现方法

安装多版本Vue-CLI,即在电脑上同时安装多个版本的Vue-CLI。那么为什么要安装多个版本呢?原因是Vue-cli3.0版本与之前的版本有了较大不同,当你要处理3.0之前的项目,又想使用之后的版本处理新的项目的时候就会遇到多版本管理的问题。所以接下来我们就介绍下具体的安装流程: 一...[2020/3/24]

Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)

最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用elementui的上传图片控件的照片墙类型,其使用示例可具体查看官方文档 Elementui...[2020/3/24]

Vue-cli3多页面配置详解

Vue-cli3多页面配置详解

Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面。由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题。 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有...[2020/3/23]

vue-autoui自匹配webapi的UI控件的实现

vue-autoui自匹配webapi的UI控件的实现

vue-autoui 是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的需要.auto-form和auto-grid是通过json来描述展示的结构,在处理上要比写html...[2020/3/20]

【vue】组件之间传值的三种方式

vue的组件传值分为三种方式:父传子、子传父、非父子(同级)组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:      ...[2020/3/19]

在Vue.js中使用TypeScript的方法

虽然 vue2.x 对TypeScript的支持还不是非常完善,但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next 看,为TS提供更好的官方支持应该也会是一个重要特性,那么,在迎接3.0之前,不妨先来看看目前版本二者的搭配食用方法吧~ 创建项目 虽然G...[2020/3/19]

vue-cli3项目升级到vue-cli4 的方法总结

这是我对以前配置的基于vue-cli3搭建的前端H5模板的升级,主要把vue-cli3项目升级为vue-cli4,并删除一些过时插件。插件版本升级到当前(2020-03-19)最高版本(升级了很多webpack插件版本),升级完后新加多域名代理配置,官方升级文档点我点我 按着官方的文档升级来也...[2020/3/19]

vue 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

vue 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

''use strict'' 引入node.js路劲模块 const path = require(''path'') 引入utils工具模块,utils主要用来处理c -loader和vue-style-loader的 const utils = require(''./util...[2020/3/19]

vue-苟曰的老板不发工资230行原创js代码写个扫雷小游戏

上gif: 1.开局提示动画 2.游戏中状态提示 3.开挂模式提示 4.计时器              5.游戏模式扫雷成功,蓝色进度条表示当次扫雷的完成度 6.若当次时间小于最佳记录,则...[2020/3/19]

Vue项目中使用flow做类型检测的方法

在vue2.0的项目中加入flow类型检查。当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难。为了解决这个问题,决定使用flow 加入类型检查。 flow了解 flow是fackbook公布的java...[2020/3/19]

vue项目配置使用flow类型检查的步骤

vue项目配置使用flow类型检查的步骤

你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的参数,你传了一个String类型?JavaScript的弱类型是这一类bug的罪魁祸首,静态类型语言中不存在此类bug。Flow就是JavaScript的静态类型检查工具,该库的...[2020/3/19]

vue+ESLint 配置保存 自动格式化代码

1. 在.eslintrc.js 添加 vscode 终端启动服务 添加⾃定义规则 ''prettier/prettier'': [ eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 ''erro...[2020/3/17]

vue常用指令代码实例总结

vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> ...[2020/3/17]

vue-cli3使用mock数据的方法分析

本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下: 在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。 正文开始 在vue-cli构...[2020/3/16]

vue实现导航标题栏随页面滚动渐隐渐显效果

项目开发中导航栏随页面滚动渐隐渐显这一功能还是较为常用的,下面作一个用vue实现此功能的代码分享。 1. 为导航栏元素style属性用v-bind绑定data数据"opacityStyle"。 <div cla ="header" :style="opacityStyle"&...[2020/3/12]

Vue和React中的diff算法核心

虚拟DOM js对象替代真实DOM, 更改避免回流(重新渲染),一次性通过render函数渲染成真实DOM 声明的样子 输出的样子 实现render函数生成真实DOM 设置属性 render函数 渲染函数 diff算法 diff算法其实就是对DOM进行different比较不同的...[2020/3/11]

keep-alive不能缓存多层级路由菜单问题解决

keep-alive不能缓存多层级路由菜单问题解决

这出现的原因是多级路由导致的,就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题。目前keep-alive可以有效缓存一级,二级的路由菜单,3级以上菜单并不能做到缓存,这里提供一个解决方案: 在cachedViews中手动加上一级菜单和三...[2020/3/10]

Vue vm.$attrs使用场景详解

1、vm.$attrs简介 首先我们来看下vue官方对vm.$attrs的介绍: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (cla 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (cla 和 style 除外),...[2020/3/9]

Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

sync 在vue2.4以前,父组件向子组件传值用props;子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值。比较繁琐,写法如下: 父组件 <template> <div cla ="parent"> ...[2020/3/9]

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

本文实例讲述了vue 使用插槽分发内容操作。分享给大家供大家参考,具体如下: 单个插槽 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置...[2020/3/6]

Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)

昨天做的tabs窗口,非常满意,今天乘胜追击,把它做成了可以根据自身大小改变显示样式,自身宽度过小时,tab页可以浮动停靠其一侧。具体效果: 左侧   右侧   向来喜欢简单明了的东西,所以想实现的简单一点,无奈现实不允许啊,功能实在有一丢丢复杂。硬着头皮搞...[2020/3/6]

Vue基于iview实现登录密码的显示与隐藏功能

Vue基于iview实现登录密码的显示与隐藏功能

iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏。故有此文。 2.实现最终效果 2.1 隐藏密码 ...[2020/3/6]

VSCode提高 Node 和 Vue 开发效率的插件推荐

在众多代码编辑工具中,我最喜欢的就是微软的vscode。首先它十分轻便,不吃硬件,运行非常顺畅;其次是其各种各样的插件使得编程效率蹭蹭地往上提,爸爸妈妈再也不用担心我要加班了(才怪!!!不加班是不可能的) 插件列表 Auto Close Tag 自动闭合HTML标签 Auto Rena...[2020/3/6]

VUE实现Studio管理后台之鼠标拖放改变窗口大小

近期改版RXEditor,把改版过程,用到的技术点,记录下来。昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾。不过工作成果完整保留在github上,地址:https: github.com/vularsoft tudio-ui 这个项目下面的html-demo.h...[2020/3/5]

使用Vue 自定义文件选择器组件的实例代码

使用Vue 自定义文件选择器组件的实例代码

本文 GitHub  https: github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 文件选择元素是web上最难看的 input 类型之一。它们...[2020/3/4]

vue请求数据的三种方式

请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1、安装vue-resour...[2020/3/4]

vue.js this.$router.push获取不到params参数问题

主要通过两种方式传参 1.query方式传参和接受参数 this.$router.push({ path:''/xxx'' query:{ idname:id } }) 接收的方式:this.$route.query.id 2.params...[2020/3/3]

vuex(vue状态管理)的特殊应用案例分享

有需求才会有应用! 需求:vue项目中,我需要一个类似全局的变量保存一个tag的值,在不同层级下的子组件中,对这个变量进行修改,并且使变化的结果作用在组件页面上。 这里使用vuex解决问题,代码如下: import Vue from ''vue'' import Vuex f...[2020/3/3]

vue倒计时刷新页面不会从头开始的解决方法

开启倒计时,直接保存到vuex中,且存储到本地持久化 state.js const runTime = localStorage.getItem(''time''); paymentRunTime:runTime mutations.js TimeRe...[2020/3/3]

vue中改变滚动条样式的方法

写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。  用知识改变命运,让我们的家人过上更好的生活...[2020/3/3]

使用vue打包进行云服务器上传的问题

vue中目录最后的vue.config.js文件中第27行的pulicpath改成./ src目录下的man.js中30到33行注释掉 将目录中的.env.development和.env.production中的 改成自己的域名和端口号 !!!!!!!!!!!!...[2020/3/3]

vue学习笔记之动态组件和v-once指令简单示例

vue学习笔记之动态组件和v-once指令简单示例

本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考,具体如下: 点击按钮时,自动切换两个组件 <component :is="type"></component>,当点击按钮之后,会自动清除原来的组件,显示新的组件。 每一次切换,都需要销毁+创...[2020/3/2]

Win环境下安装vue及运行vue开发的前端项目

vue安装及配置 首先下载node.js要求版本在8.9以上        官网:https: nodejs.org/zh-cn/ 下载完可检查在windows任务命令行里输入node -v 使用淘宝NPM镜像...[2020/2/28]

element el-tree组件的动态加载、新增、更新节点的实现

最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈 说正事,我需要动态的加载出整个树形结构,刚好就有 符合需求,啦啦啦 用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜。。。 <t...[2020/2/27]

ElementUI中el-tree节点的操作的实现

ElementUI中el-tree节点的操作的实现

其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys();这个原生态的方法。官方文档上说的是,返回一个数组。有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了。 废话不多说,直接上代码 html ...[2020/2/27]

ElementUI Tree 树形控件的使用并给节点添加图标

ElementUI Tree 树形控件的使用并给节点添加图标

前言:   因为项目需要用Vue做一个管理系统,其中有一个公司部门的管理页面有用到ElementUI 的树形控件,但是结构中没有使用chexkBox选项框,针对这个功能碰到的一些问题做一下总结 一,数据渲染 1)在<el-tree>标签中绑定data属性 ...[2020/2/27]

element-ui table行点击获取行索引(index)并利用索引更换行顺序

1)将每一行的索引插入操作行中,即为每一行数据添加一个属性index 使用el-table已经给处的方法:tableRowCla Name html中: <el-table :row-cla -name="tableRowCla Name"></el-tab...[2020/2/27]

vue学习总结

1.Vue的两个核心:   数据驱动、组件系统     数据驱动:ViewModel,保证数据和视图的一致性。     组件系统:应用类UI可以看作全部是由组件树构成的。   2.在vue中is的使用场景: 改变html标签...[2020/2/12]

vue-socket.io跨域问题有效解决方法

网友问题: 使用了vue-cli这个脚手架工具。在开发环境中如何配置跨域这个我懂。但是使用npm run build后,里面所有的ajax的跨域请求url都变成了根目录。 这样该如何解决部署的跨域问题? 报错信息: Acce to XMLHttpRequest a...[2020/2/12]

vue中英文切换实例代码

1、安装 vue-i18n依赖 yarn add vue-i18n 或者 npm install vue-i18n --save-dev 2、在src/components下新建文件夹language,并在文件夹language下新建zh.js及en.js 【src...[2020/1/21]

vue基础中的注意事项,以及一些学习心得

vue中你不知道的东西、以及注意事项 v-html 使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值,且使用v-html的时候不要将他设置为给用户提供内容的地方,因为v-html很容易被XSS攻击 v-bind 使用v-bind绑定属性值为布尔值的属性时,如果数据为t...[2020/1/19]

一起学Vue之事件处理

一起学Vue之事件处理

在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正。 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。如下所示: 1 <button v-...[2020/1/19]

vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

0.效果演示 插入视频插不进来,就很烦。可以出门右拐去优酷看下(点我!)。  1.后端搭建 1.1项目结构 首先看一下后端的server目录  挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,modules就是操作数据库的mongoose模型。 con...[2020/1/19]

vue中使用WX-JSSDK的两种方法(推荐)

vue中使用WX-JSSDK的两种方法(推荐)

公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效。 一、通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-...[2020/1/18]

vue koa2 nuxt.js 从零开始做个人博客(一) 登录注册功能前端部分

vue koa2 nuxt.js 从零开始做个人博客(一) 登录注册功能前端部分

0.效果演示 插入视频插不进来,就很烦。可以出门右拐去优酷看下(点我!)。  1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js。为什么使用nuxt.js? 首先我做的是博客的项目,所以SSR至关重要。虽然跟本文要讲的登录注册没有什么关系,但是文章如果...[2020/1/18]

vue 查看dist文件里的结构(多种方式)

场景:优化打包后的代码,提高性能。 1.方式一:report-json。   1.1 package.json文件里加入以下命令, "report": "vue-cli-service build --report-json"   1.2 然后控制台运行 npm run r...[2020/1/17]

vue下axios拦截器token刷新机制

创建http.js文件,以下是具体代码: 引入安装的axios插件 import axios from ''axios'' import router from ''@/router''; import Vue from ''vue'' const qs = require("qs"...[2020/1/17]

373
2
记录数:575 页数:1/1212345678910下一页尾页
加载更多