为什么选择Vue框架
Vue是什么？
渐进式 JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架
为什么要学习Vue
1 Vue是目前前端最火的框架之一
2 Vue是目前企业技术栈中要求的知识点
3 Vue可以提升开发体验
4 ...
Vue简介
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
官网文档地址：https://cn.vuejs.org/
渐进式框架
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上 构建的东西可能在形式和规模上会有很大的不同。考虑到这一点， Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：
1、无需构建步骤，渐进式增强静态的 HTML
2、在任何页面中作为 Web Components 嵌入
3、单页应用 (SPA)
4、全栈 / 服务端渲染 (SSR)
5、Jamstack / 静态站点生成 (SSG)
6、开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
Vue版本
目前，在开发中，Vue有两个大版本可以选择 Vue2 和 Vue3 ，老项目一 般都是 Vue2 的，而新项目一般都选择 Vue3 开发 我们本套课程讲解版本为 Vue3 ，因为 Vue3 涵盖了 Vue2 的知识体系， 当然 Vue3 也增加了很多新特性
Vue API 风格
Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API 大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格
选项式 API (Options API)
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data 、 methods 和 mounted 。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例
<script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { console.log(`The initial count is ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
组合式 API (Composition API)
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。
<script setup> import { ref, onMounted } from 'vue' const count = ref(0) function increment() { count.value++ } onMounted(() => { console.log(`The initial count is ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层 系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。
在生产项目中
当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API
当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件
Vue开发前的准备
构建工具让我们能使用 Vue 单文件组件 (SFC)。Vue 官方的构建流程是基于 Vite 的，一个现代、轻量、极速的构建工具
创建Vue项目
npm init vue@latest
这一指令将会安装并执行 create-vue ，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示
✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No 。 在项目被创建后，通过以下步骤安装依赖并启动开发服务器
cd <your-project-name> npm install npm run dev
开发环境
推荐的 IDE 配置是 Visual Studio Code + Volar 扩展
实时效果反馈
1. 创建Vue项目的命令是什么？：
A npm create-vue project
B npm cerate vue project
C npm create-react project
D npm init vue@latest
Vue项目目录结构
我们通过Vue命令行工具 npm init vue@latest 创建项目，会出现很多文件及文件夹
.vscode --- VSCode工具的配置文件夹 node_modules --- Vue项目的运行依赖文件夹 public --- 资源文件夹（浏览器图标） src --- 源码文件夹 .gitignore --- git忽略文件 index.html --- 入口HTML文件 package.json --- 信息描述文件 README.md --- 注释文件 vite.config.js --- Vue配置文件
模板语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
<template> <p>{{ msg }}</p> </template> <script> export default { data(){ return{ msg:"神奇的魔法" } } } </script>
使用 JavaScript 表达式
每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面
<template> <p>{{ number + 1 }}</p> <p>{{ ok ? 'YES' : 'NO' }}</p> <p>{{ message.split('').reverse().join('') }}</p> </template> <script> export default { data(){ return{ number:10, ok:true, message:"大家好" } } } </script>
无效
<!-- 这是一个语句，而非表达式 --> {{ var a = 1 }} <!-- 条件控制也不支持，请使用三元表达式 --> {{ if (ok) { return message } }}
原始 HTML
双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令
<template> <p>纯文本: {{ rawHtml }}</p> <p>属性: <span v-html="rawHtml"></span> </p> </template> <script> export default { data(){ return{ rawHtml:"<a href='https://itxiaotong.com'>童小纯</a>" } } } </script>
实时效果反馈
1. 下列那个语句可以作为模板语法中的语句：
A {{ var a = 1 }}
B {{ if (ok) { return message } }}
C {{ message.split('').reverse().join('') }}
D {{ if (ok) {} else {} }}
属性绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，
应该使用 v-bind 指令
<template> <div v-bind:id="dynamicId" v-bind:class="dynamicClass">AppID</div> </template> <script> export default { data(){ return{ dynamicId:"appid", dynamicClass:"appclass" } } } </script> <style> .appclass{ color: red; font-size: 20px; } </style>
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined ，那么该 attribute 将会从渲染的元素上移除
简写
因为 v-bind 非常常用，我们提供了特定的简写语法
<div :id="dynamicId" :class="dynamicClass"> </div>
布尔型 Attribute
布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上, disabled 就是最常见的例子之一
<template> <button :disabled="isButtonDisabled">Button</button> </template> <script> export default { data(){ return{ isButtonDisabled:true } } } </script>
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象
<template> <div v-bind="objectOfAttrs">童小纯</div> </template> <script> export default { data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } } } </script>
