六小登登的专栏

最近项目中需要处理与图片相关的布局，不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果，你就需要找到适合的方式。而且图片往往是不可或缺元素。毕竟一图胜千言，有时候图片能给带来非常好的效果。比如我们每天都会使用的表情包，它往往能够表达出我们无法用文字描述的信息，还比如我们经常在公众号里看到的漫画虽然短短几个字，但是却能...

面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级。今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能。以下案例都是使用 Element-UI 进行实现。最笨的方式首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好。<template> <div class="example-co...

说说 Vue 中组件的缓存之前在《Vue一个案例引发的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个解决问题的思路，并没有说到多少组件缓存的东西，今天我们就来详细说说组件的缓存。组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来。自然就存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。...

在项目的开发过程中难免会遇到许多的坑，寻找答案成为了至关重要的一步，职场中解决问题的能力是必要切重要的，有些问题网上给的答案大多都是千篇一律重复性东西太多，而且还不能解决问题。往往花费很多时间把自己带进了坑里。因此把自己遇到的一些问题记录下来，以免后面再次遇到不知所措。项目使用的是 vue + element + axois。1. 前端发送的是否为 Ajax 请求在做用户超时登录时当用户超...

在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。最近在做项目时，就遇到了动态添加属性的案例。通常在单文件组件的开发模式中，我们会以如下的方式创建组件。<template> <span></span></template><script>export defau...

Vue 中有许多的指令提供我们使用。它可以让你进行一些模版的操作。但是内置指令，在实际的开发过程中可能这些并不能满足所有的需求。所以 Vue 给我们提供来一个灵活的方法「自定义指令」。说自定义指令之前，先看看什么叫「指令」。指令的概念指令是指可以控制操作 DOM 的一些小命令，通常以 v-前缀出现的特殊特性。例如我们经常使用的v-if、v-show、v-bind、v-on、v-html等...

最近在项目的开发中，出现一些格式化数据的情况，比如字母的大小写，比如一些价格的数据格式。等等一些格式的显示。NamePriceBTC$3896.23ETH$136.64在上面的表格中，我们需要处理数据的显示。这是我们时常遇到的情况。通常我们会直接处理数据的输出，可以这么做。computed: { result() { return th...

我们都知道 Vue 是采用组件化开发的模式，组件化的优势在于相对独立，易于维护，可复用。你可以把项目看成许多组件的组合而成。既然项目中存在很多的组件，而且又是相对独立的，但组件间肯定是存在数据的传递交互。Vue中给我提供比较多的方式去进行组件间的交互通信。这篇文章不打算详尽组件之间的通信，而是说说利用 $attrs 与 $listeners 进行「嵌套组件」的通信。可以想象一下项目中组...

我们都知道 Vue 采用的是一种组件化开发模式，组件在 Vue 中一个非常重要的核心概念。每个组件都是一个完整的实例，组件的创建，组件间的通讯，组件如何更好的复用，以及整个的生命周期的钩子。所以你会发现它都是围绕组件展开的。我们就来说说如何创建一个灵活的高复用的组件。之前分享过一篇「slot」内容分发的文章，它可以让我们组件的内容更加的灵活。有兴趣的可以看下。《Vue一个案例引发「内容分发sl...

前端组件化开发已经是一个老生常谈的话题了，组件化让我们的开发效率以及维护成本带来了质的提升。当然因为现在的系统越来越复杂庞大，所以开发与维护成本就变得必须要考虑的问题，因此滋生出了目前的三大前端框架 Vue、Angular、React。那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别。字符串形式Vue 最简单直接的一种定义组件模版的方式，但是方式写起来很不友好，...

数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts 图表库，为什么选择 echarts，第一：简单上手容易，第二：它几乎可以满足我们所有的开发需要，第三：echarts 应该是国内做的最好的可视化库之一了。废话不多说，那我们就看看如何在 Vue 的项目中使用 echarts。第一种方法，直接引入echarts安...

今天我们继续来说说 Vue，目前一直在自学 Vue 然后也开始做一个项目实战，我一直认为在实战中去发现问题然后解决问题的学习方式是最好的，所以我在学习一些 Vue 的理论之后，就开始自己利用业余时间做了一个项目，然后通过项目中的一些案例进行总结。今天我们来说说 Vue 中的内容分发 &amp;lt;slot&amp;gt;，首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Comp...

项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。对，你说的没错可以不使用，但是，首先你要说服你的产品经理咱能不能简单点，不搞这么多虚的来点实际的，说完之后我估计你们俩得立马干起来，其次，在你的网页上不使用动画不够逼格啊，而且咱们的网页也不够生动，没有活力...

前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。我们在开发的过程中，由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目，这样会使我们的前后端会同时的进行，提高我们的开发效率。因为最近自己在自学 Vue 也在自己撸一个项目，肯定会遇到使用数据的情况，所以就想着如何...

今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这...

最近在自学 Vue 也了解了一些基本用法，也记录了一些笔记有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，我们的能力才能得以提升，要不然就有点眼高手低了。基于这个想法于是就开始自己去撸了一个旅游网站，旅游网站嘛避免不了城市的选择，所以在实现城市选择列表的时候碰到的一些问题...

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。除了设置 class 我们在项目中也经常设置元素的内联样式 style，在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 cla...

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用，有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的，但是它们之间又存在一些不同之处，每一个都有一些适合自己的场景，我们要想知道合适的场景，肯定先对它们有一个清楚的了解，先看一个小例子。&lt;div id="app"&gt; &lt;input v-mod...

当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，只有在不断的变化中你才能利于不败之地，保守只能等死。最近在学习 Vue，一直以来对它的双向绑定只能算了解并不深入，最近几天打算深入学习下，通过几天的学习查阅资料，算是对它的原理有所认识，所以自己动手写了一个双向绑...

熟悉 Angular 的同学对指令肯定不会陌生，Vue中也借鉴了指令这一特性，在 Vue 中指令都是带有 v-的特殊属性，那么指令有什么作用呢？我的理解就是：指令是用来控制 DOM 元素的行为，例如最简单的显示，隐藏。Vue 中有很多指令，在今后的学习过程总我们会逐步的学习，今天我们就来说说我们非常常用的两个条件指令 v-if和 v-show。v-if看到 v-if你肯定会想到 Java...

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。模版语法Vue 中的模版是基于 HTML 的模版语法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。这也非常符合 Vue 的易用的特点减少开发者的学习成本。在底层实现上，Vue ...

最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。&amp;lt;script src=&quot;../xxx.js&quot;&amp;gt;&amp;lt;/script&amp;gt;Vue 我们也可以这种引入的方式&amp;lt;div id=&quot;root&quot;&amp;gt;{{name}}&amp;lt;/div&amp;gt

理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设计也受到了该模式的启发，Vue 也就是在该模式中起到 VM（ViewModel） 的作用。如果有对 MVC、MVVM 模式不了解的同学可以参考阮一峰老...

在互联网高速发现的今天，可以说每天都在变化着一不留神你就会错过一个亿，所以你不得不时刻的保持着高度的专注。互联网的信息是多元的，大量的，在海量的信息中很容易就会迷失自己，沉浸在互联网给我们带来的快乐当中。所以不管你做的什么行业，时刻都要保持关注，因为我是做技术的，所以我们今天就来说说技术把。谈谈我的愚见我的主业是做前端开发，然而如今的前端开发与前些年的传统的前端开发相比已经发生来翻天覆地的...