为了账号安全,请及时绑定邮箱和手机立即绑定

用Vue自己造个组件轮子,以及实践背后带来的思考

2018-01-11 18:49:38 2866浏览
字号
大字 中字 小字
图片描述 前言 首先,向大家说声抱歉。由于之前的井底之蛙,误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里。现在我错了,从我司的前端技术选型之路便可见端倪。以太原为例,已经有不少公司陆续开始采用Vue.js作为他们公司前端的技术栈,前后端分离正搞得热火朝天,还有更多的公司正在来时的路上。所以说,还在校的童鞋和仍在培训的萌新们,Vue已经成为现在前端的标配技能之一,为防止掉队,跟着闰土大叔学起来吧。 接下来,正文从这开始~ 先来了解下当前的行业背景:
随着SPA、前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致w88优德者需要管理的内容,承担的职责越来越多,这一切,使得业界对w88优德方案的思考多了很多,以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本。
最近一段时间,我也在研究Vue,在网上看了那么多基于Vue的组件,何不自己也来造个小轮子,有了这个想法后,撸子袖子就是干。本文提供代码仅仅是提供而已,重要的是思路。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用Vue造个组件轮子吧-闰土大叔</title> 6 </head> 7 <body> 8 <div id="app"> 9 <input-number v-model="value" :max="20" :min="0"></input-number> 10 </div> 11 <script src="http://www.imooc.com/js/vue.js"></script> 12 <script> 13 function isValueNumber(value){ 14 return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + ''); 15 } 16 17 Vue.component('input-number', { 18 template:` 19 <div class="input-number"> 20 <input type="text"                    :value="currentValue"                    @change="handleChange"                    ref="input"                    @keydown="show($event)"/> 21 <button @click="handleDown" :disabled="currentValue <= min">-</button> 22 <button @click="handleUp" :disabled="currentValue >= max">+</button> 23 </div> 24 `, 25 props:{ 26 max:{ 27 type:Number, 28 default:Infinity 29 }, 30 min:{ 31 type:Number, 32 default:-Infinity 33 }, 34 value:{ 35 type:Number, 36 default:0 37 }, 38 step:{ 39 type:Number, 40 default:5 41 } 42 }, 43 data: function(){ 44 return { 45 currentValue: this.value 46 } 47 }, 48 watch:{ 49 currentValue:function(val){ 50 this.$emit('input',val); 51 }, 52 value:function(val){ 53 this.updateValue(val); 54 } 55 }, 56 methods:{ 57 handleDown: function(){ 58 if(this.currentValue <= this.min) return; 59 this.currentValue -= this.step; 60 }, 61 handleUp: function(){ 62 if(this.currentValue >= this.max) return; 63 this.currentValue += this.step; 64 }, 65 updateValue:function(val){ 66 if(val > this.max) val = this.max; 67 if(val < this.min) val = this.min; 68 this.currentValue = val; 69 }, 70 handleChange:function(event){ 71 var val = event.target.value.trim(); 72 73 var max = this.max; 74 var min = this.min; 75 76 if(isValueNumber(val)){ 77 val = Number(val); 78 this.currentValue = val; 79 if(val > max){ 80 this.currentValue = max; 81 }else if(val < min){ 82 this.currentValue = min; 83 } 84 }else{ 85 event.target.value = this.currentValue; 86 } 87 }, 88 show:function(ev){ 89 console.log(ev.keyCode) 90 if(ev.keyCode == 38){ 91 this.handleUp(); 92 }else if(ev.keyCode == 40){ 93 this.handleDown(); 94 } 95 } 96 97 }, 98 mounted:function(){ 99 this.updateValue(this.value); 100 this.$refs['input'].focus(); 101 } 102 }) 103 104 var app = new Vue({ 105 el:'#app', 106 data:{ 107 value:5 108 } 109 }) 110 </script> 111 112 </body> 113 </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。
本文原创发布于慕课网 ,转载请注明出处,谢谢合作
7人推荐
若觉得本文不错,就分享一下吧!
看过此文的用户,还看了以下文章
正在加载中
  1. 评论
  2. 收藏
  3. 共同学习,写下你的评论
意见反馈 常见问题 APP下载
官方微信
举报
0/150
提交
取消

w88

百度360搜索搜狗搜索