Vue2实践揭秘 - (EPUB全文下载)

文件大小：0.17 mb。
文件格式：epub 格式。
书籍内容：

Vue2实践揭秘
第1章　例说Vue.js
第2章　工程化的Vue.js开发
第3章　路由与页面间导航
第4章　页面的区块化与组件的封装
第5章　Vue的测试与调试技术
第6章　视图与表单的处理
第7章　Vuex状态管理
附录A　Chai断言参考
附录B　Vee-Validate验证规则参考
第1章　例说Vue.js
本章将通过极具代表性的Todo的示例作为引领读者进入Vue.js大门的引子。我会以实践为第一出发点，从零开始一步一步地构造一个单页式的Todo应用，在这个过程中会将Vue.js相关的知识点融入其中，在实际应用中展现这个“小”而“强”的界面框架。
我们先来看看最终希望构造出一个什么样的App：
Vue.js与Angular2和React相比，让我感觉最舒适的是它在一开始就为我们铺平了入门的道路，这就是它的脚手架vue-cli。因为它的存在，省去了手工配置开发环境、运行环境和测试环境的步骤，开发者可以直接步入Vue.js开发的殿堂。然而，现在我并不打算详细地介绍这个脚手架工具，先让我们一起从使用体验来感性地认识它，在后面的章节中我会详细地介绍这个工具。
在开始动手之前，必须先得在机器上安装好npm，然后输入以下指令将vue-cli安装到机器的全局环境中：
然后，我们就可以开始建立工程了，键入以下的指令：
此时控制台会提出一些关于这个新建项目的基本问题，直接“回车”跳过就行了。然后进入vue-todo目录，安装脚手架项目的基本支持包：
安装完支持包后键入以下指令就可以运行一个由脚手架构建的基本Vue.js程序了：
是不是很简单？进入代码中看看vue-cli到底为我们构造了一个什么样的代码结构：
Vue2与Vue1.x相比有了很大的区别，从最小化的运行程序开始了解Vue是一种绝佳的途径，先从main.js文件入手：
这里就运用了Vue2新增的特色Render方法，如果你曾用过React，是不是有一种似曾相识之感？确实，Vue2甚至连渲染机制都与React一样了。为了得到更好的运行速度，Vue2也采用了Virtual DOM。如果你还没有接触过Virtual DOM，并不要紧，现在只需要知道它是一种比浏览器原生的DOM具有更好性能的虚拟组件模型就行了，我们会在稍后的章节中再来讨论它。
我们需要知道的是，通过import将一个Vue.js的组件文件引入，并创建一个Vue对象的实例，在Vue实例中用Render方法来绘制这个Vue组件（App）就完成了初始化。
然后，将Vue实例绑定到一个页面上，真实存在的元素App Vue程序就引导成功了。
打开index.html文件就能看到Vue实例与页面的对应关系：
也就是说，一个Vue实例必须与一个页面元素绑定。Vue实例一般用作Vue的全局配置来使用，例如向实例安装路由、资源插件，配置应用于全局的自定义过滤器、自定义指令等。在本章示例中，我们只需要知道它的作用就可以了。
我们需要了解的是App.vue这个文件，*.vue 是Vue.js特有的文件格式，表示的就是一个Vue组件，它也是Vue.js的最大特色，被称为单页式组件。“*.vue”文件可以同时承载“视图模板”、“样式定义”和组件代码，它使得组件的文件组织更加清晰与统一。
Vue.js的组件系统提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这一点，几乎任意类型应用的界面都可以抽象为一个组件树：
Vue2具有很高的兼容性，我们也可以用“.js”文件来单纯地定义组件的逻辑，甚至可以使用React的JSX格式的组件（需要babel-plugin-transform-vue-jsx支持）。
脚手架为我们创建的这个App组件内加入了不少介绍性的文字，将这个文件“净化”后就可以得到一个最简单的Vue组件定义模板：
由以上的代码我们可以了解到，单页组件由以下三个部分组成：
·