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

vue中destroyed方法的使用说明

我们从destroyed的字面意思可知,中文意为是“销毁”的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如: 销毁监听事件 destroyed() { window.removeEventList...[2020/7/21]

Vue-resource安装过程及使用方法解析

1、安装 npm install vue-resource --save 2、在main.js中添加 import VueResource from ''vue-resource'' 全局注册 Vue.use(VueResource) 3、vue-reso...[2020/7/21]

vue 清空input标签 中file的值操作

template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathCl...[2020/7/21]

Vue清除定时器setInterval优化方案分享

两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称: data() { return { timer: null 定时器名称 } }...[2020/7/21]

解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果。 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类。我们看审查元素,一开始display:none; 在beforeActive中display:block;只是b...[2020/7/21]

vue 实现setInterval 创建和销毁实例

问题 setInterval 是间隔调用,与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。 比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志: <template> <div> &l...[2020/7/21]

解决vue中el-tab-pane切换的问题

解决vue中el-tab-pane切换的问题

今天在编写vue的时候用到了el-tabs,然后遇到切换的时候,在次打开el-dialog还是上次的状态(因为两次打开的el-tab-pane数量不一样,就出现了问题) 如下: 第一次打开时的状态,打开到第二次的时候 解决方法 给el-tab-pane命名 &l...[2020/7/19]

vue2.* element tabs tab-pane 动态加载组件操作

一、重要部分 1、 注意 <component :is=item.content></component> :表明模板 <el-tab-pane v-for="(item) in editableTabs" :key="it...[2020/7/19]

解决vue项目router切换太慢问题

问题定位: 随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时。然后在第一个页面的destr...[2020/7/19]

解决vue+router路由跳转不起作用的一项原因

如下所示: Vue.use(Router) export default new Router({ mode:''history'', routes: [ { path: ''/'', component: Login }, { path: ''/login'',...[2020/7/19]

vue-router之解决addRoutes使用遇到的坑

最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下。 场景复现: 做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是: 前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之...[2020/7/19]

vue实现的多页面项目如何优化打包的步骤详解

遇到的问题 在多页面框架打包的过程中会,随着业务的增加页面越来越多,使用的三方包也会越来越多,但并不是所有页面都会使用到三方插件,使用webpack打包会让所有的三方包打包到一起,会导致vendor.js(三方包打包后的文件)越来越大,即使没使用过三方插件的页面也会引入,页面加载会越来越慢. ...[2020/7/19]

Vue项目前后端联调(使用proxyTable实现跨域方式)

vue本地项目调试线上接口出现跨域问题 使用方法:vue在配置文件中提供了proxyTable来设置跨域,在config文件夹的index.js文件中 dev: { 开发环境下 静态资源文件夹 a etsSubDirectory: ''static'', ...[2020/7/18]

理解Proxy及使用Proxy实现vue数据双向绑定操作

1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象。 如果对vue2.xx了解或看过源码的人...[2020/7/18]

vue 使用async写数字动态加载效果案例

父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from ''./I...[2020/7/18]

vue中用 async/await 来处理异步操作

昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了。 先说一下async的用法,它作为一个关键字放到函数前面, async function timeout() {  ...[2020/7/18]

vue中移动端调取本地的复制的文本方式

我就废话不多说了,大家还是直接看代码吧~ _this.$vux.confirm.show({ title: ''复制分享链接'', content: ‘分享的内容'', onConfirm() { _this.$vux.toast...[2020/7/18]

Vue移动端项目实现使用手机预览调试操作

最近在开发移动端Vue移动端项目,查了一些资料,这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi; b.笔记本也可以直接启用一个wifi,手机链接笔记本wi...[2020/7/18]

完美解决通过IP地址访问VUE项目的问题

第一步 1.将config里面的host设置成0.0.0.0 host: ''0.0.0.0'', 2.修改package.json "scripts": { "start": "cro -env NODE_ENV=development webpack-de...[2020/7/18]

vue element table中自定义一些input的验证操作

官网原话 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 表单 el-form表单必备以下三个属性: :model="ruleForm" 绑定的数据内容 :rul...[2020/7/18]

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

1.表格动态添加,也可删除 <template> <div cla ="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @cl...[2020/7/18]

vue+elementui实现点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件 查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :d...[2020/7/18]

解决Vue @submit 提交后不刷新页面问题

解决Vue @submit 提交后不刷新页面问题

我就废话不多说了,大家还是直接看代码吧~ <form @submit="add"> <!-- 表单 --> </form> add: function(e){ 阻止页面刷新 e.preventDefault();...[2020/7/18]

vue-router为激活的路由设置样式操作

1.首先先写好类名 2.在router里的js文件中添加 linkActiveCla :''active'' 补充知识:记录vue遇到问题,子页面没有router-link对应导航栏激活样式 如下所示: li><router-link to="/basi...[2020/7/18]

最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from ''vue'' import VueAMap from ''vue-amap'' import ElementUI from ''element-ui'' ...[2020/7/17]

Vue实现背景更换颜色操作

如下所示: <!-- 分页上下页改变背景图效果 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X...[2020/7/17]

vue-cli4项目开启eslint保存时自动格式问题

最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结 vscode首先安装eslint插件 配置vscode的自动保存eslint格式 Ctrl+shift+p ...[2020/7/13]

Vue组件间数据传递的方式(3种)

vue中传递数据的方式有哪些 数据流的方式传递数据 通过 props 传递属性 父级给demo2组件绑定一个msg数据 父组件 <template> <div cla =''container''> <demo2 :...[2020/7/13]

详解Vue+elementUI build打包部署后字体图标丢失问题

错误描述: Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack mod...[2020/7/13]

深度解读vue-resize的具体用法

深度解读vue-resize的具体用法

前言 作为一名优秀的前端来说,在平时的造火箭(拧螺丝)过程中,难免要遇到一个情况,就是当窗口resize的时候,我们要进行监听,常见的方案就是 element.addEventListener("resize", cb) 但是对于切过五彩斑斓的黑的你来说,肯定也知道,如果在短时间内多次re...[2020/7/8]

Vue简单语法实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https: cdn.sta...[2020/7/6]

详解vue3.0 diff算法的使用(超详细)

详解vue3.0 diff算法的使用(超详细)

前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇。尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其...[2020/7/1]

vue商城中商品“筛选器”功能的实现代码

   在使用vue搭建商城项目的时候,要实现一个商品筛选器的功能,在完成之后,再一次被vue的数据驱动的强大感到震撼!        首先,我们来看一下具体的需求吧。你可以先看下面的这两张图,然...[2020/7/1]

vue实现简单图片上传

本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 功能 实现图片上传 显示进度条 <template> <div cla ="about"> <div> <div>...[2020/6/30]

vue实现购物车列表

本文实例为大家分享了vue实现购物车列表的具体代码,供大家参考,具体内容如下 功能: 删除 单选 全选 增加数量 减少数量 计算总价 计算数量 搜索 代码: <!DOCTYPE html> <!DOCTYPE h...[2020/6/30]

vue基于better-scroll实现左右联动滑动页面

本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面,供大家参考,具体内容如下 界面如下: vue模板 <template> <div cla ="goods"> <div cla ="menu-wrapper...[2020/6/30]

vue使用better-scroll实现滑动以及左右联动

本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1"  版本以github上为准(目前最新) ...[2020/6/30]

vue基于better-scroll仿京东分类列表

本文实例为大家分享了vue基于better-scroll仿京东分类列表的具体代码,供大家参考,具体内容如下 效果图和目录结构 1、main.js(需要安装router) import Vue from ''vue'' import App from ''./...[2020/6/30]

vue开发简单上传图片功能

本文实例为大家分享了vue实现简单上传图片功能的具体代码,供大家参考,具体内容如下 vue简单的上传个图片的功能,主要代码: <template> <div cla ="plan_list"> <div cla ="plan_name...[2020/6/30]

vue实现数字滚动效果

本文实例为大家分享了vue实现数字滚动的具体代码,供大家参考,具体内容如下 <template> <div cla ="num-block"> <div cla ="num-block_show"> <div cla ="nu...[2020/6/29]

vue实现登录拦截

本文实例为大家分享了vue实现登录拦截的具体代码,供大家参考,具体内容如下 需求:用户只有登录了,用户名存储在本地储存时,才能进入首页,如果本地存储没有用户名,就不能进入首页 1、登录页面的实现 <template> <div cla ="htmleaf-...[2020/6/28]

Vue如何提升首屏加载速度实例解析

在Vue项目中,引入到工程中的所有js、c 文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor...[2020/6/25]

vue.js实现照片放大功能

本文实例为大家分享了vue.js实现照片放大的具体代码,供大家参考,具体内容如下 这里就不放图了,放大的是别人的身份证 <template> <div cla ="image-cell__wrapper" :style="border"> <s...[2020/6/23]

详细分析vue响应式原理

前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点,也是面试加分项。 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它们有助于理解流程 将流程拆分,理解其中的作用 结合以上的点,理解...[2020/6/22]

Vue循环遍历选项赋值到对应控件的实现方法

老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助 https: blog.csdn.net/yyp0304Devin 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型...[2020/6/22]

云开发-web应用中使用数据库

如何在 web 应用中使用数据库 随着云时代的到来,云开发有着独特的优势相对于传统开发,从数据库而言,cloudbase 提供的云数据库真的很方便,本文就以一个简单的 todolist 小例子来讲解一下如何在 web 应用中使用云开发数据库 构建简单的界面 下面的这个 todolist...[2020/6/19]

vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性。在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。 插槽 省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这...[2020/6/19]

vue proxy 的优势与使用场景实现

1.前言 随着 vue3.x 的消息越来越多, proxy 的讨论也。相对于 Object.defineProperty , proxy 有什么区别,有什么优势,以及可以应用在什么地方。该文章就简单的介绍下 2.Object.defineProperty 讲 proxy 之前,先回顾下...[2020/6/15]

vue实例的选项总结

vue实例的选项总结

一、数据 API:https: cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE 1. data 类型:Object | Function 限制:组件的定义只接受 function 详细:Vue 实例的数据对象...[2020/6/9]

详解vue高级特性

详解vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平。 一、watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ doSomething } } 实际上,Vue对watch提供...[2020/6/9]

373
2
记录数:702 页数:1/1512345678910下一页尾页
加载更多
 友情链接: NPS  问卷模板