前端开发之走进Vue.js
Vue.js做为目前最热门最具前景的前端框架之一，其提供了一种帮助咱们快速构建并开发前端项目的新的思惟模式。本文旨在帮助你们认识Vue.js，了解Vue.js的开发流程，并进一步理解如何经过Vue.js来构建一个中大型的前端项目，同时作好相应的部署与优化工做。php
- 做者：劳卜来源： segmentfault|2016-11-01 19:10
Vue.js做为目前最热门最具前景的前端框架之一，其提供了一种帮助咱们快速构建并开发前端项目的新的思惟模式。本文旨在帮助你们认识Vue.js，了解Vue.js的开发流程，并进一步理解如何经过Vue.js来构建一个中大型的前端项目，同时作好相应的部署与优化工做。css
文章将以PPT图片附加文字介绍的形式展开，不会涉及知识点的具体代码，点到为止。有兴趣的同窗能够查看相应的文档进行了解。html
Vue.js简介前端
从上图的介绍中咱们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架，其和jQuery最大的不一样点在于jQuery经过操做DOM来改变页面的显示，而Vue经过操做数据来实现页面的更新与展现。下面即是Vue数据驱动的概念模型：vue
Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层(即DOM层)与Model层(即JS逻辑层)之间经过ViewModel绑定了DOM Listeners与Data Bingings两个至关于监听器的东西。node
当View层的视图发生改变时，Vue会经过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会经过Data Bingings来监听并改变View层的展现。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在。android
Vue实例webpack
在一个html文件中，咱们直接能够经过script标签引入Vue.js，而后就能够在页面里写Vue.js代码了。上图中咱们经过new Vue()构建了一个Vue的实例，在实例中，能够包含挂在元素(el)，数据(data)，模板(template)，方法(methods)与生命周期钩子(created等)等选项。不一样的实例选项拥有不一样的功能，如：git
(1)el代表咱们的Vue须要操做哪个元素下的区域，'#demo'表示操做id为demo的元素下区域。程序员
(2)data表示Vue 实例的数据对象，data 的属性可以响应数据的变化。
(3)created表示实例生命周期中建立完成的那一步，当实例已经建立完成以后将调用其方法。
Vue经常使用指令
在Vue项目的开发中，咱们使用的最多的应该就属Vue的指令了。经过Vue提供的经常使用指令，咱们能够淋漓尽致地发挥Vue数据驱动的强大功能。如下即是图中经常使用指令的简单介绍：
(1)v-text: 用于更新绑定元素中的内容，相似于jQuery的text()方法
(2)v-html: 用于更新绑定元素中的html内容，相似于jQuery的html()方法
(3)v-if: 用于根据表达式的值的真假条件渲染元素，若是上图P3为false则不会渲染P标签
(4)v-show: 用于根据表达式的值的真假条件显示隐藏元素，切换元素的 display CSS 属性
(5)v-for: 用于遍历数据渲染元素或模板，如图中P6为[1,2,3]则会渲染3个P标签，内容依次为1，2，3
(6)v-on: 用于在元素上绑定事件，图中在P标签上绑定了showP3的点击事件
关于更多的Vue指令能够查看Vue2.0文档，地址：https://vuefe.cn/api/#指令
Vue.js技术栈
以上咱们讲到能够直接在一个html页面里经过引入Vue.js来直接写Vue代码，可是这样的方式并不经常使用。由于若是咱们的项目比较大，项目中会存在不少页面，一旦每一个页面都引入一个Vue.js或者声明一个Vue实例，这样很是不利于后期的维护和代码的公用，也会存在实例名冲突的状况，因此咱们须要用到Vue提供的技术栈来构建强大的前端项目。
除了Vue.js咱们还须要用到：
(1)vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
(2)vue-router： Vue提供的前端路由工具，利用其咱们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现先后端分离。
(3)vuex：Vue提供的状态管理工具，用于同一管理咱们项目中各类数据的交互和重用，存储咱们须要用到数据对象。
(4)ES6：Javascript的新版本，ECMAScript6的简称。利用ES6咱们能够简化咱们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
(5)NPM：node.js的包管理工具，用于同一管理咱们前端项目中须要用到的包、插件、工具、命令等，便于开发和维护。
(6)webpack：一款强大的文件打包工具，能够将咱们的前端项目文件同一打包压缩至js中，而且能够经过vue-loader等加载器实现语法转化与加载。
(7)Babel：一款将ES6代码转化为浏览器兼容的ES5代码的插件
利用以上等技术，咱们即可以开始构建咱们的Vue项目了。
构建大型应用
在构建咱们的中大型Vue项目中，咱们主要介绍如何利用vue-cli来自动生成咱们项目的前端目录及文件，了解Vue中一切皆组件的概念及父子组件的通讯问题，讲解在Vue项目中咱们如何使用第三方插件，最后利用webpack来打包及部署咱们的项目。
vue-cli构建
在使用vue-cli以前咱们须要安装node.js，利用其提供的npm命令来安装vue-cli。安装node.js只需去其官网下载软件并安装便可，地址为：https://nodejs.org/en/
安装完成以后咱们打开电脑的cmd命令行工具依次输入上图中的命令：
(1)npm install -g vue-cli：全局安装vue-cli
(2)vue init webpack my-project: 利用vue-cli在目录地址生成一个基于webpack的名为’my-project‘的Vue项目文件及目录
(3)cd my-project：打开刚刚建立的文件夹
(4)npm intall：安装项目所依赖的包文件
(5)npm run dev：利用本地node服务器在浏览器中打开并浏览项目页面
这样咱们的一个基于webpack的vue项目目录就构建好了。
单文件组件
在刚刚构建好的vue项目中，咱们会发现一个App.vue和Hello.vue的文件，那么像这样的以.vue后缀结尾的文件即是咱们Vue项目中常见的单文件组件。单文件组件包含了一个功能或模块的html、js及css。在.vue文件中，咱们能够在template标签中写html，在script标签中写js，在style标签中写css。这样一个功能或模块就是一个.vue组件，对于组件公用和后期的维护也很是便捷。
父子组件通讯
那么像这样在以单文件组件为核心的项目开发中，咱们必定会想到一个问题，就是.vue父子组件之间是如何交换数据来实现通讯的呢?在Vue2.0中提供了props来实现父组件向子组件传递数据，经过$emit来实现子组件向父组件传递数据。固然若是是较为复杂和广泛的数据交互，建议你们使用vuex来同一管理数据。详情请见：https://vuefe.cn/guide/compon...使用Props传递数据
插件使用
接下来咱们介绍下在基于webpack的vue项目中咱们是如何使用插件的，主要有两种状况：
(一)全局使用
(1)在index.html引入：这样的方式不推荐使用，由于存在前后加载顺序的问题，有些插件不支持这一方式。
(2)经过webpack配置文件引入：主要经过plugin配置项的webpack.ProvidePlugin()方法实现，不过只适合支持CommonJs规范并提供一个全局变量的插件，如jQuery中的$。
(3)经过import + Vue.use()引入：这种方式须要在全局.vue文件中import须要加载的插件，而后经过Vue.use('插件变量名')来实现，不过此方法只支持遵循Vue.js插件编写规范的插件使用，如vue-resourece。
(二)单文件使用
(1)经过import直接引入：这种方式能够在须要调用插件的.vue文件中使用，不过须要注意和实例的建立顺序问题，或者也能够经过require引入。
(2)import + components注册：此方式为Vue组件的使用方式，能够在一个组件中注册并使用一个子组件。
部署及优化
当咱们搞定整个Vue项目的前端编码阶段后，咱们须要对咱们的前端项目文件进行部署和优化工做，主要的几个方式以下：
(1)使用webpack的DefinePlugin指定生产环境：经过plugin中的DefinePlugin配置，咱们能够声明'process.env'属性为'development'(开发环境)或者'production'(生产环境)，结合npm配置文件package.json中scripts的命令来切换环境模式十分方便。
(2)使用UglifyJs自动删除代码块内的警告语句：通常在生产环境的webpack配置文件中使用，经过new webpack.optimize.UglifyJsPlugin()来进行配置，删除警告语句能够缩减文件的体积。
(3)使用Webpack hash处理缓存：当咱们须要对发布到线上的文件进行修改时，从新编译的文件名若是和以前版本的相同会引发浏览器没法识别而加载缓存文件的问题。这样咱们须要自动的生成带hash值的文件名来阻止缓存。详见：https://segmentfault.com/a/11...
(4)使用v-if减小没必要要的组件加载：v-if指令其实颇有用处，它可让咱们项目中暂时不须要的组件不进行渲染，等须要用到的时候在渲染，好比某个弹窗组件等。这样咱们能够减小页面首次加载的时间和文件量。
除了以上几点的优化，还有不少优化选择，有兴趣的童鞋能够好好地了解下webpack的API文档，毕竟webpack的功能十分强大。
数据驱动实例
这是我以前利用Vue.js数据驱动的原理写的一个拼图游戏，但愿可以供你们进一步了解Vue数据驱动的理念。
演示地址：拼图游戏
代码地址：拼图代码
总结
本文以PPT图片附加文字介绍的形式简单介绍了Vue.js的知识点及开发流程，并将前端自动化、组件化、工程化的理念贯穿其中，由浅入深地阐述了Vue.js“简单却不失优雅，小巧而不发大匠”的独特魅力。
【编辑推荐】
点赞 3
编辑推荐
- 24H热文
- 一周话题
- 本月最赞
视频课程+更多
-
-
2017软考信息系统项目管理师-案例分析真题解
讲师：小任老师30971人学习过
-
-
跟老谭玩转Eclipse视频教程
讲师：谭岚207497人学习过
-
-
[完整]ExcelVBA整合Access/SQLServer编程
讲师：谭科91245人学习过
最新专题+更多
精彩评论
-
-
爱情89757评论了：【IT观察】做为一个DBA，如何选择数据库
若是是小的公司，基本的关系型数据库足以知足大多数的业务场景。使用关系型数据构建集群和分库分表，读写分离就能够知足系统的高可用和、高并发、高可扩的需求。可是随着系统的业务的复杂，数据复杂，种类多样，数据量大。关系型数据库在存储非结构化数据方面性能不如非关系数据好。大的公司基本都是使用多种的数据库，以知足不一样的业务需求。对应大数据的处理，倾向于使用MongoDB和hbase等。数据库的选择仍是要以业务的需求出发进行选择比较好。最后说一下使用MongoDB的好处：mongoDB(非结构化数据库)不只能够处理结构化数据，并且更适合处理非结构化数据(文本、图像、超媒体等信息)。它突破了关系型数据库结构定义不易改变并且数据定长的限制，在处理连续信息和非结构化信息中有着关系型数据库没法比拟的优点。 关系型数据库不擅长：大量数据的写入；字段不固定，表结构变动；简单查询须要快速返回结果；
-
-
641553385评论了：终于找到程序员无休止加班的缘由了！
真实的状况是,留在公司过夜也不能把给的苹果吃完.
-
-
an7000评论了：不当心删除了公司数据库，是什么样一种体验？
牛人，惋惜萌妹子不知道是你救了她^_^。一、数据库密码不能随便给人；2 数据备份要天天确认。三、太吓人了，检查一下本身负责的数据库。
-
-
simyang评论了：【IT观察】做为一个DBA，如何选择数据库
沙发，写的好
- 精选博文
- 论坛热帖
- 下载排行
读 书+更多
-
-
J2EE应用开发（WebLogic+JBuilder）（第二版）
本书介绍如何将最流行的J2EE应用服务器WebLogic Server和最好的Java集成开发工具JBuilder结合起来开发J2EE应用，主要内容包括：WebLogic Se...
-
-
订阅51CTO邮刊
点击这里查看样刊
已有0条评论,0次赞
还能够输入500字