前言

首先，向大家说声抱歉。由于之前的井底之蛙，误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里。现在我错了，从我司的前端技术选型之路便可见端倪。以太原为例，已经有不少公司陆续开始采用Vue.js作为他们公司前端的技术栈，前后端分离正搞得热火朝天，还有更多的公司正在来时的路上。所以说，还在校的童鞋和仍在培训的萌新们，Vue已经成为现在前端的标配技能之一，为防止掉队，跟着闰土大叔学起来吧。

接下来，正文从这开始~

先来了解下当前的行业背景：

随着SPA、前后端分离的技术架构在业界越来越流行，前端的业务复杂度也越来越高，导致前端开发者需要管理的内容，承担的职责越来越多，这一切，使得业界对前端开发方案的思考多了很多，以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可，这种模式极大的降低了我们开发与维护的成本。

最近一段时间，我也在研究Vue，在网上看了那么多基于Vue的组件，何不自己也来造个小轮子，有了这个想法后，撸子袖子就是干。本文提供代码仅仅是提供而已，重要的是思路。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>用Vue造个组件轮子吧-闰土大叔</title>
 </head>
 <body>
     <div id="app">
         <input-number v-model="value" :max="20" :min="0"></input-number>
     </div>
 <script src="js/vue.js"></script>
 <script>
 function isValueNumber(value){
     return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');
 }

 Vue.component('input-number', {
     template:`
                  <div class="input-number">
                      <input type="text" 
　　　　　　　　　　　　　　　　　　　:value="currentValue"
　　　　　　　　　　　　　　　　　　　@change="handleChange" 
　　　　　　　　　　　　　　　　　　　ref="input" 
　　　　　　　　　　　　　　　　　　　@keydown="show($event)"/>
                      <button @click="handleDown" :disabled="currentValue <= min">-</button>
                      <button @click="handleUp" :disabled="currentValue >= max">+</button>
                  </div>
              `,
     props:{
         max:{
             type:Number,
             default:Infinity
         },
         min:{
             type:Number,
             default:-Infinity
         },
         value:{
             type:Number,
             default:0
         },
         step:{
             type:Number,
             default:5
         }
     },
     data: function(){
         return {
             currentValue: this.value
         }
     },
     watch:{
         currentValue:function(val){
             this.$emit('input',val);
         },
         value:function(val){
             this.updateValue(val);
         }
     },
     methods:{
         handleDown: function(){
             if(this.currentValue <= this.min) return;
             this.currentValue -= this.step;
         },
         handleUp: function(){
             if(this.currentValue >= this.max) return;
             this.currentValue += this.step;
         },
         updateValue:function(val){
             if(val > this.max) val = this.max;
             if(val < this.min) val = this.min;
             this.currentValue = val;
         },
         handleChange:function(event){
             var val = event.target.value.trim();

             var max = this.max;
             var min = this.min;

             if(isValueNumber(val)){
                 val = Number(val);
                 this.currentValue = val;
                 if(val > max){
                     this.currentValue = max;
                 }else if(val < min){
                     this.currentValue = min;
                 }
             }else{
                 event.target.value = this.currentValue;
             }
         },
         show:function(ev){
             console.log(ev.keyCode)
             if(ev.keyCode == 38){
                 this.handleUp();
             }else if(ev.keyCode == 40){
                 this.handleDown();
             }
         }

     },
     mounted:function(){
         this.updateValue(this.value);
         this.$refs['input'].focus();
     }
 })

 var app = new Vue({
     el:'#app',
     data:{
         value:5
     }
 })
 </script>

 </body>
 </html>

如果你掌握了Vue的组件知识，相关的指令、事件，花点时间你也可以造出这么个入门级的小轮子。如果这篇文章只是单纯的贴出组件轮子代码那也太easy了。接下来，抛出造轮子实践背后带来的一些思考。

第一问：

vue 已经挂载的组件怎么初始化里面的data?

能问出这个问题的童鞋，说明你已经迷上了Vue。按照源码里讲的，vue将数据绑定到组件的原理分为三个步骤： 当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，二是处理 Vue 组件数据，三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。

第二问：

vue 注册组件为什么要必须发生在根实例初始化前？

可能你已经熟读Vue官方API文档，但是这个问题你考虑过么。如果在Vue根实例初始化之后才注册组件会发生什么？如果你有兴趣，我可以等你实践30秒再说我的想法。

30秒时间到了，在等你的时候，我又实践了一遍。是的，报错了。大意是，未知的自定义元素：<input-number> - 你是否正确注册了组件？对于递归组件，请确保提供name选项。

我曾翻阅过官网API文档，也曾阅览过相关的书籍，但里面都是简单的提了一句：

