Vue.js项目开发实战

给大家带来的一篇关于Vue.js相关的电子书资源，介绍了关于Vue.js项目开发、Vue.js实战方面的内容，本书是由机械工业出版社出版，格式为PDF，资源大小186.6 MB，张帆编写，目前豆瓣、亚马逊、当当、京东等电子书综合评分为：8.6。

内容介绍

《Vue.js项目开发实战》以JavaScript語言为基本，以Vue.js项目开发全过程主导线，介绍了一整套朝向Vue.js的项目开发技术性。

从NoSQL数据库查询的搭建到Express项目API的撰写，后再由Vue.js显示信息在前端开发的网页页面中，让阅读者能够十分快速地把握这种技术性，提升项目开发的工作能力。这书分成4篇。第1篇介绍了Vue.js基本自然环境搭建，是本书的根基；第二篇介绍了免费电影网站项目的设计方案，涵盖ES6、Webpack和产品化自然环境搭建等核心技术；第三篇介绍了免费电影网站项目的前端和后端的完成，涵盖Node.js后端开发技术性、Vue.js各种各样部件和API等技术性；第四篇介绍了页面优化，通过学习一些Vue.js模版和架构，进而制做更为美观大方的操作界面（UI）。

这书合适Vue.js新手和升阶者阅读文章，也合适别的Web前端和后端开发发烧友阅读文章。针对一些产品运营，这书也一样合适阅读文章。此外，针对培训学校和各种设立Web开发课程内容的学校，这书是一本非常好的项目开发实例教程。

目录

