Vue2 组件:tab 标签页

这个组件实现了: 支持设置默认选中 支持 tab 嵌套 支持设置 tab 面签的排列方向 实现这个 tab 标签页效果我把它细分成了三个文件(Tabs.vue,TabsNav.vue,TabsPannel.vue).下面我们直接来看代码: Tabs.vue <template> <div :class="`ku-tabs ${finallyTabsPosition}`" v-if="panesSlots.length > 0"> <div class="ku-tabs-header"> <ku-tabs-nav ></ku...

2018
10-17

Vue2 组件:表格

表格在很多列表页中很常见,所以我们有必要把它封装成一个组件。 这个组件实现了: 表格标题对齐方式(alignTitle)及宽度可设置(width),可单独设置某个标题居中(align) 自定义字段排序(指定哪些列有排序功能) 大范围点击及精确点击都可触发 效果: 代码 <template> <div class="table-box" :class="tableClass"> <table> <thead :class="alignTitle"> ...

2018
10-10

Vue2+Koa2 图片上传功能实现

前言 对于一个博客网站来说附件上传功能可以说是不可或缺,特别是图片上传功能,谁都不愿意看到一个文字满天飞,图片一张都没的博客。这样会让别人的阅读欲望大打折扣。本文主要是分享一下 前端 vue2 加后端 koa2 实现的图片上传功能,没有太多多余的代码,直接把实战中的主要代码呈上,希望你喜欢。 准备工作 需要了解 formDate 需要了解 axios(网络通信库,简单的理解就是请求) 需要了解 koa-multer...

2018
06-10

Vue2 插件开发 Toast

前言 Vue 插件开发第一篇,这篇来做个简单的例子,Toast 弹窗提示,如果不知道如何制作 Vue 插件,可以看这里《Vue 插件编写的完整套路》。 基本文件结构 src ├── components │ ├── DetailPost.vue │ ├── EditPost.vue │ └── Home.vue ├── assets │ └── plugins │ └── toast.css ├── plugins │ └── Toast.js ├── router │ └── index.js ├── ...

2018
05-09

Vue $nextTick 解密

前言 Vue $nextTick 的用法在网上可以搜索出一大堆,基本都是大同小异,把官方的话搬过来改改,或者把 Vue $nextTick 的源码实现分析一遍,然后,然后你就很容易被带走了,在不归路上起走起远。在这里没有针对谁,也不是说分析源码没有,或者没必要。我觉得源码分析分析到了点上就 OK,点到为止,不然很容易让初学者找不到北,越想越多,还没开始学他就已经想跑路了。 关于 $nextTick 比如官方这么一句话...

2018
05-06

Vue 里的十万个为什么

前言 正如标题所说的,本文主要是分享一些关于 Vue 中的为为什么,但标题中的十万个有点夸张了,不过这也不重要,重要的是本文会持续更新,把 Vue 中的一些容易产生疑问的知识点收录进来。 vue-cli 创建的项目为什么会有两个 id=”app”? index.html是html文件的模板,将来启动项目后要把动态生成的模板都会放在id为app这个div中。 在App.vue中也有一个id为app的div,这并不冲突,可以看下m...

2018
04-30

Vue2 实现代码高亮功能

前言 本来这是一个很简单的问题,直接引入第三方插件,然后安装第三方插件的教程写几行代码就可以了,但这是理想的状态,在实际开发中,肯定会遇到各种情况,导致代码没有亮度。 基于 highlight.js 实现 安装 highlinght.js npm install highlight.js 下面我们先来基本按照 highlight.js 官方教程来实践一下。 引入 js 库 highlight.js 和样式表 github.css,官方提供了很多种主题,所有的主题样式文...

2018
04-15

Vue2+Express 项目开发环境搭建

前言 之前分享过一篇《Vue+Express+MongoDB 搭建极简版个人博客(增删改查)》,但没有怎么细说如何搭建 Vue+Express 开发环境。所以在这里就分享下。也算是一个记录吧! Vue+Express 项目开发环境搭建之旅 首先我们依次执行如下命令行, 安装 vue 环境 // 安装 vue-cli 脚手架 npm install -g vue-cli // 创建并初始化一个项目目录 vue init webpack myapp // 切换到项目目录 cd myapp // 安...

