【简单的Vue代码】
【setup函数】
特点：
1.这是vue3特有的， 也是vue3代码的入口/起点
2.在标签中用到的数据或函数， 需要在 setup 函数中声明并返回
3. setup 中的 this 不指向 Vue 实例， 并且在 setup 中也不会用到 this
【声明式渲染】
语法为“ {{ 表达式 }} ”
又叫胡子语法， 插值， 表达式
作用： 把在setup函数中声明并返回的结果， 根据表达式展示/渲染到双标签中
结果为：
【数据响应式】
数据响应式， 就是“ 数据变了，视图跟着变 ”
数据： 在setup函数中， 返回的元素
视图：HTML标签
也就是说， 数据变了， 视图中用到这些数据的地方也会跟着变
【响应式函数 reactive】
setup 中默认返回数据不具有响应式特性， 因此需要使用 reactive 赋予数据响应式特性
作用： 用来定义一个响应式 对象
【响应式函数ref】
作用： 用来定义一个响应式数据，数据既可以是基本类型（数字， 字符串，布尔等）， 也可也是引用类型（数组。 对象等）
这意味着ref的运用面比reactive广
【脚手架】
Vue有两种开发模式， 传统开发模式基于html文件开发Vue， 使用<script src="vue.js"></script>
• 优点：简单、上手快
• 缺点：功能单一、开发体验差
而 工程化开发模式， 是 在 构建工具 (Vite / Webpack )环境下开发Vue, 这是最推荐的、也是企业采用的方式
• 优点： 功能全面， 开发体验好
• 缺点： 目录结构复杂， 理解难度提升
Vue脚手架则是一个写Vue代码的环境(基础), 拿来就用, 零配置
【创建流程】
1.选定代码存放位置
2.在选定目录处打开命令行窗口， 执行创建命令npm create vue@latest
3.进入项目根目录
4.安装项目依赖
【认识脚手架目录及文件】
【总结】
脚手架项目中，几个主要的文件及作用？
1、node_modules⸺第三方模块包
2、package.json⸺项目管理文件
3、 main.js —— 整个项目打包的入口
4、 App.vue —— Vue代码的入口(根组件 )
5、 index.html —— 项目入口网页
今后Vue代码写哪个目录下？
src 目录, src下的所有代码会被 vite 打包 成 css/js/img，
然后， 交给 index.html ，最终通过浏览器呈现在用户眼前
【分析3个入口文件的关系】
main.js , App.vue, index.html是三大入口文件
App.vue(Vue 入口) => main.js(项目打包入口) => index.html(浏览器入口)
main.js 是 Vue 代码通向网页代码的桥梁 , 非常关键
【Vue单文件】
1. vue推荐采用 .vue 的文件来开发项目
2. 一个vue文件通常有3部分组成， script(JS) + template(HTML) + style(CSS)
3. 一个vue文件是 独立的模块，作用域互不影响，因此不用担心 JS 变量名、CSS 选择器名称冲突
4. style配合 scoped 属性，保证样式只针对当前 template 内的标签生效
5. vue文件会被 vite 打包成 js 、 css 等，最终交给index.html 通过浏览器呈现效果
【工程化环境下， 渲染Hello World】
这个写法很麻烦， 所以可以进行简化， 进行setup简写
<script setup> 是 Vue 3 的一种更简洁的 Composition API 语法糖， 不必使用默认导出， 也不需要使用return返回， 会自动暴露给模板
【工程化环境下，写响应式代码】
【指令】
Vue 提供的带有 v- 前缀的特殊标签属性, 用来增强标签的能力
vue3 中的指令按照不同的用途可以分为如下 6 大类：
• 内容渲染指令（v-html、v-text）， 类似于插值，把表达式结果渲染到双标签中
• 属性绑定指令 （v-bind）， 把表达式的值与标签的属性进行动态绑定
• 事件绑定指令（v-on）， 用来与标签进行事件绑定， 处理用户交互
• 条件渲染指令（v-show、v-if、v-else、v-else-if）， 根据表达式是true还是false， 决定标签是否展示
• 列表渲染指令（v-for）， 基于数组循环， 生成一套列表
• 双向绑定指令（v-model）数据和视图相互影响
指令是 vue 开发中最基础、最常用、最简单的知识点
【内容渲染指令】
• v-html
语法： <p v-html="表达式"></p> ，意思是将 表达式的 值渲染到 p 标签中
该语法会覆盖 p 标签原有内容 ， 且能够解析HTML标签的样式
• v-text
语法： <p v-text="表达式 "></p> ，意思是将 表达式的 值渲染到 p 标签中
该语法，会覆盖 p 标签原有内容， 不会解析HTML标签的样式
区别：
【属性绑定指令】
把 表达式的结果 与 标签的属性 动态绑定
语法 ：v-bind:属性名="表达式"
可简写成 : 属性名="表达式"
插值不可用于标签属性的渲染， 只能用于双标签内容的展示， 所以需要用到属性绑定指令
【事件绑定指令】
给元素绑定事件
语法（3种）：
v-on：事件名="三种写法"
1. < button v-on: 事件名 = " 内联语句 " > 按钮 </ button >
2. < button v-on: 事件名 = " 处理函数 " > 按钮 </ button >
3. < button v-on: 事件名 = " 处理函数 ( 实参列表 )" > 按钮 </ button
【条件渲染指令】
根据表达式是true还是false， 决定标签是否展示
语法： v-show/v-if = "布尔表达式" , 表达式值为 true 显示， false 隐藏
如果表达式为true， 则对应的盒子都显示， 否则都隐藏
区别：控制元素显示或隐藏的原理不同
1.v-show : 通过控制元素css属性的display来控制元素显示或隐藏
2.v-if： 通过创建和插入元素或移除DOM元素来控制元素显示或隐藏
【列表渲染指令】
基于数组进行 v-for 列表渲染
语法： (item, index) in 目标结构
• item: 值变量， 数组中的每⼀项
• index: 下标变量， 每一项的索引，不需要可以省略
• 目标结构: 被遍历的 数组/对象/数字
此外， 给v-for添加key属性， 可以提高vue在更新列表时的更新性能
语法： :key="唯一不重复的值"
原理： vue内部会尽可能地复用DOM值， 做最小的更新， 当添加了key后， 用key来标明当前元素的特性是否发生了变化， 如果key不变， vue直接复用之前的DOM
key首先用id， 其次用下标
【双向绑定指令】
所谓双向绑定就是：
数据变了 -> 视图跟着变
视图变了 -> 数据跟着变
其作用在 表单元素（input、select、radio、checkbox）上，实现数据和标签value属性的双向绑定, 从而可以快速 获取 或 设置 表单元素的值
语法 ： v-model="响应式数据 "
在调试工具修改数据， 可以实时反映到视图上， 反之同理
