Vue.js前端开发技术 课件第一章 Vue基础

模块一：Vue基础荣耀·分享·共成长01.单元一:初始Vue02.单元二:环境安装单元目录荣耀·分享·共成长1单元一：初始Vue荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：前端技术的发展知识点2：MVVM风格开发框架知识点3：什么是Vue知识点4：Vue的优势知识点1：前技术的发展着web2.0时代的到来，前端在web开发中所占的比重越来越大，专注于内容呈现和网站交互的前端开发人员也逐渐展现出其不可替代性。前端所涉及的领域甚至不限于web应用，如HTML5技术允许我们开发原生的移动应用；ReactNative、Flutter等跨平台框架可以用于开发跨平台的移动应用；还有近些年相当流行的微信/支付宝小程序等。此外，随着微软的新项目ReactNativeforWindows的发布，使用前端技术开发Windows桌面应用也成为了可能。web1.0时代-静态内容呈现。web2.0时代-交互时代。web3.0时代-前端需要具备呈现更加复杂的数据的能力，并提供不亚于复杂的系统应用的交互能力和业务逻辑处理能力。荣耀·分享·共成长前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；MVC是后端的分层开发概念;MVVM是前端视图层的概念，主要关注于视图层分离；MVVM可以拆分成：View---ViewModel---Model三部分

，看下面的视图。知识点2：MVVM风格开发框架荣耀·分享·共成长MVVM分三部分Model,View,VMViewModel。MVVM是前端视图层的分层开发思想，主要把每个页面分成了M/V/VM，其中VM是MVVM思想的核心，因为VM是M和V之间的调度者。注前端页面使用MVVM的思想主要是为了开发更加方便，因为MVVM的思想提供了双向数据绑定。意：双向数据绑定是由VM提供的。知识点2：MVVM风格开发框架荣耀·分享·共成长荣耀·分享·共成长Vue.js是目前最火的一个前端框架；Vue.js、Angular.js、React.js一起，并成为前端三大框架。

知识点3：什么是VueAngular来自GoogleReact来自FacebookVue是尤雨溪本人维护的，虽然没有大公司支持，但是也比较流行。Vue.js（读音/vjuː/,类似于

view）是一套构建用户界面的

渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。软件下载：官网安装install=-找到开发版本-右击目标另存为。荣耀·分享·共成长1、轻量级框架只关注视图层,是一个构建数据的视图集合,大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。2、简单易学国人开发，中文文档,不存在语言障碍，易于理解和学习。3、双向数据绑定也就是所谓的响应式数据绑定。这里的响应式不是@media媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。知识点4：Vue的优势荣耀·分享·共成长这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。4、组件化Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数，然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。5、视图,数据,结构分离使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作6、虚拟DOM现在的网速越来越快了，但打开已经有缓存的页面还是感觉很慢，是因为浏览器知识点4：Vue的优势荣耀·分享·共成长本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或原生的JavaScriptDOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。而VirtualDOM则是虚拟DOM的英文，就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。7、运行速度更快像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势知识点4：Vue的优势2单元二：环境安装荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：Vue环境安装知识点2：node环境安装以及npm包管理格开发框架荣耀·分享·共成长软件下载：官网安装install-找到开发版本-右击目标另存为知识点1：Vue环境安装知识点2：node环境安装以及npm包管理荣耀·分享·共成长nodejs是js运行时的运行环境，类比java中jvm。nodejs不是一个js框架，千万不要认为是类似jquery的框架。大家习惯将

ECMAScript6.0

简称为

ES6，它是Javascript语言的下一代标准，它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.安装nodejs2.使用nodejs直接运行js文件在工作空间打开shift+右击-此处打开命令行node文件名.js知识点2：node环境安装以及npm包管理荣耀·分享·共成长1.下载node软件2.安装的时候，一路next下去，不用做任何的额外设置，装完即可。3.安装完成之后，可以查看其版本号：win+r打开cmd方式1：输入node-v即可查看版本号方式2：输入node--version即可查看版本号荣耀·分享·共成长1、安装nodejs，自动带npm命令工具检测node和npm装包工具：node–v和npm–v2、装cnpm因为npm是国外网址。比较慢。所以采用cnpm装包工具cnpm安装命令：npmicnpm–g如果以上指令尝试多次失败。注意：自己的机器安装：npminstall-gcnpm-registry=3、安装nrmnrm是镜像源切换工具。注意：nrm只是提供了一些npm常用的镜像地址（下载包的url地址），帮助我们快速切换地址。还是使用npm和cnpm进行安装。nrm安装：npminrm–g或者：运行：cnpmInrm-g知识点2：node环境安装以及npm包管