《PPT4 前端框架.pptx》由会员分享，可在线阅读，更多相关《PPT4 前端框架.pptx（162页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：PPT4 前端框架单元4 前端框架大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元描述1. 技术要求技术要求：（1）会搭建Vue.js开发环境；（2）会使用搭建脚手架构建Web项目；（3）会创建组件；（4）会使用Vue-Router实现动态页面切换；（5）会使用Axios实现Json数据的读取；（6）会利用Vue.js实现Json数据的呈现。2. 能力要求：能力要求：（1）熟练掌握Node.js及Vue.js安装；（2）熟练使用脚手架构建项目；（3）熟练掌握组件创建的方法；（4）熟练掌握Vue.js中Axios访问数据方法，能够获取 Json文件的数据；（5）熟练掌
2、握Vue.js的基本原理，如模板、数据、方法与事件等；（6）熟练掌握内置指令的使用，如数据绑定、条件渲染、列表渲染、事件处理等。 3. 素养要求：素养要求：（1）具有较强的程序调试能力；（2）具备较强的网站规划和建设能力；（3）具有较强的Web前端的设计、开发、调试及维护能力。新能源汽车可视化监测平台的前端功能中有很多共性的部分，使用传统的开发方式存在代码的重复，不易维护。当前涌现出的很多优秀的框架实现了功能分层，提高了用户对数据处理能力，能及时响应和交互能力，具有较好数据安全机制，可以使开发达到事半功倍的效果。本项目中结合实际业务需求，选用了轻量级响应式框架Vue.js完成了对项目基本框架的
3、构建，并在已建的框架中完成用户基础数据的显示：将当前用户的相关信息在页面中呈现，页面的最终设计效果图如图4-2所示。1图4-1 新能源汽车用户信息页面任务分解2知识要点l 前端框架简介l Vue.js安装l Webpack构建项目l Vue.js基础l 常用插件任务名称任务名称任务目标任务目标安排课时安排课时任务任务4.14.1搭建开发环境搭建开发环境完成Vue.js安装；使用脚手架搭建的项目2任务任务4.2 4.2 新能源汽车大数据分析系新能源汽车大数据分析系统路由与组件设计统路由与组件设计完成本系统组件的构建；使用Vue-Router完成页面管理2任务任务4.3 4.3 车辆管理页面的实现
4、车辆管理页面的实现了解Vue.js基础特性；使用Axios获取Json数据4任务任务4.4 4.4 动态页面的实现动态页面的实现使用列表渲染完成动态页面2总计：总计：10知识要点 Web前端承担着用户与服务器信息交互的重任，随着用户体验要求的不断提升，用户对数据处理能力、数据安全机制、及时响应及交互能力的要求越来越高，前端开发的模式也产生了新的变化。如今国内外涌现出很多优秀的前端框架，这些框架实现了功能分层，方便地进行功能修改，可以有效简化Web前端开发流程，降低开发难度，提高开发效率，实现Web系统前、后端开发完全分离，提高了系统的灵活性及可扩展性。1. 前端框架简介Angular.js是由
5、Google创建的一种JS框架，使用它可以扩展应用程序中的HTML，从而在web应用程序中使用HTML声明动态内容。Angular.js可以扩展HTML的语法，以便清晰、简洁地表示应用程序中的组件并允许将标准的HTML作为模板语言，Angular.js可以通过双向数据绑定双向数据绑定自动从拥有JavaScript对象（模型）的UI（视图）中同步数据，程序架构如图4-2所示。（1）Angular.js图图4-2 Angular程序架构程序架构目前比较流行的React.js、Angular.js、Vue.js，下面对常见的几种框架进行比较。1. 前端框架基础React是一个用于构建用户界面的Jav
6、aScript库，主要用于构建UI，很多人认为React是MVC中的V（视图）。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React采用声明范式，可以轻松描述应用；通过对DOM的模拟，最大限度地减少与DOM的交互，可以与已知的库或框架很好地配合，通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中；实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单，具体架构如图4-3所示。（2）React.js图图4-3 React架构架构1. 前端框架简介Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不
7、同的是，Vue被设计为可以自底向上逐层应用。Vue.js的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue.js也完全能够为复杂的单页应用提供驱动。其主要特点是：双向数据绑定，会自动对页面中某些数据的变化做出同步的响应；使用组件化开发，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，只要先在父级应用中写好各种组件标签，并且在组件标签中写好要传入组件的参数就可以完成整个应用。预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，计算完毕才真正将DOM操作提交，将DOM操作变化反
8、映到DOM树上。与其他框架不同的是，Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计方式，是更加灵活、开放的解决方案，架构更加简单，适合开发人员快速掌握其全部特性并投入使用，还便于与第三方库或既有项目整合。Vue.js响应式原理如图4-4所示。相对于Angular.js和React.js而言，Vue.js的学习曲线比较平稳，上手比较简单，是比较可靠的MVVM框架选择之一，因此在本书中使用Vue.js来构建项目。（3）Vue.js图图4-4 Vue.js响应式原理图响应式原理图2. Vue.js安装Vue.js开发版本地址为https:/vuejs.org/js/vue.j
9、s，可以通过该地址下载至本地，在页面中通过标签进行引入。（1）下载.js文件用标签引入与与jQuery相类似，相类似，JavaScript框架的安装方式基本有以下几种：框架的安装方式基本有以下几种：（2）使用CDN方法 BootCDN（国内）： unpkg：https:/ ，如（）2. Vue.js安装用Vue.js构建大型应用的时候推荐使用npm安装方法，npm能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js也提供配套工具来开发单文件组件。（3）NPM方法首先，先列出接下来需要的东西： Node.js环境（npm包管理器） vue-cli 脚手架构建工具
10、 cnpm npm的淘宝镜像2. Vue.js安装从Node.js官网（https:/nodejs.org/en/）下载并安装node，安装过程很简单，一直单击“下一步”按钮就可以完成安装。安装完之后，可以通过以管理员的身份打开命令行工具（右击“Win”图标，选择“Windows PowerShell（管理员）”命令），输入node-v命令，查看node的版本，若出现相应的版本号，则说明安装成功了，操作如图4-5所示。 安装Node.js图图4-5查看查看node版本版本 npm包管理器是集成在node中的，所以安装了node也就有了npm，直接输入npm -v命令，显示npm的版本信息，如图
11、4-6所示。图图4-6 查看查看npm版本版本到目前为止，node的环境已经安装完成，npm包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以还需要npm的国内镜像-cnpm。2. Vue.js安装在命令行中输入：然后等待，没报错表示安装成功（教材中cnpm已经安装过了，显示更新成功的信息，如图4-7所示）。 安装cnpm图图4-7安装安装cnpm在命令行中运行命令 npm install -g vue-cli 然后等待安装完成，如图4-8所示。图图4-8 安装安装vue-cli脚手架脚手架 安装vue-cli 脚手架构建工具通过以上3个步
12、骤，任务需要环境和工具都准备好了，接下来就可以使用vue-cli来构建项目了。3. Webpack构建项目模块化开发中会编写大量模块，如果不打包就上线，页面加载或交互时，将会发起大量请求。为了性能优化，需要使用打包器对模块进行打包整合，以减少请求数。Vue项目所有组件最终都将被打包到一个app.js中。webpack是一个现代JavaScript 应用程序的静态模块打包器（module bundler），可以将许多松散的模块按照依赖和规则打包成符合生产环节部署的前端资源。它做的事情就是，分析项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言（Sass、typeScript等），并
13、将其打包为适合的格式供浏览器使用。webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack打包出的bundle不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。webpack的工作方式：把项目当做一个整体，通过一个给定的主文件（index.js）webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包成一个可识别的js文件。在命令行中运行命令“vue init webpack 项目名 ”即可完成项目的构建（如图4-9所示），具体构建方法在任务4.1中将作详细介绍。图图4-9 使用使用Webpack构建项目
14、构建项目3. Webpack构建项目项目创建完成后，可以通过npm run dev运行项目，如图4-10所示。图图4-10 运行项目运行项目项目启动后，在浏览器中输入项目启动后的地址http:/localhost:8080,在浏览器中会出现Vue的Logo，如图4-11所示。图图4-11 项目运行界面项目运行界面3. Webpack构建项目打开项目目录，可以看到已经创建的相关文件夹及文件，如图4-12所示，目录及其作用如下：图图4-12 项目目录文件项目目录文件 build：最终发布代码的存放位置。 config：配置路径、端口号等一些信息，学生刚开始学习的时候选择默认配置。 node_mod
15、ules：npm 加载的项目依赖模块。 src：这里是开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件。 assets：放置一些图片，如Logo等。 components：目录里放的是一个组件文件，可以不用。 App.vue：项目入口文件，也可以将组件写在这里，而不使用components目录。 main.js：项目的核心文件。 static：静态资源目录，如图片、字体等。 test：初始测试目录，可删除。 index.html：首页入口文件，可以添加一些meta信息或者同统计代码啥的。 package.json：项目配置文件。 README.md：项目的说明文件。
16、注意：如果在项目无注意：如果在项目无node_modules目录可以通过执行目录可以通过执行cnpm install来完成安装项目所需要的依来完成安装项目所需要的依赖。安装完成之后，到自己的项目中去看，会多一个赖。安装完成之后，到自己的项目中去看，会多一个node_modules文件夹，这里面就是所需要的依赖包资源。文件夹，这里面就是所需要的依赖包资源。基础无论前端框架如何变化，它所要处理的事情依旧是模板渲染、事件绑定、处理用户交互，只是提供了不同的写无论前端框架如何变化，它所要处理的事情依旧是模板渲染、事件绑定、处理用户交互，只是提供了不同的写法和理念法和理念。（1）实例及选项 每个Vue.
17、js 应用都需要通过实例化Vue.js 来实现。语法格式如下：var vm = new Vue(/ 选项)在实例化的时候，可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期、钩子等选项。 模板Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。选项中主要影响模板或DOM选项有el和template，属性replace和template需要一起使用。基础 元素选项
18、1. 2. 3. var vm = new Vue(4. el: #app5. );6. el: 类型为字符串，DOM元素或函数，其作用是为实例提供挂载元素。基础 Template类型为字符串，默认会将template值替换挂载元素（即el对应的元素）并合并挂载元素和模板要节点属性。1. 2. 3. 4. 5. libing.vue6. 7. 8. 9. 10. 将被模板内容替换11. 12. 13. Todo List14. 15. 16. var vm = new Vue(17. el: #app,18. template: #tpl19. );20. 21. 22. 基础 数据Vue.j
19、s实例中可以通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。注意：如果传入注意：如果传入data的是一个对象，的是一个对象，Vue.js实例会代理起实例会代理起data对象里所有的属性，而不会对象里所有的属性，而不会对传入的对象进行深拷贝。另外，可以用对传入的对象进行深拷贝。另外，可以用Vue.js实例实例vm中的中的$data来获取声明的数据。来获取声明的数据。1. title 2. 3. var vm = new Vue(4. el: #app,5. data: title: 标题6. );7. 基础 生命周期的钩子每个Vue.js实例创建时，都会经历一系列的初始化
20、过程，调用相应的生命周期钩子。 created：实例创建完成后调用，此阶段完成数据监测等，但尚未挂载，$el 还不可用。 mounted：el挂载到实例后调用。1. title 2. 3. var vm = new Vue(4. el: #app,5. data: 6. title: 标题7. ,8. created() 9. console.log(Vue instance has been created!);10. ,11.mounted() 12. console.log(mounted: + this.$el); 13. 14. );15. 基础（2）数据绑定Vue.js的核心是一个
21、响应式的数据绑定系统，建立绑定后，DOM将和数据保持同步，这样无需手动维护DOM，使代码能够更加简洁易懂、提升效率。 文本插值数据绑定的基础形式就是文本插值，通过data属性定义数据，使用标签在实例对应的模板中进行绑定并使用。Hello,name Vue.js实例vm中name属性值会替换标签中的name，并且修改数据对象中的name属性，DOM也会随之更新。基础 HTML插值 ：将数据中的 HTML 转为纯文本后再进行插值，使用v-html输出 HTML代码。1. 2.3.4.5.var vm = new Vue(6. el: #app,7. data: 8. title: Vue.js9.
22、 10.);11.基础 属性绑定在Vue模板中的HTML属性上不能使用语法。HTML属性中的值应使用v-bind指令。1.2.Content3.4.5.var vm = new Vue(6. el: #app,7. data: 8. title: Vue.js9. 10.);11.基础 表达式绑定1.2. status ? 是 : 否 3.Content4.5.6. var vm = new Vue(7. el: #app,8. data: 9. status: true10. 11.);12.放在Mustache标签内的文本内容称为绑定表达式。除了直接输出属性外，一般绑定表达式可以由一个简单
23、的JavaScript表达式和可选的一个或多个过滤器构成。注意：每个绑定中只能包含单个表达式，并不支持注意：每个绑定中只能包含单个表达式，并不支持JavaScript语句，否则就会抛出异常，并且表达语句，否则就会抛出异常，并且表达式里不支持正则表达式，如需要进行复杂的转换，可以使用过滤器或计算属性来进行处理。式里不支持正则表达式，如需要进行复杂的转换，可以使用过滤器或计算属性来进行处理。基础 过滤器Vue.js允许在表达式后添加可选的过滤器，以管道符“|”指示。Vue.js 1.0中内置了10个过滤器。 Capitalize：字符串首字符转化为大写。 Uppercase：字符串转化成大写。 L
24、owercase：字符串转化成小写。 Currency：参数为String货币符号 ，Number 小数位，将数字转化成货币符号，并且会自动添加数字分节号。 Pluralize：参数为String single, double, triple，字符串复数化。 如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组 处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加 最后一个参数的值。 Json：参数为 Numberindent 空格缩进数，与JSON.stringify()作用相同，将Json对象数据输出成符合 jso
25、n 格式的字符串。 debounce：传入值必须是函数，参数可选，为Numberwait，即延时时长。作用是当调用函数n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。 limitBy：传入值必须是数组，参数为Numberlimit，Numberoffset， limit 为显示个数，offset为开始显示数组下标。 filterBy：传入值必须是数组，参数为String | Function targetStringOrFunction，即需要匹配的字符串或函数（通过函数返回值为true或false来判断匹配结果）；“in”（可选分隔符）；StringsearchKe
26、ys，为检索的属性区域。 orderBy：传入值必须是数组，参数为 String|Array|FunctionsortKeys，即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。也可以像Array.Sort()那样传入自己的排序策略函数。第二个参数为可选参数 Stringorder，即选择升序或降序，order=0为升序，order0为降序。 基础使用示例：name|uppercase将name传入给uppercase内置过滤器，返回大写值。但vue.js 2.0中已经去除了内置的过滤器，但可以使用全局方法Vue.filter()注册一个自定义过滤器，接受过滤ID和过滤函
27、数两个参数。过滤器注册语法格式：Vue.filter( id, definition )本文以日期格式过滤为例，具体方法如下：引入moment.js：1. npm install -S moment2. import Vue from vue3. import moment from moment注册过滤器:1. Vue.filter(datefmt, function (input, fmtstring) 2. return moment(input).format(fmtstring);3. );过滤器使用：1. new Vue(2. el: #app,3. data: 4. now: n
28、ew Date()5. 6.)7. now | datefmt(YYYY-MM-DD HH:mm:ss) 基础 v-modelv-model指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例vm中对应的属性值也同时更新。主要应用如下：1. 2. your input is :UserNameText绑定：当用户在输入框中改变文本内容时，显示内容也自动跟着变化。Radio绑定：1. 男2. 女3. gender基础Checkbox绑定：1. 2. 单个复选框：3. 4. checked 5. 多个复选框：6. 7. 苹果8. 9. 橙子10. 11. 葡萄12. 13. 选择的值为:
29、checkedNames 14. 15. 16. new Vue(17. el: #app,18. data: 19. checked : false,20. checkedNames: 21. 22. )23.程序运行结果，如图4-13所示。图图4-13 运行结果运行结果基础Select绑定：1. 2. 3. 请选择4. chinese5. math6. music7. english8. 9. 10. 你的选择是: selected11. 12. 13. 14. new Vue(15. el: #app,16. data: 17. selected: 18. 19. )20. 上述程序运行
30、结果，如图4-14所示。图图4-14 select运行结果运行结果基础 v-if/v-else/v-show1. 2. A3. 4. B5. 6. C7. 8. 9. Not A/B/C10. 11. 12. 13. new Vue(14. el: #app,15. data: 16. type: C17. 18. )19. V-if：在元素和template中使用v-if指令。 V-else：给v-if添加一个else块。 v-else-if：用作v-if的else-if块。基础 v-show：根据条件展示元素。1. 2. Hello!3. 4. 5. new Vue(6. el: #app
31、,7. data: 8. ok: false 9. 10. )11. v-for：可以绑定数据到数组来渲染一个列表。1. 2. 3. 4. s.name 5. 6. 7. 8. 9. new Vue(10. el: #app,12. data: 13. students: name: Mary , name: Daisy , name: Rose 14. 15. )16. 上述程序运行结果，如图4-15所示。图4-15 v-for程序运行结果基础 v-on：完成事件监听，接收一个已定义的方法调用，如图4-16所示：1. 2. Say hi3. Say what4. 5. 6. new Vue(
32、7. el: #app,8. methods: 9. say: function (message) 10. alert(message)11. 12. 13. )14. 图4-16 v-on运行结果基础1. 2. Say hi3. Say what4. 5. 6. new Vue(7. el: #app,8. methods: 9. say: function (message) 10. alert(message)11. 12. 13. )14. 图4-16 v-on运行结果基础（4）组件组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
33、组件系统可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。注册一个全局组件语法格式如下：Vponent(tagName,options)tagName为组件名，options为配置选项。注册后，可以使用以下方式来调用组件： 全局组件：所有实例都能用全局组件。1. 2. 3. 4. 5. / 注册6. Vu ponent(runoob, 7. template: 自定义组件!8. )9. / 创建根实例10. new Vue(11. el: #app12. )13. 基础 局部组件：实例选项中注册局部组件，这样组件只能在这个实例中使用。1. 2. 3. 4.
34、 5. / 注册6. Vponent(child, 7. props: message, / 声明 props8. template: message / 同样也可以在 vm 实例中像 “this.message” 这样使用9. )10. new Vue(/ 创建根实例11. el: #app12. )13. prop：父组件用来传递数据的一个自定义属性。组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明prop：1. 2. 3. 4. 5. / 注册6. Vponent(child, 7. props: message, / 声明 props8. templa
35、te: message / 同样也可以在 vm 实例中像 “this.message” 这样使用9. )10. new Vue(/ 创建根实例11. el: #app12. )13. 基础 动态prop：类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。1. 2. 3. 4. 5. 6. 7. 8. 9. / 注册10. Vponent(child, 11. props: message, / 声明 props12. template: message 13. / 同样也可以在 vm 实
36、例中像 “this.message” 这样使用14. )15. / 创建根实例16. new Vue(17. el: #app,18. data: parentMsg: 父组件内容 19. )20. 基础 prop验证1. Vponent(my-component, 2. props: 3. propA: Number, / 基础的类型检查 (null 和 undefined 会通过任何类型验证)4. propB: String, Number, / 多个可能的类型5. propC: / 必填的字符串6. type: String,7. required: true8. ,9. propD:
37、/ 带有默认值的数字10. type: Number,11. default: 10012. ,13. propE: / 带有默认值的对象14. type: Object,15. default: function () / 对象或数组默认值必须从一个工厂函数获取16. return message: hello 17. 18. , 19. propF: 20. validator: function (value) 21. return success, warning, danger.indexOf(value) != -1 22. / 这个值必须匹配上述字符串中的一个 23. 24. 2
38、5. 26.)组件可以为props指定验证要求。为了定制prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。当 prop 验证失败的时候，Vue（开发环境构建版本）将会产生一个控制台的警告。基础 data：1. 2. 3. 4. 5. 6. 7. var buttonCounter2Data = 8. count: 09. 10. Vponent(button-counter2, 11. data: function () 12. / data 选项是一个对象，会影响到其他实例13. return buttonCounter2Data14. ,15. t
39、emplate: 点击了 count 次。16. )17. new Vue( el: #components-demo3 )18. 在组件中必须是一个函数，每个实例可以维护一份被返回对象的独立的拷贝，如果data是一个对象则会影响到其他实例。上述程序运行结果，如图4-17所示。图图4-17 程序运行结果程序运行结果5.常用插件（1）Element-ui npm i element-ui -Selement-ui是一个ui库，它不依赖于Vue。但是却是当前和Vue配合做项目开发的一个比较好的ui框架。 npm安装推荐使用npm的方式安装，它能更好地和 webpack 打包工具配合使用。 引入El
40、ement1. import Vue from vue;2. import ElementUI from element-ui;3. import element-ui/lib/theme-chalk/index.css;4. import App from ./App.vue;5. Vue.use(ElementUI);6. new Vue(7. el: #app,8. render: h = h(App)9. );注意：样式文件需要单独引入，如第注意：样式文件需要单独引入，如第3行代码所示。行代码所示。对于Element-ui的相关内容，可进入官网https:/ Npm install v
41、ue-routerVue-router路由给Vue.js提供路由管理的插件，利用hash变化控制动态组件的切换。它允许用户通过不同的URL访问不同的内容。它向服务器端发送一个请求，服务器响应后根据所接受到的信息去获取信息和指派对应的模板，渲染成HTML再返回给浏览器，解析成可见的页面。 安装 引入1. import Vue from vue2. import router from ./router3. Vue.use(vueRouter)使用npm命令可完成安装5.常用插件 基本用法Vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换常规路径则为在当前
42、url路径后面加上#!/path，path即为设定的前端路由路径。1. 2. Router-Example!3. 4. First5. Second6. 7. 8. 9. 10. const first = template: First 11. const second = template: Second 12. const routes = 13. path: /first, component: first ,14. path: /second, component: second 15. 16. const router = new VueRouter(17. routes / （缩
43、写）相当于 routes: routes18. )19. const app = new Vue(20. router21. ).$mount(#app)22. 代码说明：代码说明：第4-5行：使用router-link 组件来导航，通过传入“to”属性指定链接。 第7-8行：路由匹配到的组件将渲染在这里。第10-11行：定义组件，也可以从其他文件import进来。第12-15行：定义路由，每个路由应该映射一个组件，其中component可以是通过vue.extend()创建的组件构造器，也可以只是一个组件配置对象。第16-18行：创建router实例，然后传入routes配置。第19-21行
44、：创建和挂载根实例，要通过router配置参数注入路由。这个程序运行效果如图4-18所示。图图4-18 运行结果运行结果5.常用插件 相关属性to表示目标路由的链接。当被点击后，内部会立刻把to的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。1. 2. Home3. 4. Home5. 6. Home7. 8. Home9. 10. Home11. 12. User13. 14.Register5.常用插件（2）AxiosVue自2.0开始，vue-resource不再作为官方推荐的Ajax方案，转而推荐使用Axios。Axios是基于Promise的
45、HTTP请求客户端，可同时在浏览器和Node.js中使用，和其他的Ajax库都是很类似的。它本身具有以下特征： 从浏览器中创建XMLHttpRequest 从Node.js发出HTTP请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 引入方式$ npm install axios5.常用插件 执行GET请求1. axios.get(/user?ID=12345)2. .then(function (response) 3. console.log(response);4. )5. .catch(functio
46、n (error) 6. console.log(error);7. );8. axios.get(/user, 9. params: / 也可以通过 params 对象传递参数10. ID: 12345 11. 12. )13. .then(function (response) 14. console.log(response);15. )16. .catch(function (error) 17. console.log(error);18. ); 执行POST请求1. axios.post(/user, 2. firstName: Fred,3. L astName: Flintst
47、one4. )5. .then(function (response) 6. console.log(response);7. )8. .catch(function (error) 9. console.log(error);10. );任务4.1 搭建Vue开发环境在技术要点中，提到了搭建Vue环境的方法有3种，因为前面提及到用Vue.js构建大型应用的时候推荐使用npm安装方法，因此本任务要介绍了使用npm完成Vue环境的安装及新建项目的方法。1. 任务描述2. 任务分析使用npm进行环境的开发和运行，学会使用Vue来搭建项目。任务4.1 搭建Vue开发环境Node.js是一个基于Chr
48、omes JavaScript runtime的可以快速构建网络应用的平台，提供了一种“语言级”高度的开发模式，是一种新思维，能够从服务端把数据主动推送给用户，可以帮助人们迅速建立web站点。Node.js允许在Web浏览器之外编译和运行JavaScript代码，这大大增加了JavaScript的使用次数。本任务中介绍了Node.js的安装与配置。3. 任务实施（1）Node.js的安装与配置 Node.js获取。进入Node.js的官方网站（如图4-19所示），单击“DOWNLOADS”按钮进入下载页面，选择相应操作系统及电脑的位数对应的安装文件（如图4-20所示），单击进行下载。图图4-1
49、9 Node.js官方网站首页官方网站首页图图4-20 Node.js下载页面下载页面任务4.1 搭建Vue开发环境3. 任务实施 Node.js安装。双击已下载的安装文件，连续单击“Next”按钮即可完成安装，如图4-21至图4-26所示。图4-21 Node.js安装步骤一 图4-22 Node.js安装步骤二图4-23 Node.js安装步骤三 图4-24 Node.js安装步骤四图4-25 Node.js安装步骤五图4-26 Node.js完成安装安装完成后，在DOS的任意目录下，使用命令node -v可查看当前版本，如果能够正确看到版本号（如图4-27所示），则说明已经安装成功。图4
50、-27 node.js版本号查看任务4.1 搭建Vue开发环境3. 任务实施安装完成后，Node.js默认的路径为C:Program Filesnodejs，node.exe是命令node的主要执行文件，node_modules目录是Node.js安装时附带的内置模块就是npm。npm是Nodejs Package Manager的缩写，它是一个包管理工具，可让用户下载和安装JavaScript库和包，就如同Linux中的yum仓库，rpm包管理、Python中的pip包管理工具一样。而这些包管理工具都是予以使用的人们方便，同时解决各种包依赖之间的关系的，它基本上是Node.js应用程序的依赖