• 前言
• 第1篇 背景知识
• 第1章 初探网页开发2
• 1.1 网页开发历史2
• 1.1.1 传统网页开发3
• 1.1.2 新前端网页开发5
• 1.2 MVVM风格开发框架6
• 1.2.1 为什么会出现MVVM6
• 1.2.2 MVVM架构的最佳实践7
• 1.2.3 MVC、MVP和MVVM开发模式对比8
• 1.3 Vue.js来了9
• 1.4 Vue.js的安装10
• 1.4.1 使用独立版本11
• 1.4.2 使用CDN安装13
• 1.4.3 “npm大法”安装15
• 1.4.4 使用Chrome浏览器测试Vue.js的双向绑定17
• 1.5 Vue.js的主要特性19
• 1.5.1 组件19
• 1.5.2 模板22
• 1.5.3 响应式设计22
• 1.5.4 过渡效果22
• 1.5.5 单文件组件24
• 1.6 小结与练习24
• 1.6.1 小结24
• 1.6.2 练习25
• 第2篇 项目设计
• 第2章 开启Vue.js之旅的准备工作28
• 2.1 JavaScript运行与开发环境28
• 2.1.1 神奇的包管理器——npm28
• 2.1.2 好用的浏览器——Chrome31
• 2.1.3 Vue.js的调试神器——vue-devtools34
• 2.1.4 非常智能的IDE——WebStorm36
• 2.2 认识ECMAScript 6（ES 6）39
• 2.2.1 ES 6的前世今生39
• 2.2.2 为什么要使用ES 640
• 2.3 ES 6的一些常用语法40
• 2.3.1 Default Parameters（默认参数）40
• 2.3.2 Template Literals（模板文本）41
• 2.3.3 Multi-line Strings（多行字符串）41
• 2.3.4 Destructuring Assignment（解构赋值）42
• 2.3.5 Enhanced Object Literals（增强的对象文本）42
• 2.3.6 Arrow Functions（箭头函数）43
• 2.3.7 Promise实现44
• 2.3.8 块作用域构造let45
• 2.3.9 Classes（类）46
• 2.3.10 Modules（模块）46
• 2.4 使用Babel进行ES 6的转化47
• 2.4.1 安装Babel48
• 2.4.2 使用Babel48
• 2.5 精简压缩生产环境的Webpack51
• 2.5.1 Webpack是什么51
• 2.5.2 配置一个完整项目的Webpack52
• 2.5.3 不得不说的新版Webpack 456
• 2.6 小结与练习59
• 2.6.1 小结59
• 2.6.2 练习59
• 第3章 从一个电影网站项目学习Vue.js60
• 3.1 快速构建第一个Vue.js程序60
• 3.1.1 通过CLI构建应用60
• 3.1.2 输出Hello world！63
• 3.1.3 开发环境与生产环境66
• 3.2 电影网站的设计70
• 3.2.1 网站的功能设计70
• 3.2.2 网站的路由设计71
• 3.2.3 网站的页面设计72
• 3.3 电影网站的技术选择73
• 3.3.1 服务的坚实后盾——数据库73
• 3.3.2 数据的搬运和加工——服务器端74
• 3.4 小结与练习74
• 3.4.1 小结74
• 3.4.2 练习75
• 第4章 电影网站数据库的搭建76
• 4.1 什么是数据库76
• 4.1.1 什么是SQL76
• 4.1.2 什么是NoSQL78
• 4.1.3 两种数据库的对比分析79
• 4.2 MongoDB基础入门80
• 4.2.1 为什么选择MongoDB80
• 4.2.2 安装MongoDB81
• 4.2.3 启动MongoDB83
• 4.2.4 安装MongoDB的可视化界面87
• 4.2.5 MongoDB的基础操作90
• 4.3 电影网站数据库的建立92
• 4.3.1 数据库的分析与设计93
• 4.3.2 数据集的建立94
• 4.4 小结与练习96
• 4.4.1 小结96
• 4.4.2 练习97
• 第3篇 Vue.js应用开发
• 第5章 电影网站服务器端的设计100
• 5.1 使用JavaScript开发后端服务100
• 5.1.1 神奇的Node.js100
• 5.1.2 什么是Express101
• 5.2 使用Express进行Web开发102
• 5.2.1 安装Express102
• 5.2.2 设计后台服务API105
• 5.2.3 设计路由107
• 5.3 服务器测试108
• 5.3.1 一个测试HTTP请求的Postman插件108
• 5.3.2 在Chrome中安装Postman插件109
• 5.3.3 使用Postman插件进行数据测试110
• 5.4 Express后台代码编写112
• 5.4.1 新建工程112
• 5.4.2 连接数据库115
• 5.4.3 使用Supervisor监控代码的修改118
• 5.5 用户系统开发119
• 5.5.1 注册路由122
• 5.5.2 登录路由125
• 5.5.3 找回密码路由128
• 5.5.4 提交评论路由133
• 5.5.5 点赞路由135
• 5.5.6 下载路由137
• 5.5.7 发送站内信路由138
• 5.5.8 接收站内信路由141
• 5.6 前台API开发143
• 5.6.1 显示排行榜145
• 5.6.2 显示文章列表145
• 5.6.3 显示文章内容146
• 5.6.4 显示用户个人信息147
• 5.7 后台API开发148
• 5.7.1 添加电影148
• 5.7.2 删除电影151
• 5.7.3 更新电影152
• 5.7.4 获取所有电影153
• 5.7.5 获取用户评论154
• 5.7.6 审核用户评论154
• 5.7.7 删除用户评论156
• 5.7.8 封停用户157
• 5.7.9 更新用户密码159
• 5.7.10 显示所有用户160
• 5.7.11 管理用户权限162
• 5.7.12 新增文章163
• 5.7.13 删除文章165
• 5.7.14 新增主页推荐166
• 5.7.15 删除热点信息168
• 5.8 小结与练习169
• 5.8.1 小结169
• 5.8.2 练习170
• 第6章 Vue.js项目开发技术解析171
• 6.1 Vue.js实例171
• 6.1.1 何为构造器171
• 6.1.2 实例的属性和方法172
• 6.1.3 生命周期173
• 6.2 Vue.js路由175
• 6.2.1 RESTful模式的路由175
• 6.2.2 安装vue-router175
• 6.3 Vue.js路由配置vue-router176
• 6.3.1 动态路由匹配176
• 6.3.2 嵌套路由179
• 6.3.3 编程式导航181
• 6.3.4 命名路由183
• 6.3.5 命名视图184
• 6.3.6 重定向和别名186
• 6.3.7 路由组件传递参数187
• 6.3.8 HTML 5 History模式188
• 6.4 数据获取189
• 6.4.1 导航守卫189
• 6.4.2 数据获取193
• 6.5 电影网站项目路由设计195
• 6.5.1 新建Vue.js项目195
• 6.5.2 前台

