对于我们的最终效果来说，是不是很简单呢？
当然，如果我这里写三个h-wrapper的话，我们自然而然就变成了三级联动
最外层的slector组件用来暴露在外部显示的文字，以及控制级联选择器的显示隐藏，在每一次开始一个新的功能的时候，我们应该先完成重点的功能，重点功能完成之后，再去修改一些样式包括交互效果
对于这个模板来说，需要解释的地方很少，我都写在注释里边
首先需要重点提一下的是在mounted方法中，我们使用了this$on方法，订阅了一个在当前组件内并没有发布的事件，这个事件，我定义在了h-wrapper这个组件中，稍后可以看到
其余的地方没有太复杂的功能和逻辑，就不一一解释
在模板中，需要重点关注的其实就是两个style，以及四个事件，当然了，还有插槽的位置，我这里使用了一个小技巧，在原始位置直接写好了四个option，并且其中一个还显示请选择，用来保证可选项的位置永远都可以处在最中间的位置
在逻辑中，我通过 *** 作activeIndex这个索引值来动态的修改数据中ul的位移，使得当前永远显示的是对应索引与option高度计算出的位置
通过touchstart、touchmove、touchend三个事件来 *** 作元素的位置与滑动
通过watch侦听对应属性，并实时触发事件，使得级联选择器发生改变，达到内外同步
通过mounted与updated钩子函数来保证当前的级联选择器属性会随着刷新而刷新
通过slot插槽来显示外部传入的option选项
对于option组件来说，并没有多少内容，它只需要负责显示数据，以及让级联选择器可以正确的获取到值即可
首先当前这个级联选择器的样式，我没有做太多的处理，但是已经很好看了有没有！
最终，我们就已经成功的打造了一款移动端的级联选择器，可以实现一级二级三级联动，当然了，多级也没有任何问题，但是在移动端，我建议最多到三级联动，否则的话影响用户体验感
主要区别：
1传统方式：我们做一个网站，首先创建几个文件夹(css、js等等)，页面需要用的资源文件，都放到各自的文件夹里。然后创建若干个HTML网页，一个个链接把这些若干网页串起来就OK，网页里需要有什么事件或效果，要么用原生js要么用jqurey，去 *** 作某个dom，实现页面变化。
调试的时候也很简单，如果静态网页，浏览器就可以直接运行调试。asp、jsp、php、net等动态网站，简单配置一下iis或Tomcat，也就能直接调试。
2vue(这里用vue脚手架来举例)：
vue和传统最大的区别就是，vue只有一个html页面(也就是入口页面，你也可以理解成主页面)，除了主页面之外，其他的页面都是html片段，以vue为后缀的片段文件存在，用户访问网站的时候，第一次加载完整主页面，后面的点击其实就是变化html片段而已。(和老程序员理解的局部刷新有点像)
所以vue特别适合制作手机端项目，因为它只需要根据用户的点击，加载所需的片段而已。由于不用一页一页请求新网页，所以这种机制会让手机项目运行非常丝滑顺畅。
但优点也是它的缺点，vue项目的特性决定它不适合做网站，稍微有点seo知识的人都明白，这种机制做的网站，机器人是爬不到任何内容的。
vue的部署也是让我很诟病的，部署它需要折腾一大堆事儿。首先需要安装nodejs，你可以暂时把它理解成和iis Tomcat类似的网站发布容器。因为只有在nodejs下才能调试vue脚手架项目。
nodejs装完，然后在cmd命令行下，通过npm命令安装一大堆各种库插件。
这一堆事儿折腾完，你就可以通过一个命令创建一个vue脚手架，然后开始你的项目开发之旅。
很多老程序员被“vue脚手架”这个词搞得云里雾里，简单的说：上面折腾一大堆，就是为了最后敲一个命令，让系统帮你在指定位置创建一组文件夹，然后vue能用上的各种js(百十多个吧)组件都放在这各个文件里，供你开发时候调用。
对比你之前的 *** 作，相当于：你建好文件夹，在js文件夹里放好jqurey，和你常用的js。
所以这套步骤，开始让我很不习惯，可能很多老程序员也不习惯。会让你有种“为了做个小项目，先要部署一套大工厂的感觉”。
很多老程序员其实都是做小项目出身的草根，什么百万千万的迸发、什么团队协作、前后端分离等话题，不是这类程序员关心的。他们往往即是美工也是程序员，即是前端也是后端。几乎都是以快速交付项目为第一初衷，不想为了个环境来回折腾。所以一时间适应不了vue开发模式。
另外如果你的项目，定制化程度较高。我个人还是建议采用独立html的传统方式开发。
如果是移动端开发，vue的确是最佳选择。顺便提一下，vue和小程序几乎是一摸一样的套路，会一个两个就都会了。
我也是花了2天时间，从排斥到接受的。目前用着还不错。
使用框架并不会让你的技术变菜，相反，框架能够让你更加方便、快速的实现某些功能。
框架的出现，使开发变得更加简单，设想，如果vue没有nodejs的支持，你还会去使用吗？各种依赖，各种配置，统统需要你自己手工构建，你会把大量的时间花费在无用的地方，而忽略了你所需要实现的也许需求。
如果你感觉使用各类框架导致你的能力降低了。那只能说你自己的能力还有待提高。
提升你的技术不一定要会很多编程语言，需要去了解思想。那么在使用vue的时候，有没有思考过，vue为什么要这样设计，这样设计有什么优势，如果是我，我会怎么设计。
如果你专注于前端开发，那你可以尝试自己去实现一个vue，当做你的技术提升。
反问提问者一个问题，你在使用jquery后，有没有感觉你的技术下降了？
个人的一些观点，欢迎讨论！
我就是写框架造轮子的，框架的出现的确会让程序员能力减弱，变成框架 *** 作员，例如spring java的出现，使得后台开发人员不需要知道epoll tcp底层原理，不需要知道条件变量 信号量 共享内存怎么实现进程间通信。但是框架是我们开发效率更好，题主可以反向思考java c的出现降低了我们对计算机底层指令的理解，我们为何不用汇编编程？不要太在意技术本省能达到目的就是好技术。
大家要记住:互联网和建筑一样，程序员和水泥工都只是这个行业的底层人员。我们在追求技术的时候想想水泥工在外人面前比砌砖技术的场景，就不会死揪不放了。
vue是前端三大框架之一。在日常的开发工作中，能便于我们快速搭建前端框架，快速的启动项目进入细节开发。当用的时间长了以后，你会更加的依赖框架。
我们都知道人生的境界有三层:第一层看山是山，看水是水;第二层看山不是山，看水不是水;第三层，看山还是山，看水还是水。跟着人生的境界一样，其实你已经达到了第二层境界。
开发能力也主要分为三层境界。
一，从零开始，徒手开发。
这个境界都是新手。这时候可能你只知道HTML ,CSS和js。根本都不知道后面的框架，所以这个时候需要自己徒手搭建框架，徒手写页面路由，手动完成页面自适应等。这时候恐怕页面的一个轮播图，都够自己费脑子的，得花上一天或者更多的时间写好这个轮播图。
这个阶段就相当于你小时候学走路的阶段，只有当你学会这个走路，才会后有后面的奔跑跳跃的动作。记得当时我学习前端的时候，在这个第一个阶段，很是苦恼，为什么我一个简单的页面，要花费很长的时间去写，花费很长的时间去写一个组件，一个下拉框，一个三级菜单栏。等我过了这个阶段就豁然开朗了。
二，应用框架，插件，快速开发。
走过了第一个阶段，渐渐的接触到了应用框架，和一些组件。就拿这个vue来说，可能轻轻松松十几分钟就能启动一个项目，当初在第一个阶段来说，可能花两三天去搭建项目。
然后很多组件也不需要自己写了，有丰富的前端UI组件，什么轮播图，页面自适应布局，各种各样的按钮，生拖硬拽就行了，分分钟搞定。
这个时候的工作就进入了一个舒适区，也达到了一个自我满足的状态，殊不知在这个境界里，稍有不慎，你可能就废在这里了。还有第三重境界在等着你。
三，从零开始，徒手造轮子。
到了这里，可能有人会问，这里也是从能开始，为什么和第一重境界不一样？
那确实是不一样，过了第二重境界，为什么要回到从零开始呢？这里不是一种倒退，而是一种进步。在第二个阶段，你的生拉硬拽。你会发现已经不能满足你的开发工作了。因为在这里的很多开发都是被局限在这些框架里了，如果你想创造不一样的样式，就需要你从零开始徒手造轮子。
你需要用原生的底层的东西，去造属于你自己的东西，去写一套你自己的框架，自己的组件。你所写的这些东西都属于你自己独有的，不再和别人一样都是千篇一律的东西。
当然，这第三层境界也并不是那么容易达到的，有的人需要花费三五年，有的人则需要花费数十年。
所以说当你熟练运用这些框架以后，你发现自己的编程能力变弱了，这正是在告诉你，需要学习更多的东西，以便于你能够顺利的达到开发的第三种境界。
Vue 就是一个把问题搞复杂的东西 让你忘记你出发的目的是什么。面试的时候，我遇到精通vue 直接pass ，这种人毫无用处
vue世界都是组件，现在编程，闭门造车时代已经过去了，我们就是更方便实现功能就好了。类比于制造业，不能说我要做 汽车 ，还要先去挖矿炼铁和种植橡胶，下降的是不需要的能力，例如挖矿能力和耕地能力。什么框架能提高我们效率就死好框架。
坚守JSP + H5
你怎么就是意识不到呢？让你能力下降的是你的懒惰和缺乏学习欲望还没有深究的习惯，而不是一个优秀的框架，框架制造出来的初衷是为了提高生产效率，降低开发人员的压力，提高开发人员的幸福感，唯独跟帮你提高自己的编程水平没有任何直接联系。对于已经水平够好的人，他有资格让自己的工作变得开心一些，甚至他们通过自己开发很多优秀的工具框架来实现这个目标，但是水平还比较菜的人没有这个资格，除非他们不想进步。因此，你这个问题非常缺乏逻辑，如果拥有了一把q让你的搏击能力下降，那是你的问题，不是q的问题；如果拥有了 汽车 让你的运动能力下降，那也是你的问题，不是车的问题。你可以坦然接受这种下降并且不认为这是什么坏事情，但请不要让一个工具替你背锅！
不是vue让你能力下降，是你本来就能力弱。很多人学vue都是一知半解，做个简单的增删改查就觉得自己精通了，连html，css，js基础都是速成的，没掌握好，就捡起vue这样的框架了，没有现成的组件库，啥也不会写。vue不是要代替这些基础技能，是为了给有能力的人提供更方便的工具。还有人喷jquery过时了，怕是他们连vue和jquery的本质区别都搞不清楚，适合的场景也不知道。不是vue让人能力下降了，是你根本就没有接触到复杂需求，或者说因为你能力弱，所以根本就不会给你接触复杂需求的机会
这个问题就好比用了jquery感觉对原生js的理解越来越浅，框架和库都是为了帮助我们提高开发效率的，往往会让我们忽略本质的技术 这才是问题所在，所以用的时间长了 当你丢下库和框架的时候你会发现都不会写代码了
一 学习前端这门技术有前途吗？
1、行业发展好
就说我们目前中国所有行业，可以说任何一个行业都离不开互联网，现在的人们对于互联网的依赖很大，互联网行业在中国无疑是现在发展前景最好的没有之一。web前端现在虽然竞争大，刚开始工作并不是那么好找，但是它未来所需要的人才是可观的，只有你拥有这个技术，作为web互联网+时代，用户体验现在成为了企业的第一标准，web前端当然待遇是水涨船高的。
2、人才需求大
现在的人们离不开手机，我们现在手机的各种应用都是用代码写成的，互联网对人们的影响越来越大，根据新闻报道未来中国20年，需要软件开发，美工设计，web前端开发人才2000W人才，各类职业也需求更多，前端的人才需求比以前也有了质的飞跃。
3、薪资待遇高
web前端开发工程师的薪资待遇平均工资已经突破一万，因为其他行业确实工资涨幅不大，所以必然会吸引了大批想要月薪过万的人来转行学习。我想引用乔布斯的一句话：WEB就是人类的未来，我们身为前端开发工作者也是未来，相信WEB前端开发的明天会更好。
二 零基础小白应该怎么学习前端才能少走弯路？
关于前端这一块的学习，我不主张自学，因为前端的知识体系是很庞大的，如果你自学，遇到一些问题，你自己很难解决，至少需要有专业的前端人士指导你，站在高手的肩膀上，才能看的更高更远，当然很多小伙伴会说，我也知道学习前端有高手指点挺好啊，可是我怎么知道去哪里找高手，高手又为什么愿意指导我呢？
这个问题问的好，其实现在是互联网时代，网上有很多的相关视频和直播课，平时就去上网听一些前端高手讲课，也可以找一些培训机构官网上的免费试听视频看看。作为想从事前端这个行业的小伙伴，一定要有一个平常心，只要能学到知识，去学就是了，不要磨磨唧唧的的做什么事情，否则什么也做不好。
三 学习前端，你需要具备哪些素质？
（1）如果web的任何一个元素（web界面，灵活的编程风格等）有一点吸引了你，让你着实着迷，恭喜你，有了一个完美的开始。确认一下自己是否喜欢和合适前端，而不是为了一份看起来体面而且薪水不菲的工作。
（2）不断学习，每日的积累，关注前端动态，是你跟上前端潮流的主要途径。前端的体系过于庞大，技术框架争涌而出，如果你经常抱怨累死码农的节奏，那就审视一下自己对前端的态度。
（3）主抓基础，避免盲目。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。
（4）整理总结，先模仿后创造。将每日的积累做好规整，记录到博客也好，笔记也好。多看看牛人的源代码，等你达到了一定的层次水准，自然会得心应手。
（5）持有一颗造福前端社区的心。写一些有意思的小工具、插件，推广出去， 始终坚信，在从事前端的道路上You are not alone。
（6）要有专业人士的指导，尤其是学习前端找工作的，不要妄想自己一个人自学前端能找到工作，现在非常难，如果没有一个明白人帮你解决一下问题，会有非常多的弯路，中间很容易放弃，学习的不专业不说，最重要是浪费时间。
（7）一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
四 入门web前端开发需要学习什么
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、>
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vuejs开发WebApp项目、应用Reactjs开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
有兴趣的话可以加入我们的前端qq交流群，里面也是一群学前端的小伙伴，我们可以一起学习，互相监督，互相交流学习经验，一起进行项目实践。期待你的加入。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）