Vue.js前端开发实战（第2版）-教学课件 第1章 初识Vue.pptxVIP

;;;;;前端技术的发展;;;当开发大型交互式项目时，开发者需要编写大量的JavaScript代码来操作文档对象模型

（DocumentObjectModel，DOM）并处理浏览器的兼容性问题。

为了简化DOM操作和减少开发过程中的浏览器兼容性问题，jQuery提供了一个选择器引擎，它比其他引擎查询速度更快，并为不同浏览器之间的JavaScript不兼容提供了隐式处理方法，因此jQuery深受开发人员的欢迎。

jQuery的核心思想是使开发人员仅编写少量的代码就能实现更多的功能。;在移动互联网时代，前端技术被应用于移动端开发中。

为了使移动端网页的使用体验更接近用户习惯，移动端网页通常会做成单页Web应用

（SinglePageWebApplication）的形式。

单页Web应用在使用过程中只需要加载一个HTML页面，而传统的网页是用户每单击一个链接都需要加载相应的HTML页面。需要说明的是，单页Web应用并不是只能显示一个页面，所谓“单页”是对浏览器而言的，而开发者可以利用Ajax技术实现逻辑上的页面切换的效果。;为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。

这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。

这些框架还为开发者提供了一套开发规则，控制权在框架本身，用户需要按照框架的规范进行开发。与jQuery相比，使用框架开发的项目具有更高的开发效率、更好的可维护性、更强的可扩展性和更高的性能。

在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。;多学一招：什么是单页Web应用;多学一招：什么是单页Web应用;多学一招：什么是单页Web应用;多学一招：什么是单页Web应用;Vue简介;;;;使用Vue进行项目开发具有以下优势。

① 轻量级。Vue是一个轻量级的前端开发框架，文件体积小。

② Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学

习的门槛。

③ Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。;④ Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应???数据绑定，可支持单向和双向数据绑定。

⑤ Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于

团队的协同开发。

⑥ Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程

化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。;Vue是基于MVVM模式的框架。

MVVM主要包含Model（数据模型）、View

（视图）和ViewModel（视图模型）。

其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与

数据模型，负责监听Model或者View的改变。;Vue的基本工作原理如下图所示。;View和Model不能直接通信，它们需要借助ViewModel才能进行通信。

ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。ViewModel包含DOMListeners和DataBindings。其中，DOMListeners用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改；DataBindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。;;Vue的4个特性。;在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。;Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。;指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。

指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if