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

Vue组件实现触底判断

本文实例为大家分享了Vue组件实现触底判断的具体代码,供大家参考,具体内容如下 非常简陋的代码,以后有空回来完善 子组件代码: <template> <div cla ="scroll"></div> </template>...[2019/6/26]

Vue实现日历小插件

本文实例为大家分享了Vue实现日历小插件的具体代码,供大家参考,具体内容如下 先看下效果图吧, 如下 源码可见于我的github 实现关键点: 1.组件的复用以及父子组件传值 很明显每年每个月的月历样式(数据不一样)是一致的,那么自然而然思路就是把每个月作为一个公用组件进...[2019/6/26]

vue实现记事本功能

本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/h...[2019/6/26]

vue实现简单的日历效果

最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回。 需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改。 vue就不多说了,在vue中使用的...[2019/6/26]

深入理解Vue组件3大核心概念

摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。 本文的代...[2019/6/21]

Vue.js中的extend绑定节点并显示的方法

在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象。其中,在extend中的data和vue实例化对象中的data写法不一样。下面利用实例说明,操作如下: 第一步,创建一个静态页面并引入vue.js文件,并在主体元素标签中插入一个div,设置i...[2019/6/21]

利用vue-i18n实现多语言切换效果的方法

前言 有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。 安装vue-i18n 我们使用npm安装vue-i18n...[2019/6/19]

简单学习5种处理Vue.js异常的方法