2018
04-12

Vue2+Express+MongoDB 搭建极简版个人博客(增删改查)

前言 这个示例没有过多的修饰,没有好看的界面,只是从功能实现出发,不保证好看,但保证能用,这个示例通过 vue+express+ mongodb 搭建极简版个人博客,实现博客文章管理中简单的增删改查。 个人博客搭建之旅 简单的文件结构 ├── server │ ├── modules │ │ └── index.js // mongooes 模型 │ ├── api.js // 后台的所有接器都放在这里 │ ├── db.js // 数据库连接信息...

2018
04-08

Vue2 vuex 状态管理详解

前言 在 Vue 中有一个统一管理状态的地方,没错它就是将要出场的 vuex ,vuex 是用来管理状态的,状态是什么?说得接地气点就是一些变量,这些变量可以通过特定的方式在全局中调用,让不同组件之间的数据通信变得如鱼得水。 vuex 状态管理之旅 vuex 是什么 官方有这么一小段话: 官方定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...

2018
04-01

Vue2 父子组件通信的奥秘

前言 组件通信,在 Vue 中非常地常见,我们必需得会,不仅仅如,我们还得会父子组件间通信的各种套路,所以本文要分享的就是这个,一步一步来解开父子组件通信的奥秘。 父子组件通信之旅 说起父子组件之间的数据父互,我想你脑中已经有了不二仁选,比如在父组件中添加属性来跟子组件进行单向数据传递,并在子组件中通过props 来接收。这种方式接收到的数据你不能直接修改,不然会毫不客气地给你报错 ...

2018
03-28

Vue2 App 框架级页面过渡效果(IOS 版)

前言 页面过渡效果现在的 APP 一抓一大把,比如:微信,QQ。个人认为页面的过渡效果对于提高用户体验来说,有很大的作用。谁不喜欢看到一个活生生的应用,谁又会喜欢古董级的应用?所以这篇文章就是让你体验下页面平滑过渡的那种细腻的,如丝般顺滑的感觉,感觉有了什么都好说。 这里说的 IOS 版本不是说只适用于 IOS ,而是页面效果切换是类 IOS 的切换动画效果。 Vue 页面过渡之旅 那我们就开始吧,...

2018
03-24

Vue2 生命周期钩子

前言 不管是 Angualr 还是 Vue,都会有自己的生命周期勾子,有了这些勾子函数,我们就可以很容易地云在特定的时刻执行一些相关的操作。比如在数据更时,在组件销毁时等等。 下面我们先来看一个官方给我们提供的一个生命周期勾子的显示图: 看完这个图我相信你已经知道 Vue 的生命周期有了大概的认识。为了让你更直观地知道这些生命周期勾子函数都是什么时候触发的,下面我写了一个简单的示例,运行下面...

2018
03-18

Vue2 Element dom.js 详解

一个 dom.js 模块功能比较简单,把一些常用的 dom 操作封装在这里。比如:类的添加删除,样式的设置等。 dom.js /* istanbul ignore next */ import Vue from 'vue'; // 运行环境 const isServer = Vue.prototype.$isServer; // 匹配 “:”,“-”,“_” 中的任意一个,但每一个都可以重复,并且连带后面的一个字符(用于改为大写) const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; // 匹配 moz开头...

2018
03-14

Vue2 Element 模仿秀-输入框篇(Input)

前方 这里文章主要分享Element 对 input 输入框在组件封装。但是本文没有把关于 input 的输入框所有组件都模仿一遍,原因有二:1、官方介绍 input 类组件中包括了其它组件相对较复杂的组件,比如:select 组件、autocomplete 组件,在这里我打算把它分开来模仿。2、如果都放在一篇文章中,代码会很多,不便于阅读理解。 文件结构 ├── index.html ├── mixins │ └── emitter.js ├── utils │ ├── cal...

2018
03-13

Vue2 axios 服务器通信

