Vue.js2.0学习教程之从基础到组件详解-创新互联

前言

最近这段时间里不停的做着Vue的技术分享，虽然不是什么深层次的代码底能架构，如果底层架构真说出来，我就不会做Vue.js 2.0从基础到组件了，就会分享Vue从底层到还是到底层。我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题。此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难，大错特错！

对Vue 2.0的介绍

我对Vue 2.0认知，能it前端框架的认知，在我们不算底层原理的情况下，什么才是精髓，那就是基础的方法和一些api介绍，随着现代数据量庞大，业务逻辑也变得更加复杂，随着数据情景的不同展示，jquery，angular1.0等一系列框架，已经满足不了开发的需求了，如何用数据驱动去管理数据，在我认知里，前后端联调，对接口，通过什么？那过json数据来传递着一切的信息。

我们操作dom来分析数据，那就是用屠龙刀去切菜，用数据驱动去改变数据，那才叫细功出好活。还有我们如何更好的通过组件来让一个复杂的页面划分为代码精简，易维护，可复用，阔展性强的组件集合！

如果是你如何去划分这个页面

• 对头部进行一个组件的化分。（通过prop：{[img]}来进行头图的划分。）
• input框的划分。
• 图型验证码和图型input框。
• 短信组件和短信input框。
• 协议服务的弹窗。
• button的划分。
• 语音验证码的划分。
  

这样一算你们会发现一个小小的登陆就划分出6个组件，可能给你的感觉分的太细，那我也感觉分的太细，那我为什么要分的那么细呢，那就是增强可复用性，可阔展性。

那我何去解这个组件太过于细分的问题，我们可以合并那些东西，以我一眼看过去，唯一能合并的就是中间一套注册体系，我们把2,3,4,5,7,这几个细组件合并到login.Vue组件里，在这个层面上，我们只要暴露出四个输入框内容向外传递的数据，这样一个页面整体就我们拆开来了，对于每个页面的代码量就减少了，对于维护，改bug是一个很大的帮助。

组件从基础开始

Vue的在项目中如何去做好一个体系问题，最主要的就是template里整体的组织，如何用好的组织体系方便的展现复杂的逻辑操作，我个人认为而不是通过new Vue去操控整体，反正new Vue里的一切选项是着template这个组织体系走的，如果是一个房子，template就是地基，new Vue里的选项就是水泥石头。

1、模板语法

能用javascript表达式则用表达式，我觉得表达式是给人感觉最清楚 的，能结合模板去正确使用表达式来解析那是最明了的。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。