错误大全 为了测试各种异常处理技巧,我故意触发三种类型的错误。 第一种:引用一个不能存在的变量: <div id="app" v-cloak> Hello, {{name}} </div> 上述代码运行后不会抛出错误,但是在控制台会有[V...[2019/6/18]

详解element-ui设置下拉选择切换必填和非必填

➢ 需求 默认都是必选 下拉选择的时候 选择必填,活动名称为必填,需要校验和显示* 选择非必填,活动名称不做校验,隐藏* ➢ 初始校验规则 经测试,网上其他的方式都没有实现需求,动态切换rules中的required没有作用 因为按照以...[2019/6/17]

详解vue微信网页授权最终解决方案

vue微信网页授权,基于vue-cli3.0+webpack 4+vant ui + sa + rem适配方案+axios,开发的微信授权方案。项目地址:vue-wechat-auth 参考了[vue-wechat-login],思路有些不同,本文基于进入所有页面都必须先授权的操作。 与之...[2019/6/17]

最简单的vue消息提示全局组件的方法

简介 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 rc/toast/toast.vue <template> <...[2019/6/17]

vue store之状态管理模式的详细介绍

状态管理 一、状态管理(vuex)简介 uex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time...[2019/6/14]

详解vuex之store源码简单解析

详解vuex之store源码简单解析

关于vuex的基础部分学习于https: www.jb51.net/article/163008.htm 使用Vuex的时候,通常会实例化Store类,然后传入一个对象,包括我们定义好的actions、getters、mutations、state等。store的构造函数: exp...[2019/6/14]

vue路由插件之vue-route

vue路由插件,vuer Router,使vue官方的路由管理其,和vue高度耦合   1.vue-Router的使用   import Vue from ''vue'' import Router from ''vue-router'' 引入路由组件 Vue.use(R...[2019/6/14]

vue/vue-cli+express手把教你搭建SSR

最近简单的研究了一下SSR,对SSR已经有了一个简单的认知,主要应用于单页面应用,Nuxt是SSR很不错的框架。也有过调研,简单的用了一下,感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。 什么是SSR 把Vue组件渲染为服务器端的HTML字符串,将...[2019/6/13]

vuejs中拖动改变元素宽度实现宽度自适应大小

vuejs中拖动改变元素宽度实现宽度自适应大小

需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实...[2019/6/13]

Vue + Elementui实现多标签页共存的方法

这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿。 经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展。 关键逻辑 使用 keep-alive 来缓存各标签页 ...[2019/6/13]

基于Vue实现平滑过渡的拖拽排序功能

最近重读Vue官方文档,在 列表的排序过渡 这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下:   例子中实现的效果看起来还是非常不错的,这个效果使我想起来另外一个使用场景,之前我...[2019/6/13]

vue项目中将element-ui table表格写成组件的实现代码

表格中我们经常需要动态加载数据, 如果有多个页面都需要用到表格, 那我希望可以有个组件, 只传数据过去显示, 不用每个页面都去写这么一段内容: <el-table :data="tableData" border size="mini" fit highlight-current...[2019/6/12]

vue路由懒加载及组件懒加载

一、为什么要使用路由懒加载   为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义   懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 三、使用   常用的懒加载方式有两种:即使用vue异步组件 和 ES中...[2019/6/12]

vue2 中二级路由高亮问题及配置方法

vue2 中二级路由高亮问题及配置方法

实现效果图   1、项目中的图标使用的是element-ui框架中的图标,如果需要引入可以看我写的上一篇文章。 2、首先配置路由 我初始化项目的时候初始化了路由,所以打开router/index.js文件进行修改配置 router/index.js i...[2019/6/11]

移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

面向百度开发 html <van-uploader :after-read="onRead" accept="image/*"> <img src="./icon_input_add.png" /> </van-uploader>...[2019/6/10]

Vue响应式原理Observer、Dep、Watcher理解

Vue响应式原理Observer、Dep、Watcher理解

开篇 最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的。自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果😆 Object.defineProperty 相信很多同学或多或少都了解Vue的响应式原理是通过Object.de...[2019/6/6]

vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: ...[2019/6/6]

vue中v-show和v-if的异同及v-show用法

一、官方解释: 1.v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 3.相比之下,v-show 就简单...[2019/6/6]

详解vue父子组件关于模态框状态的绑定方案

日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div cla ="page-xxx"> 点击打开新增弹窗 <button>新增</button> 点击打开...[2019/6/6]

Vue实现微信支付功能遇到的坑

Vue实现微信支付功能遇到的坑

微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需 项目用VUE+EL搭建而成,支付用EL的radio来做的 <el-radio v-model="radio" label="weixin" > <i cla ="iconfont ico...[2019/6/5]

详解vue-cli3多页应用改造

需求 一个平台P,包含产品a、b、c、d、e。各产品UI样式风格统一,且会用到公共配置(HOST、是否添加埋点js)、组件(头部导航、表格、搜索框)、方法(请求拦截、生成UUID)。 现状:由于历史遗留原因,各产品为独立SPA、各自维护,配置、组件也都自成一体,只是大概样式上保持了一致,但...[2019/6/4]

Vue基础学习之项目整合及优化

Vue基础学习之项目整合及优化

前言 使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用,我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中,我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径,比如像这样 import HelloWorld...[2019/6/3]

Vue CLI3基础学习之pages构建多页应用

Vue CLI3基础学习之pages构建多页应用

前言 首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个 html 文件,那么多个单页便是多个 html 文件,多页应用便是由多个 html 组成的应用,如下图所示 既然多页应用拥有多个 html ,那么同样其应该拥有多个独立的入口...[2019/6/3]

细说Vue组件的服务器端渲染的过程

细说Vue组件的服务器端渲染的过程

声明:需要读者对 NodeJs、Vue 服务器端渲染有一定的了解 现在,前后端分离与客户端渲染已经成为前端开发的主流模式,绝大部分的前端应用都适合用这种方式来开发,又特别是 React、Vue 等组件技术的发展,更是使这种方式深入人心。 但有一些应用,客户端渲染就会遇到一些问题了: ...[2019/5/31]

Element-ui中元素滚动时el-option超出元素区域

复现场景, 看图 分析原因 为简单起见, 把选项区域描述为popperEl popperEl的z-index 比较大, 会覆盖在其他元素上面 popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) ...[2019/5/31]

详解Vue项目引入CreateJS的方法(亲测可用)

1 前 言 1.1 CreateJS介绍   CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 A suite of modular libraries and tools which...[2019/5/31]

Vue Router history模式的配置方法及其原理

Vue Router history模式的配置方法及其原理

vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http: yoursite.com#home,比较难看。后者的url表现形式为 http: yoursite.com/home,比较美观。 但如果要使用 history模式,我们需要在后端进行额外...[2019/5/31]

新手简单了解vue

新手简单了解vue

前言 作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法,刚好今天没事就给自己挖一个坑,分享一下我对vue的见解和一些领悟,整个专栏应该会包括vue,vue-cli,vue-router,vuex,nuxt和一些webpack的简单入门,当然实战项目也一定会放出来,更新频率...[2019/5/30]

详解vue-cli3开发Chrome插件实践

之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码。后来发现了 vue-cli-plugin...[2019/5/29]

vue-cli3中vue.config.js配置教程详解

前言 vue-cli3推崇零配置,其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了。 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals...[2019/5/29]

vue input输入框关键字筛选检索列表数据展示

想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码: html: <!-- 筛选demo --> <template> <div> ...[2019/5/29]

vue+Element实现搜索关键字高亮功能

vue+Element实现搜索关键字高亮功能

最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索。为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮。 一、实现思路 1 实时监控表格,实现关键字的定位; 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮)。 二、实现过程 1 搜索...[2019/5/29]

