Vue.js3前端开发实战（微课版）-课件 项目1 初识Vue.js

PROJECT1项目1初识Vue.jsVue.js3前端开发实战轻量级框架MVVM模式渐进增强Vue.js现代前端开发框架学习目标知识目标

理解Vue.js框架的核心特性

掌握MVVM开发模式的核心思想

了解Vue.js框架的发展历程

技能目标

能够独立完成Vue.js开发环境的配置

能安装调试工具VueDevTools进行代码

调试

掌握在HTML网页中引入Vue.js框架，

并创建Vue实例

素养目标

增强对技术创新的敬畏与追求，理解

Vue作为华人开发者成果的意义

养成良好开发习惯，遵循程序书写规范，

注重代码质量与性能优化

TASK1.1任务1.1认识Vue了解Vue.js的核心概念、发展历程与MVVM设计模式核心概念发展历程MVVM模式什么是Vue.js基本概念由尤雨溪（EvanYou）创建的构建用户界面的渐进式前端JavaScript框架核心思想数据驱动和组件化开发+主要特点响应式数据双向数据绑定声明式渲染轻量级框架简单易学视图数据分离虚拟DOMVue.js发展历程2013-2014起源与诞生

尤雨溪创建Vue.js原型

0.1版本正式开源

2015-2016成熟与生态扩张

Vue1.0发布，确立核心架构

Vue2.0推出虚拟DOM和响应式系统

形成”Vue全家桶”生态体系

2020至今全栈演进与新时代

Vue3.0发布，基于TypeScript重构

性能大幅提升，Vite构建工具

覆盖SSR、SSG等全栈场景

Vue3.0主要改进更小的体积（减少约41%）更快的初始化速度推出CompositionAPI更好的TypeScript支持全新响应式系统（Proxy）TreeShaking改进Teleport和Suspense组件MVVM设计模式MVVM=Model+View+ViewModelModel+View+ViewModelModel（模型）应用的数据层，包含从后端获取的原始数据或用户输入信息View（视图）用户可见的界面，负责展示数据并接收交互事件ViewModel（视图模型）连接Model与View的桥梁，监听数据变化并自动更新视图MVVM优势关注点分离独立编写数据逻辑与界面，提升代码可维护性开发效率高自动化同步机制减少重复代码，适合动态交互应用可测试性强ViewModel与View解耦，便于单元测试与调试任务1.2

准备开发与调试环境配置VisualStudioCode编辑器与VueDevTools调试工具VS

CodeVueDevTools腾讯云代码助手TASK1.2VisualStudioCode安装与配置VS

Code特点跨平台支持（Windows、macOS、Linux）丰富的插件生态系统智能代码提示与自动补全集成终端，无需切换外部工具良好的性能表现安装步骤下载安装包运行安装向导选择安装路径完成安装VS

Code编辑器界面VisualStudioCode安装与配置推荐插件Vue-OfficialVue官方开发工具套件，提供语法高亮、智能提示和错误诊断LiveServer实时本地服务器，保存代码时浏览器自动刷新更新CodeBuddy腾讯云代码助手，提供代码补全、注释生成和代码优化Chinese(Simplified)LanguagePackforVisualStudioCode‌可将编辑器界面翻译为简体中文，降低学习门槛提升本地化体验‌VueDevTools调试工具VueDevTools强大的浏览器扩展插件，专为Vue应用程序设计简化Vue应用的开发和调试过程安装方式1crx插件直接安装拖拽crx文件到扩展程序管理页面2离线安装包安装需要Node.js环境，从GitHub下载源码编译主要功能查看组件树结构实时查看和修改组件状态监控事件触发性能分析

提示：按F12打开开发者工具，点击Vue选项卡即可使用任务1.3

第一个Vue应用通过实际操作，掌握创建Vue应用的基本方法全局构建版本ES模块版本DevTools调试TASK1.3第一个Vue应用

【示例1-1】：

使用Vue框架创建简单的Vue应用，在页面渲染内容“Hello，Vue3！”。Vue.js引入来源CDN服务jsDelivrunpkgecdnjsbootcdn

jsdelivr平台Vue资源页面vue下载包目录结构使用全局构建版本创建Vue应用引入方式CDN引入/npm/vue@3/dist/vue.global.js本地引入（假设vue.global.js放置于js文件夹）./js/vue.global.js代码示例<scriptsrc="./js/vue.global.js"></script><divid="app">{{message}}</div><script> Vue.createApp({ data(){ return{ message:'Hello,Vue3!' } } }).mount('#app')</script>适用场景不使用构建工具需要快速引入Vue简单项目快速开发特点•不依赖模块系统•直接在浏览器中运行•适合学习和原型开发使用ES模块构建版本创建Vue应用引入方式script标签声明<scripttype="module">import语句import{createApp}from'./js/vue.esm-browser.js'代码示例<divid="app">{{message}}</div><scripttype="module">import{createApp}from'./js/vue.esm-browser.js'createApp({data(){return{message:'HelloVue3!'}}}).mount('#app')</script>适用场景使用构建工具模块化开发TreeShaking优化大型项目开发注意事项•<script>必须添加type="module"•import需使用./和../的相对路径导入本地文件•浏览器必须支持ES模块•import需使用项目根目录或CDN的绝对路径导入文件代码解析data()用于定义组件的响应式数据，必须返回一个对象，该对象包含组件的所有响应式数据状态mount()将Vue实例挂在到HTML元素，是Vue管理视图模板的边界{{}}插值表达式，将JS中的响应式数据动态填充到HTML中cre