这个问题无解么，不是的。其实你仔细想想报错信息，你应该会泯然一笑，说的通俗点，这就像坐高铁，买了票才能上。因为实例化的时候会尝试找这个组件，你不提前注册就找不到了。如果硬要深究，只能去看源码了。

第三问：

这个数字输入框组件网上很常见，在此基础上你有做什么扩展么？

是的，与网上的数字输入框组件不同的，我做了两个扩展。

第一个扩展：input框自动获取焦点，在输入框聚焦时，监听键盘上下按键的操作，相当于加1或者减1。

实现的思路，在input输入框上定义一个ref为input引用，然后在模板渲染完毕之后，在mounted钩子里，通过$refs查找到对应的ID：input，然后focus。获取完焦点之后，接下来就是如何监听键盘上下按键的操作。首先，我们通过keydown事件绑定一个show()方法，里面传一个$event参数，然后在子组件的methods选项内创建一个show方法。我们都知道，键盘上的上键对应的keyCode码是38，下键对应的是40。 有了这个之后，我们做一个条件判断（上加下减），如果event的keyCode码为38，就调用handleUp()方法，如果是40，就调用handleDown()方法。至此，监听键盘上下键的按下进而操作input数值的扩展完成。

第二个扩展：给组件增加一个控制步伐的prop——step，比如设置为10，点击加号按钮，一次增加10。

继续说说我的思路，这个就相对来说比较简单了，首先在props选项内定义一个step对象，类型设置为Number，默认值设置为5。然后将methods里面的handleDown和handleUp里面将 this.currentValue +/-= （具体的数值）替换为 this.step。相当于进一步封装了它的可用性。至此，所有扩展完成。

后记

自己曾经求职面试前端，因不会Vue框架而被淘汰，而且不止一次，也曾因此赋闲半年在家。所以，事不过三，我要抓紧时间学会它，以及它的全家桶。有原则有危机感的人，往往都是之前吃过大亏的人。他们知道犯错误的代价，所以不敢触碰这个红线。愿我走过的路踩过的坑，你们不会再踩一遍，才会哭着鼻子记住这个教训。以铜为镜,可以正衣冠;以人为镜,可以明得失。在之后的日子里，我还会继续更新vue相关的文章，愿我们都做一个爱思考的孩子。前端路上，we are not alone。

用Vue自己造个组件轮子，以及实践背后带来的思考的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  3. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  4. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  5. 转： Vue.js——60分钟组件快速入门（上篇）

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  6. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  7. vue实现简单表格组件

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...

  8. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  9. vue.js学习之组件（下篇）

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

随机推荐

  1. C. Kyoya and Colored Balls(Codeforces Round #309 (Div. 2))

    C. Kyoya and Colored Balls Kyoya Ootori has a bag with n colored balls that are colored with k diffe ...

  2. ZOJ 2859 二维RMQ（模板）

    这题求范围最小值,RMQ正好是用来解决这方面的.所以再适合只是了,又是离线静态输入输出的,所以时间比二维线段树快. #include<iostream> #include<cstdi ...

  3. JAVA8之lambda表达式具体解释，及stream中的lambda使用

    前言: 本人也是学习lambda不久,可能有些地方描写叙述有误,还请大家谅解及指正! lambda表达式具体解释 一.问题 1.什么是lambda表达式? 2.lambda表达式用来干什么的? 3.l ...

  4. C++map类型 之 简单介绍

    一:map的前世今生 (1)从关联容器与顺序容器说起.关联容器通过键(key)存储和读取元素.而顺序容器则通过元素在容器中的位置顺序存储和訪问元素(vector,queue,stack,list等). ...

  5. TCP传输中序号与确认序号的交互

    本实验通过SSH远程登录server,然后使用Wireshark抓包分析. 开头的三次握手已经省略.关于序号的交互过程.须要记住一点:TCP首部中的确认序号表示已成功收到字节,但还不包括确认序号所指的 ...

  6. ShuffleNet总结

    在2017年末,Face++发了一篇论文ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devic ...

  7. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  8. iOS OC利用imageview属性切出类似圆柱图形

    效果一: 效果二: 上边的图形我也数不出来名字,,暂称圆柱正切图形吧,看到这样的需求似不似在想各种插件,各种切图方法了呢... UIImageView的属性可以轻松搞定 UIViewContentMo ...

  9. js验证input输入框（字母，数字，符号，中文）

    [javascript]代码库 <h1>js验证输入框内容</h1> <br /> <br /> 只能输入英文 <input type=" ...

  10. bzoj 1758: [Wc2010]重建计划

    Description Input 第 一行包含一个正整数N,表示X国的城市个数. 第二行包含两个正整数L和U,表示政策要求的第一期重建方案中修建道路数的上下限 接下来的N-1行描述重建小组的原有方案 ...