前言 是想使用 axios 我们不可避免地要跟数据打交道,所以在这里我们得做一些请求接口来模拟数据的请求,这里我们使用 easy-mock,类似的工具还有 JSONPlaceholder 不过 JSONPlaceholder 相对来说会比较麻烦一些,我也没有用过,easy-mock 非常容易上手,你只需要到官方网站中注册一个帐号,然后就可以新建一些接口了。至于怎么新建可以看官方文档教程,在这里不多说。 vue axios 之旅 首先在使用 axio...

2018
03-13

Vue2 Element calcTextareaHeight.js 详解

前言 这是在模仿 input 的 textarea 的时候遇到的一个文件,这个文件主要的作用就是实现 textarea 的高度可自适应的功能,代码量不多,但也有必要解释下里面的代码是什么意思。下面直接把代码贴出来。代码中含有注释。 calcTextareaHeight.js 深入浅出 calcTextareaHeight.js let hiddenTextarea; // 预置一些样式,供后面直接使用 const HIDDEN_STYLE = ` height:0 !important; visibility:h...

2018
03-12

Vue2 Element 模仿秀-多选框篇(Checkbox)

前言 这篇主要是介绍 Vue Element 中的多选框,没有太多的言语,放都放在了代码的字里行间中,下面我们就来看看 Element 官方组件库是怎么实现 checkbox 组件的。代码比较多,建议要有针对性地看。比如,你在看源码的时候没看懂,那么你看到这篇文章就再好不过了。 在开始之前我们先来简单的看看代码文件结构: ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunksu...

2018
03-07

Vue2 Element emitter.js 详解

