《数据可视化技术》 课件 21 Vue.js开发基础、22 大数据岗位分析.pptx

《数据可视化技术》单元21Vue.js开发基础01准备活动点名、复习本次课学习内容、学习目标介绍学习内容本单元学习使用Vite创建Vue3项目。任务1、Node.js的下载和安装任务2、创建Vue3项目任务3、使用组合式API开发项目学习目标1、知识（1）了解Vue的特性，能够说出Vue的4个特性（2）掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装（3）掌握常见的包管理工具的使用方法，能够应用npm和yarn相关命令（4）掌握Vite的使用方法，能够使用Vite创建Vue3项目（5）熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别2、技能（1）能够下载和安装Node.js（2）能够使用npm和yarn相关命令（3）能够使用Vite创建Vue3项目（4）能够使用组合式API开发3、素养（1）严谨认真、代码规范；（2）数据安全、爱国精神；（3）信息检索能力02发展活动任务分析、任务资讯、演示讲解、任务实施1什么是Vue1.1什么是Vue为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。这些框架还为开发者提供了一套开发规则，控制权在框架本身，用户需要按照框架的规范进行开发。与jQuery相比，使用框架开发的项目具有更高的开发效率、更好的可维护性、更强的可扩展性和更高的性能。在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。1.1什么是VueVue（读音：/Vju?/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。1.1什么是Vue使用Vue进行项目开发具有以下优势。轻量级。Vue是一个轻量级的前端开发框架，文件体积小。Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。1.1什么是VueVue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。1.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。1.1什么是VueVue的基本工作原理如下图所示。1.什么是VueView和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。ViewModel包含DOMListeners和DataBindings。其中，DOMListeners用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改；DataBindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。1.2Vue的特性Vue的4个特性。双向数据绑定数据驱动视图指令插件1.2Vue的特性1.数据驱动视图在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。1.2Vue的特性2.双向数据绑定Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。1.2Vue的特性3.指令指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。1.2Vue的特性4.插件Vue支持插件，通过加载插件可以实现更多的功