Vue实现表格批量审核功能实例代码

本文实例为大家分享了Vue实现表格批量审核功能的具体代码,供大家参考,具体内容如下 1 前端部分 效果如下图所示: 1.1 html部分 <el-form-item> <el-button type="succe " icon="el-...[2019/5/29]

vue+element实现表格新增、编辑、删除功能

需要做一个需求:新增一个xml文件时,添加数量不确定、属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样。 可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于...[2019/5/29]

Vue+Element实现表格编辑、删除、以及新增行的最优方法

之前已经实现了表格的新增、编辑和删除,在我的上篇文章中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入。从代码上来说,代码量也较大;而且使用的是原生的html标签,有点尴尬。 于是,进一步研以后,进行了一定的优化,直接使用vue的代码实现,不仅...[2019/5/29]

vue里的data要用return返回的原因浅析

官网的示例 var vm = new Vue({ el: ''#example'', data: { me age: ''Hello'' } }); 项目中的写法 data() { return { me age: ''Hello'' ...[2019/5/29]

Vue 无限滚动加载指令实现方法

也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了。 如果到了就触发事件,米到就不处理。 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度。  反正结果就是0。 一、获取滚动条位置 cla...[2019/5/28]

vue实现路由切换改变title功能

由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的 那么想实现路由切换title变换可以通过vue-router的导航守卫...[2019/5/28]

vue实现多条件和模糊搜索功能

本文实例为大家分享了vue实现多条件和模糊搜索的具体代码,供大家参考,具体内容如下 html <div cla ="content"> <div cla ="right"> <select name="sex" width=''100...[2019/5/28]

vue实现前台列表数据过滤搜索、分页效果

vue实现前台列表数据过滤搜索、分页效果

本文实例为大家分享了vue实现列表数据过滤搜索、分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="sc "> .job-wrapper { padding-top: 50px; } .job-left { f...[2019/5/28]

vue cli3.0 引入eslint 结合vscode使用

vue cli3.0 引入eslint 结合vscode使用

它的目标是提供一个插件化的javascript代码检测工具。官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况。所以引入 eslint 做代码检测 第一步 (安装) npm install e...[2019/5/28]

Vue项目使用localStorage+Vuex保存用户登录信息

Vue项目使用localStorage+Vuex保存用户登录信息

本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from ''axios'' const baseURL = ''http: XXX 全局的 axios 默认值...[2019/5/28]

Vue使用localStorage存储数据的方法

本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下 通过下面这个案例来了解localStorage的基本使用方法。 输入评论人、评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表。 1.先组织出一个最...[2019/5/28]

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