最近在学习 Vue Element 组件库的时候,遇到了一个 emitter.js,一开始不是很理解它的作用,后面慢慢地就明白了其中的奥秘,所以在这里记录下来,分享有需要的朋友,如果你是大神,那么请跳过,以免浪费你宝贵的时间。毕竟人生苦短,流年似水,韶华难再。 emitter.js function broadcast(componentName, eventName, params) { this.$children.forEach(child => { var name = child.$options.co...

2018
03-06

Vue2 组件懒加载

前言 相信你之前已经听说过图片懒加载,对其中的实现原理也可能已经略知一二,如果是的话,那么本文所说的 vue 组件懒加载中的懒加载也是差不多的原理,只不过触发的条件和要显示的东西有区别罢了。图片懒加载:当图片滚动到页面中时才会被加载,vue 组件懒加载:当路由被访问时,对应的组件才会被加载。 vue 组件懒加载之旅 旧写法 要想做到 vue 组件的懒加载非常地简单,只需要在路由配置中添加一...

2018
03-04

Vue2 Element 模仿秀-单选框篇(Radio)

前言 这里 Vue Element 模仿秀的第二篇:单选框。经过第一篇的洗礼,对 Element 组件库有了基本的了解,并慢慢地爱上了 Element 模仿秀,在模仿的过程当中,真的可以学到很多东西,有一种豁然开朗,柳暗花明又一村的感觉,下面进入正题。 在开始之前,我们不妨先来看看模仿秀的示例演示: 效果图跟官方的基本保持一致,功能也非常接近。下面我们就来深入代码内部,看看 Element 源码的大致实现思路,代码...

2018
03-02

Vue2 插件编写的完整套路

前言 这篇文章主要是分享下如何编写一个 Vue 插件,就像官方提供的路由插件一样,我们可以通过根实例对象的 use() 方法来把插件挂载到根实例身上,其实说白了就是把一个对象(含有属性或方法)根实例的原型上。让其它继承于根实例的实例可以直接使用这个对象的属性或者方法。我们把本地缓存做成一个插件,下面就是完成这个插件的步骤: Vue 插件编写之旅 步骤一: 这一些就是从无到有,创造一个本地缓...

2018
02-27

Vue2 导航守卫(钩子函数)

前言 所谓的 Vue 路由导航守卫,也就是我们常说的生命周期钩子函数,导航守卫只是官方的称呼,在这里我们不妨把它叫做钩子函数,钩子函数的意思就是在特定的时刻 Vue 会自动触发这个方法,我们可以通过这些个钩子函数,实现一些功能,比如,某些页面需要登录后才可以访问、某些页面需要用户达到什么等级才可以访问,又或者是跳转页面后修改一些信息等等,我们就可以通过路由导航守卫来拦截并作相应的处理...

2018
02-26

Vue2 编程式导航

前言 编程式导航,其实就是把浏览器的一些前进,后退按钮放到页面中实现而已,不过利用它,我们就可以很方便地对路由的前进后退进行跳转了。这个功能对于用户来说还是挺实用的,因为很多时候用户都会去点浏览器里的前进后退按钮,就看你想不想把它放到页面中了,假设我们要这么做,那么我们就来看看要怎么才能实现这个效果。 这个示例我们用了 Bootstrap 框架的一些样式,所以如果你是拷贝这个示例代码并...

2018
02-25

Vue2 导航切换过渡动画

前言 Vue 导航切换过渡动画很常用,页面使用上了过渡动画,用户体验更上一层楼,Vue 的过渡动画内容不多,但是我们可以通过它来实现很多不同的动画效果,它主要是配合 CSS 样式来实现动画效果的。下面我们就来看看 Vue 的导航切换时的过渡动画。 Vue 动画之旅 首先们来先来看一个比较简的示例,我们直接在App.vue 根组件中写代码: App.vue <template> <div id="app"> <ul>...

2018
02-25

Vue2 百科全书(珍藏版)

前言 为了让学习更加高效,在实战中更加如鱼得水,整理是在所难免的,所以在这里我把 Vue 的一些常用的知识点,整理收藏成篇,前人种树,后人乘凉。这是一篇关于 Vue 的百科全书。你准备好了吗,我们现在就开始! 路由篇 路由跳转 跳转标签尽可能地使用 <router-link to=”/home”></router-link> 的形式来进行跳转。 这样写我们就可以很方便地只需修改 VueRouter 对象中的 mo...

2018
02-24

Vue2 Element 模仿秀-按钮篇(Button)

前言 Element UI 做得还是不错的,我第一次看到时都被征服了。所以我觉得有必需把官方的示例尽可能的自己撸一遍。从中一定可以学到不少东西。 这篇文章是 Vue Element 模仿秀的第一篇:按钮组件。 文件结构 ├── index.html ├── assets │ ├── fonts │ │ ├── yunkus-icons.ttf │ │ └── yunkus-icons.woff │ └── icon.css ├── main.js ├── router │ └── index.js # 路由配置文件 └─...

2018
02-23

Vue2 实现时空穿梭框功能模块

前言 这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能。勾选了的项就会进入到另一个框中。 时空穿梭框之旅 示例演示: 这个时空穿梭框实现了: 1、可以全选、反选 2、没有选中时,不可以点穿梭按钮 3、自动计数(共有多少个,选中了多少个) 4、没有数据时,全选不可点击 这里主要是想通过这个示例来抛砖引玉,更多的功能,你可以根据自己的实践需要来实现。下面我们就来看看这...

2018
02-22

Vue2 实现树形菜单(多级菜单)功能模块

前言 之前博客里分享过一篇用《Angular 实现树形菜单(多级菜单)功能模块》,而在由于战略转移,所以我给 Vue 也来了一份。功能差不多,不过由于这个是第二次做,会对之前的一些不足作一个修正。下面来看看 Vue 树形菜单。 在做这个 DEMO 的时候我是用了vue 的脚手架(vue-cli)的,关于脚手架可以看这里《Vue 脚手架(vue-cli)安装及详解》所以结构看起来就像下面这样: 结构示意图 ├── index.html ├─...

2018
02-15

Vue2 脚手架(vue-cli)安装及详解

生命不停,更新不止。虽说快过年了,但学习还是必须坚持的,之前一段时间比较粗略地学习了下 Angular ,但由于战略有调整,所以现在把研究 Angular 的时候转到了 Vue 身上,我不敢说在 Angular 和 Vue 中,哪一个前端框架比较好,毕竟我对 Angular 也不是很熟悉,至于 Vue 正如你看到的,我才刚刚开始学。所以这个好与不好,只能自己试过了知道,存在即是合理,所以我们在把这两者放在一起来作对比估计也很...

2018
02-13