学习目录 npm run dev
1.什么是 Vue？(vue的环境与运行）
2.vue的插值
3.vue的微指令
4.vue的样式
5.vue的表单
什么是 Vue？
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
单文件组件
我让 chatgpt 帮我生成了一串单文件组件可以看出它由三部分组成：
功能：可以看出
<template></template>定义组件的 HTML 结构。
功能：可以看出
<script>部分lang="ts"：表明使用 TypeScript，可以增加类型安全性
功能：可以看出
<style scoped>部分：使用css代码编辑
组合式APi
通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 > script setup> 搭配使用。 这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。 比如，script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
setup选项
setup 的写法和执行时机
1.写法：
2.执行时机
可以看出setup中的代码是最先运行的
3.在模板中使用setup中定义的变量和函数
通过return这个方法把变量传递给template
4.setup选项的总结：
reactive和ref函数
1.reactive（）的作用：
接受对象型数据的传入并返回一个响应式的数据（可以通过交互影响视图的变化）
2. reactive（）的使用步骤：
从vue包中导入reactive函数
在setup中执行reactive函数
3. 示例（计时器）：
4.ref（）的作用
接受简单数据类型和对象型数据的传入并返回一个响应式的数据（可以通过交互影响视图的变化）
5. ref（）的使用步骤：
从vue包中导入ref函数
在setup中执行ref函数
6. 示例（计时器）：
reactive和ref函数函数总结
computed计算属性函数
1.computed函数的作用
2.computed函数的核心步骤
导入computed函数
执行函数在回调参数中return基于响应式数据做计算的值，用于变量接收
3.示例
computed函数总结
watch函数
1.watch函数监听单个数据的变化--作用
侦听一个数据的变化，数据变化时回调函数的两个额外参数：
1.immediate（立即执行）
2.deep（深度监听）
2.watch函数监听单个数据的变化--核心步骤
1.导入watch参数
2.执行watch函数传入的要侦听的响应式数据（ref对象）和回调函数
3.watch函数监听单个数据的变化--实例
4.watch函数监听多个数据的变化--作用
侦听多个数据的变化，无论是哪一个数据变化时都要回调函数的两个额外参数：
1.immediate（立即执行）
2.deep（深度监听）
5.watch函数监听多个数据的变化--核心步骤
1.导入watch参数
2.执行watch函数传入的要侦听的响应式数据（ref对象）和回调函数
6.watch函数监听多个数据的变化--实例
7.immediate立即执行参数 -- 说明
在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调
8.immediate立即执行参数 -- 实例
7.deep深度监听（对象）参数 -- 说明
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行
8.deep深度监听（对象）参数 -- 分别一个对象的元素
9.deep深度监听（对象）参数 -- 总结
插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)
Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式
v指令
Vue指令是Vue.js的一项核心功能，他们可以在HTML模板中以-v开头的特殊属性形式使用，用于将响应式数据绑定到dom元素上，或在dom元素上进行一些操作为指令是带有前缀微杠的特殊HTML属性，它赋予了HTML额外的功能与传统的js方法。相比使用voe创造响应式页面更容要容易的多，并且使用的代码更少，下面是常用的指令
v-text指令 用于输出纯文本内容，v-html指令 用于输出网页内容
v-model指令 用于双向选择
v-bind指令 把vue实例的数据绑定到html元素的属性上
1.v-bind指令作用于文本空间
2.v-bind指令作用于图片
3.v-bind指令作用于样式
v-if指令 判断是否为true然后决定是否执行代码
v-on指令 监听dom事件
vue的样式
数据绑定的一个常见需求场景是操作元素的CSS class 列表和内联样式。我们可以使用v-bind将他们和动态的字符串绑定。除了字符串外，表达式的值也可以是对象和数组。
可以看到，ts向class传递了一个参数，决定了该class是否在该盒子发挥作用。
我们可以在对象中写一个或多个字段来操作一个或多个class。此外，：class指令也可以和一般的class指令共存。
绑定的对象并非是一定要写成内联字样的模式，亦可以直接绑定一个对象或者绑定一个返回对象的计算属性
绑定数组
可以给：class绑定一个数组来渲染多个css class 就是包含多个样式的数组， 这些对象会合并后渲染到同一元素上。
vue的表单
vue表单的应用是指v-model指令在表单《input》《text area》 及《select》等元素上创建双向数据绑定。
v-model会根据控件类型自动选取正确的方法来更新元素
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为属性并将change作为事件。
