《Vue.js前端开发技术与实践（第二版）》 课件 第3章 初识Vue.pptx

第3章初识VueVue是一个轻量级的JavaScript框架，旨在构建现代化的Web应用程序。它的简单性和灵活性使得Vue是学习和使用的理想框架。zm

Vue简介MVVM模式数据绑定示例演示Vue3项目结构解释

Vue简介源起Vue由EvanYou在2014年创建，当时他在Google工作，为了开发大规模的Web应用而寻找一个更好的选择。发展Vue已成为最受欢迎的JavaScript框架之一，拥有强大的生态系统和活跃的社区支持。优点Vue的优点包括易于学习、使用方便、高效和灵活。它使您能够快速构建高质量的Web应用程序。

Vue的特点与优势1易学易用Vue具有简单而清晰的API，使得开发人员能够快速入门并创建高质量的Web应用程序。2灵活性Vue允许您以各种方式构建应用程序，可以与其他框架集成，也可以独立使用。3高效性Vue使用虚拟DOM实现快速而高效的渲染，减少了应用程序的负载并提高了性能。

Vue的使用案例1Alibaba（阿里巴巴）Alibaba使用Vue来构建大型的电子商务平台，如达达和淘宝。2Netflix（奈飞）Netflix使用Vue用于Windows10UWP应用、移动设备和桌面上的Web应用程序和TV端应用程序。3Nintendo（任天堂）Nintendo使用Vue创建了web应用程序NintendoSwitchParentalControls。

Vue的核心概念组件化Vue的核心思想是组件化，让您能够创建可重用且易于维护的代码。数据绑定Vue的双向数据绑定功能使得应用程序的状态可以自动响应用户交互行为。指令Vue提供了一组内置指令，同时也使您能够创建自定义指令，定制行为。

MVVM模式MVVM是Model-View-ViewModel的缩写，是一种在前端高效开发中广泛使用的设计模式。视图层负责展示数据，数据层和模型处理数据请求和响应。ViewModel又将视图层和数据层分离开来，使程序开发效率大大提高。

MVVM模式解释视图模型（ViewModel）是MVVM模式中的核心组成部分，负责管理视图和数据之间的交互。Vue.js3.0的Vue实例就是一个视图模型，通过视图的渲染和更新，对数据进行响应式处理。模型（Model）是数据的存储，它能够响应来自视图模型的指令。视图（View）是用户界面，负责展示数据，它能够向视图模型发出指令。

数据绑定单向绑定Vue.js3.0中的单向绑定是从数据层到视图层的一种数据交互方式，即数据的变更可以自动影响到视图层的展现。双向绑定Vue.js3.0中的双向绑定是从数据层到视图层和从视图层到数据层的一种数据交互方式，即数据和视图的变更可以自动相互影响。

示例演示

传统方式示例ViewModelViewModel

工程化项目示例从npm安装Vue脚手架，创建一个基本的Vue.js应用程序。实现基本的数据绑定使用Vue.js创建一个带有基本的数据绑定功能的Todo应用程序。使用Vue组件化开发通过开发一个电商应用程序来使用Vue.js的组件化开发方式。搭建Vue.js应用程序

搭建Vue.js应用程序

前提条件1熟悉命令行2已安装16.0或更高版本的Node.js

创建Vue3项目1npmcreatevue@latest这一指令将会安装并执行create-vue，它是Vue官方的项目脚手架工具。2配置选项设置项目名称、版本、默认语言等。

运行项目1本地开发使用npmrunserve命令，在本地环境运行Vue3项目。2热重载在开发过程中，热重载将自动更新你的代码变更，提供实时预览。

Vue3项目结构解释

Vue3项目结构解释public目录该目录包含静态资源，例如HTML模板和favicon。src目录该目录是项目的主要代码目录，包含所有的Vue组件、路由和其他逻辑。assets目录该目录存放项目所需的图像、样式和其他静态资源。views目录该目录包含应用的主要视图组件。

Vue3项目结构解释components目录该目录包含共享的可复用组件，可以在应用中的多个视图中使用。router目录该目录包含路由相关的文件，用于定义应用的页面导航。main.js文件该文件是Vue3应用的入口文件，在这里进行项目的初始化配置。App.vue文件该文件是应用的根组件，定义了应用的整体结构和布局。

Vue3项目结构解释package.json文件该文件包含项目的元数据和依赖项，可以配置脚本和其他相关信息。package-lock.json该文件用于锁定项目依赖项的版本，确保团队成员之间的版本一致。vite.config.js该文件包含Vite构建工具的配置选项，可以自定义项目的构建行为。