前端开发第一章Vue入门.docx

PAGE PAGE 2 / 23 第一章 Vue.js 入门 在学习 Vue 前，您应该有 HTM，L CSS 和 JavaScript 的基本知识。本教材使 用 WebStrom 工具开发并调试，案例源码基于 Vue 2.6.1 版本测试，样式表使 用 LayUI 样式实现。 本章要点 了解什么是 Vue.js 了解 Vue 中的 MVVM 模式 Vue 开发环境的准备与配置 了解 Vue 项目目录结构 实例化 Vue 对象、数据与方法 通过综合实例学习 Vue 原理与开发过程 Vue 简述 什么是 Vue.js Vue.js 的作者为 Evan You （尤雨溪），曾任职于 Google Creative Lab ，虽然是 Vue 是一个个人项目，但在发展前景上个人认为绝不输于 Google 的 Angular.js 和 Facebook 的 React.js 。 Vue.js （读音 /vju ?/, 类似于 view ）是一套构建用户界面的渐进式框架 , 是当下很 火的一套响应式系统的 JavaScript MVVM 库，它是以数据驱动和组件化的思想构建的。类 似其他前端开发库也有很多，比如 Angular.js ， React.js 等。 Vue.js 是前端主流框架中 的集大成者，它吸取了 Angular.js ， React.js 的经验，支持各种模式写法，入门非常简 单，相比于 Angular.js 和 React.js ， Vue.js 提供了更加简洁、更易于理解的 API，使得 我们能够快速地上手并使用Vue.js 。 Vue.js 自身不是一个全能框架，它只聚焦于视图层， 采用自底向上增量开发的设计，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具 和支持库一起使用时， Vue.js 也能完美地驱动复杂的单页应用。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组 件。 如果你之前已经习惯了用 jQuery 操作 DOM，学习 Vue.js 时请先抛开手动操作 DOM 的思维，因为 Vue.js 是数据驱动的，你无需手动操作 DOM。它通过一些特殊的 HTML 语法， 将DOM 和数据绑定起来，一旦你创建了绑定， DOM 将和数据保持同步，每当变更了数据， DOM 也会相应地更新。 Vue.js 的特性 遵循 MVVM 模式（ m-model（数据对象 ） v-view（ 视图） vm-view model）； 编码简洁，体积小，运行效率高，适合移动端 /PC 端； 它本身只关注 UI，可以轻松引入 Vue 插件或其他第三方库开发项目； Vue 扩展插件： vue-cli:Vue 脚手架 vue-resource（axios）:ajax 请求 vue-router: 路由 vuex: 状态管理 vue-lazyload: 图片懒加载 vue-scroller: 页面滑动相关 mint-ui: 基于 Vue 的 UI 组件库（移动端） Vue 优势 可进行组件化开发，使代码量减少； 可对数据进行双向绑定； 编写出来界面效果本身是响应式的，使网页能显示好看效果； 实现网络页面之间跳转，与 Vue 路由相比，超链接不会页面刷新； 为什么使用 Vue 由于近两年前端技术变革速度太快， vue 不论针对 web 项目开发，网站制作，还是 app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是采用传统的各种开源代码建站仿站，显然你的技 术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那 么 vue 将会是你未来技术增长的不二选择。 简单来说，在传统 web 开发中，我们搭建项目都以 html 结构为基础，然后通过 jquery 或者 js 来添加各种特效功能，需要去选中每一个元素进行命令。 这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者 项目工程较大，代码的修改将是复杂繁琐的，而这时候如果用了 Vue.js ，这些 问题都不复存在。比如一些单网页制作成的应用程序，一般涉及到数据交互的 内容都很多，而应用了 Vue 之后也将大大缩减工作量。 再简单来说，当前端页面和后端数据做一些操作的时候，可以通过 AJAX 请求对后端做数据持久化，不需要刷新整个页面，只需要改动 DOM 里需要改动的那部分数据即可。 MVVM 模式 MVVM 是 Model-View-ViewModel 的简写。它本质上就是 MVC 的改进版。 MVVM 就 是将其 中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。 下图 1-1 不仅概括了 MVVM 模式( Model-View-ViewMod