vue

Vue仿今日头条实例详解

Vue仿今日头条实例详解

前言vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在 Easy Mock 自己生成API也可直接登陆我这项目的Easy Mock账号密码:账号: vue-toutiao密码: 123456如果你想修改接口,请copy一份在修... »

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

我给每个订单状态的组件一个不同的数字,根据这个数字,判断组件是左滑动的动画还是又滑动的动画 总结以上所述是小编给大家介绍的基于Vue、Vuex、Vue-router实现的购物商城,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 »

Vue侧滑菜单组件——DrawerLayout

Vue侧滑菜单组件——DrawerLayout

本文介绍一个简单的DrawerLayout布局组件的实现,基于Vue.js。介绍的内容已经制作成 vue-drawer-layout 组件。前言大家有兴趣先用手机扫一扫这个二维码,或者点我然后点击页面中左上角的头像打开drawer或者向右向左拖拽,就可以看到下面gif的效果,打开自己的手机QQ,是不是很像:)谷歌官方把这种布局叫做DrawerLayout。所以绑定 touchend 事件的方法时要... »

基于Vue的移动端图片裁剪组件功能

基于Vue的移动端图片裁剪组件功能

最近项目上要做一个车牌识别的功能。其中两个canvas都会加载同一张图片,只是起始坐标不一样。取消 确认 三、初始化canvascanvas绘制的图片在hdpi显示屏上会出现模糊,具体原因这里不作分析,可以参考下这里。最后还要记录一下两个canvas坐标原点的x, y差值。 »

路由效果图

Vue.js系列之vue-router(上)(3)

说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。  1.Vue.js系列之项目搭建... »

vue下axios拦截器token刷新机制的实例代码

//创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSub... »

Vue实现商品飞入购物车效果(电商项目)

Vue实现商品飞入购物车效果(电商项目)

各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程。 »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »

用vscode开发vue应用的方法步骤

用vscode开发vue应用的方法步骤

现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情。 我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标... »

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果   安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplem... »

修改vue源码实现动态路由缓存的方法

修改vue源码实现动态路由缓存的方法

动态路由 官网解读 :我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。 即如果你有一个 盘点录入单 路由,但你想通过不同的传不同的 ID 来加载 CheckInputInfo... »

vue下axios拦截器token刷新机制的实例代码

//创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSub... »

Vue实现兄弟组件间的联动效果

Vue实现兄弟组件间的联动效果

首先在list页面中先定义letter,然后利用监听器,一旦letter变化,只要letter不是空,那么就让滚动条滚动到这个元素的起始位置最后记得在城市列表区域内注册一个引用信息:ref=key,用来监听你选中的key值保存后,实现了联动效果。总结以上所述是小编给大家介绍的Vue实现兄弟组件间的联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 »

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

场景:优化打包后的代码,提高性能。 1.方式一:report-json。   1.1 package.json文件里加入以下命令, "report": "vue-cli-service build --report-json"   1.2 然后控制台运行 npm run report   1.3 结果:会在dist文件夹里生成 report.json。里面有打包后每个文件的来源。 2.方式二:使用... »

浅谈Vue.use到底是什么鬼

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?如 vue-router无论大小,插件要实现的功能无非就是上述这几种。固Vue提供了use方法,专门来在new Vue()之前使用插件。Vue.js 的插件应该暴露一个 install 方法。 »

vuejs中父子组件之间通信方法实例详解

本文实例讲述了vuejs中父子组件之间通信方法。 »

ant-design-vue 快速避坑指南(推荐)

ant-design-vue 快速避坑指南(推荐)

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。 本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架... »

详解搭建一个vue-cli的移动端H5开发模板

简介 vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发。 技术栈:vue + vux + axios + less 源码地址:https://github.com/Michael-lzg/vue-mobile 功能 搭建项目目录 配置 css 预处理器 配置 UI 组件库 vux 解决移动端适配 配置页面路由缓存 ax... »

Ant Design Vue 添加区分中英文的长度校验功能

原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适。* @param min * @param max * @returns */ length{ return function{ //将一个全角字符替换成两个半角字符,以得到真实长度。let realLength = value.replace.length; realLength = min ... »

vue项目中使用eslint+prettier规范与检查代码的方法

vue项目中使用eslint+prettier规范与检查代码的方法

使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。EsLint 则是其中一个很好的工具。并使用 Prettier 格式化代码,使样式与规则保持一致。 »

详解vue中v-bind:style效果的自定义指令

详解vue中v-bind:style效果的自定义指令

自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令。 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时……... »

vue-cli3 取消eslint校验代码的解决办法

vue-cli3 取消eslint校验代码的解决办法

在网上找了各种办法都没解决,看了下文档就解决了关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line. 注意我这里是VUE3.0解决方法:找到文件vue.config.js 打开文件修改lintOnSave 为false,如果没有就添加lintOnSave 为false下图: »

vue.js iview打包上线后字体图标不显示解决办法

在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-s... »

关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题

关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题

首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用 诸如以上所示,该问题,百度了好久,多亏群里大佬。 vue使用less报错的解决方法 安装less less-loader cnpm install less less-loader --save-dev app.vue是所有XXX.vue文件的... »

vue elementui 实现搜索栏公共组件封装的实例代码

vue elementui 实现搜索栏公共组件封装的实例代码

1、背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一。 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一。 完成后的效果大概就是长这样: 2、分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件... »

Page 1 of 180123»