Vue.js 前端开发实战教程（慕课版） 课件 01 初识 Vue.js、02 Vue.js 基础.pptxVIP

第1章初初识识VVuuee..jjss第1章初识Vue.js

第1章初初识识VVuuee..jjss知识要点Vue.js是什么Vue.js的特性MVVM设计模式介绍Vue.js的发展历程为什么要使用Vue.jsVue.js的安装及使用直接用script引入通过npm安装本章小结动手实践目录

第1章初识Vue.js1.1 Vue.js是什么Vue.js是一套用于构建用户界面（UserInterface，UI）的渐进式框架。程序员这样评价它：“Vue.js在兼具Angular.JS和React优点的同时，还剔除了它们的缺点。”常见的互联网技术网站掘金网、娱乐动漫网站哔哩哔哩、点餐App饿了么等都是用Vue.js开发的，如左图(掘金网首页)和右图(饿了么App首页)所示。

第1章初识Vue.js1.1 Vue.js是什么1.1.1 Vue.js的特性轻量级框架:是相对于重量级框架的一种设计模式，轻量级框架不带有侵略性应用程序接口（ApplicationrogrammingInterface，API），对容器也没有依赖性，易于配置，易于通用，启动时间较短。12双向数据绑定:我们不需要关心文档对象模型DocumentObjectModel，DOM）是怎样更新数据的，数据的改变可直接反映到DOM结构里。3带有特殊的指令:指令(Directives)带有v-前缀的特殊特征，当表达式的值改变时，指令会将其产生的连带影响响应式地作用于DOM。4插件化:Vue.js目前只提供基本的页面开发的功能，如果想开发更为复杂的场景需要一些其他插件的辅助。如路由、状态管理等。5简单:Vue.js学习使用难度不高，由中国人开发，中文文档很丰富，轻量化，性能好，可以利用虚拟DOM提高页面更新的速度。

第1章初识Vue.js1.1 Vue.js是什么1.1.2 MVVM设计模式介绍传统的模型-视图-控制器（Model-View-Controller，MVC）设计模式。Vue.js采用模型-视图-视图模型（Model-View-ViewModel，MVVM）的设计模式。是一个同步View和Model的对象。由数据驱动视图，实现双向绑定，View的变化会自动反映在ViewModel中。ViewModel代表UI组件，它负责将数据模型转化成UI进行展现ViewModel代表数据模型，用户可以在Model中定义数据修改和操作的业务逻辑

第1章初识Vue.js1.1 Vue.js是什么1.1.2 MVVM设计模式介绍 例如在打开一个网站时，首先映入眼帘的是网站的外观，也就是网站的结构布局，这些内容就代表View，如图所示。当我们在网站上点击或输入内容时，需要与网站进行交互的逻辑通常被放在ViewModel里面；而网站上的数据请求等需要对数据库进行读取操作的部分通常被放在Model里面。它们彼此之间分工明确，相互独立。

第1章初识Vue.js1.1 Vue.js是什么1.1.2 MVVM设计模式介绍MVVM设计模式的工作原理如图所示。

第1章初识Vue.js1.1 Vue.js是什么1.1.3 Vue.js的发展历程加入了Typescript并支持渐进式网页应用（ProgressiveWebApp，PWA），调整了目录结构，修改了ESLint、Babel、browserslist相关配置等。VueCLI3.0优化API（删除或、新增）、提升性能、改善生命周期函数和其他方法、拓展vue.js的使用场景。vue.js2.0简易上手的良好体验，同时尽可能地避免因一时的方便简易而影响长期的可维护性。vue.js1.0Vue.js的开发者是尤雨溪，Vue.js最早是一个单纯的实验项目。vue.js诞生

第1章初识Vue.js1.2 为什么要使用Vue.js以前，前端开发者开发HTML静态模板页面，是通过原生Javascript语言操作DOM节点来实现页面元素的更新的。JQuery，它把操作DOM节点的方法做了二次封装，让前端开发者在开发时不用再考虑浏览器的兼容问题，告别了一个功能多套代码的日子，同时它的API对前端开发者而言更加友好，操作也更加简单。长期操作DOM节点会消耗性能，虚拟DOM树出现后。前端开发者不用直接操作真实DOM，而是使用虚拟DOM树，渲染时候会有一套机制来对比更新前与更新后的内容。然后只用把更新后的内容在真实DOM上做修改即可，这样大大提高了性能与效率。总之，使用