学习笔记

vue.js删除列表中的一行

splice(index,num,item1,item2,...,itemX) 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注：index--规定添加/删除项目的位置 num--要删除的项目数量 item--向数组添加的新项目 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。 (1)html代码： div id="app" ul li v-for="todo in todos" span{{ todo.text }}/span button @click="removeTodo($index)"X/button /li /ul /div （2）js代码： script new Vue({ el: '#app', data: { todos: [ { text: 'Add some todos' }, { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awes……

vue.js动态数据绑定学习笔记

对于vue.js的动态数据绑定，经过反复地看源码和博客讲解，总算能够理解它的实现了，心累~ 分享一下学习成果，同时也算是做个记录。完整代码GitHub地址：https://github.com/hanrenguang/Dynamic-data-binding。也可以到仓库的 README 阅读本文，容我厚脸皮地求 star，求 follow。 整体思路 不知道有没有同学和我一样，看着vue的源码却不知从何开始，真叫人头大。硬生生地看了observer, watcher, compile这几部分的源码，只觉得一脸懵逼。最终，从这里得到启发，作者写得很好，值得一读。 关于动态数据绑定呢，需要搞定的是 Dep , Observer , Watcher , Compile 这几个类，他们之间有着各种联系，想要搞懂源码，就得先了解他们之间的……

教你如何编写Vue.js的单元测试的方法

Vue.js是一个JavaScript框架，可用于构建Web应用程序的前端框架。特别是在创建复杂功能时，对于每个项目，有必要在我们的应用程序中查看所有内容，并检查它是否符合预期。然而，对于大型项目，每次新的更新后，检查每个功能将变得很麻烦。因此，我们可以创建可以一直运行的自动化测试，并保证我们的代码可以正常运行。在本文中，我们将为VueJS创建一些简单的单元测试。 要进行测试，我们将先制作一个基本的待办事项列表组件。我们将测试该列表是否正确显示，并且用户可以将新项目添加到待办事项列表中。希望在本教程结束之前，您可以编写测试，检查您的组件输出给用户，以及通过与HTML进……

vue.js快速搭建图书管理平台

Vue.js是当下很火的一个JavaScript MVVM（Model-View-ViewModel）库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 上一期简单讲解了vue的基本语法，这一次我们做一个小项目，搭建一个简单的图书管理平台，能够让我们更深刻的理解这门语言的妙用。 1、DEMO样式 首先我们需要搭建一个简单的demo样式，推荐大家使用bootstrap，可以很快的搭建出一个清晰简洁的页面。 给大家分享一段我的代码吧。 div class=container div class=col-md-6 col-md-offset-3 h1Vue demo/h1 div id=app table class=table table-hover caption/caption thead tr th序号/th th书名/th th作者/……

说说Vue.js中的functional函数化组件的使用

Vue.js 组件提供了一个 functional 开关，设置为 true 后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。 函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。 1 示例 这里，我们用 functional 函数化组件来实现一个智能组件。 html： div id="app" smart-component :data="data"/smart-component button @click="change('img')"图片组件/button button @click="change('video')"视频组件/button button @click="change('text')"文本组件/button/div js： //图片组件设置var imgOptions = { props: ['data'], render: function (createElement) { return createElement……

以上就是本次介绍的Vue.js电子书的全部相关内容，希望我们整理的资源能够帮助到大家，感谢大家对码农之家的支持。

上一篇：Web服务与数据交换关键技术研究

下一篇：SSM企业级框架实战