Vue-路由机制路由（Router）就是根据不同的 URL 地址展示不同的内容或页面 单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验 路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面 安装依赖正如我们之前所学的那样，vue是一个渐进式框架，所以在使用路由功能之前，我们需要导入路由所需依赖 1npm install vue-router

Vue-组件前文有关于组件，我们提到了SFC（Single File Component）单文件组件 组合在components（组件库）中，建立三个组件（.vue文件） Header12345678910111213<script setup></script><template> <div> 欢迎：xxx <a href=&quo

Caddy安装 — Caddy v2中文文档 (dengxiaolong.com) 与Nginx一样，Caddy也可以实现域名反代 我们通过使用CaddyFile的方式，来实现域名反代 Caddyfile 快速入门 — Caddy v2中文文档 (dengxiaolong.com) Caddy的配置文件： /etc/caddy/caddyfile 12345678

Vue-生命周期生命周期钩子 | Vue.js (vuejs.org) 钩子函数有四组（八个）钩子函数，分别在vue的生命周期中被执行 beforeCreate|created beforeMount|mounted beforeUpdate|updated breforeUnmount|unmounted 在组合式API的生命周期函数中，钩子函数会更改 组合式 API：生命周期钩子 |

Vue-数据监听从vue框架中导入watch方法，可使用watch方法实现对响应式数据的监听 12345678910111213141516171819<script setup>import { reactive, ref, watch } from "vue";let fullname = ref("");let firs

Vue-计算属性从vue框架中导入方法computed，其修饰一个响应式数据的属性 compute中文释义：计算 使用computed修饰一个函数，其返回值为该属性的值，该属性为响应式属性，该属性被称之为计算属性 通过计算属性获得数据，每次使用时，对比上次使用时的数据变化，如果改变就重新计算，如果没有改变则直接使用上一次的结果 当结果需要大量且复杂的运算时，就需要用到computed的计算属性 我

Vue-双向绑定我们之前学过有关vue的命令，都是单向绑定：当响应式数据发生变化时，更新Dom树 单向绑定时，用户的操作如果造成页面内容的改变也不会影响响应式数据 双向绑定：页面上的数据由于用户的操作造成了改变，也会同步修改对应的响应式数据 双向绑定一般都用于表单标签 双向绑定也被称呼为收集表单信息的命令 v-model:value=”数据” 但vue3中强制缺省了value=

Vue-条件渲染和列表渲染条件渲染v-ifv-if=”表达式/数据” 使用v-if属性来选择是否渲染该元素到Dom树中 当数据为true，则该元素被渲染到Dom树中 v-else使用v-else对与之对应的v-if取反 v-show使用v-show实现与v-if相同的效果 与v-if不同的是，即使v-show的值为false，也仍然将该元素渲染到Dom树中 通过css样式：

响应式基础在vue中，让一个普通数据转换成响应式数据的两种方式： ref函数：更适合单个变量 reactive函数：更适合对象 响应式关键字ref经过ref修饰的变量在script中需要通过.value获取操作其值 而在template中不需要.value，可以直接操作变量的值 响应式关键字reactive经过reactive修饰的对象，在操作其属性的值时，都直接使用对象名.属性名的方式即

Vue-视图渲染技术Vue是一种基于HTML的模板语法，使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上 Vue会将模板编译成高度优化的JavaScript，将.vue文件编译出html+css+js的过程就是渲染 结合响应式系统，当应用状态变更时，Vue能够智能地推断出需要重新渲染的组件的最少数量，并应用最少的Dom操作 个人理解就是将变量给到元素的文本，变量给到元素的属性 插值表达式