2012年开始工作，全栈开发老兵，目前已是一个老师，分享这么多年的心得体会

【代码】创建vue3项目的三种方式。

在 Vue 3 中使用组合式 API 时，导入外部 CSS 和 JavaScript 文件的方式可以略有不同于传统的选项式 API。

打包部署到nginx。

注意：布局类似于bootstrap，只给框架，不添加样式，背景色、高度、宽度可以自定义控制。官网如下布局，复制出来的代码是没有颜色的。

SCSS 语法使用.scss文件扩展名。除了极少部分的例外， 它是 CSS 的超集，也就是说 所有有效的 CSS 也同样都是有效的 SCSS。由于其与 CSS 的相似性，它是最容易上手的语法， 也是最流行的语法。

Vue 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例：下面是“单向数据流”这一概念的简单图示：然而，当我们有对于情景 1，一个可行的办法是将共享状态“提升”到共同的祖先组件上去，再通过 props 传递下来。然而在深层次的组件树结构中这么做的话，很快就会使得代码变得繁琐冗长。。对于情景 2，我们经常发现自己会直接通过模板引用获取父/子实例，或者通过触发的事件尝试改变和同步多个状态的副本。但这些模式的健壮性都不甚理想，很容易就会导致代码难以维护。

把图片转换成DataUrl（base64），就可以存储图片了。localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。

History Api就是window对象通过history对象提供的一个属性和方法的集合，允许开发者基于js操作用户浏览历史的前进、后退、刷新等浏览历史操作，同时提供了对浏览记录栈的操作。

自定义指令是通过方法注册的。指令的生命周期钩子函数与 Vue 的生命周期钩子类似，常用的钩子函数有createdmountedupdated和unmounted。// 注册自定义指令// 当指令绑定到元素上时调用// 设置颜色},// 当指令与元素解绑时调用// 清理});一旦自定义指令注册完成，就可以在组件模板中使用它了。-- 在 Vue 组件模板中使用自定义指令 -->

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。beforeCreate可以简单的理解为在数据初始化的之前被调用，这时候data和methods尚未没有数据。简单点来说，钩子函数就是你创建的Vue在初始化、更新数据、销毁时会被自动调用的函数。通过v-if控制组件显示、隐藏，来实现挂载、卸载。

Vue3 组件

这节我们为大家介绍 Vue 表单上的应用。我们可以用 v-model 指令在表单 、 及 等元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

11、使用计算属性做一个计算器:在两个文本框输入两个数字，结果。16、通过计算属性做一个购物车的商品数量改变，总价改变的功能。10、使用计算属性做一个文本框，输入英文转换为大写。7、v-for循环如下数据，并且放到表格中。8、v-for加key和不加key的区别。13、使用监听器判断12题中的登录、密码。3、reactive和ref有什么区别。6、v-if和v-show有什么区别。12、做一个登录页面，放在页面正中间。9、第七题中添加全选、反选功能。14、计算属性和监听器的区别。5、vue中指令有哪些。

例如，如果 active 的值为 true，class 列表将变为"static active text-danger"。class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。此外，:class 指令也可以与普通的 class 属性共存。v-bind:class 可以简写为 :class。

计算属性：适合用于计算一个新的派生值，基于一个或多个响应式数据，具有缓存机制。侦听器：适合用于监听特定数据的变化，并在变化时执行自定义的操作，不具有缓存。使用组合式 API 可以更清晰地组织和管理 Vue 组件的逻辑，通过 computed 和 watch 函数，能够更灵活地处理数据的派生计算和变化监听需求。

Vue3 监听属性 watch，我们可以通过 watch 来响应数据的变化。定义方式和计算属性类似。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。模型模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。视图就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。视图模型视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。

计算属性：用法上和方法一样，可以看做是方法的特殊用法。当数据变化的时候会被触发，如果不变化即使多次调用，也不会执行。但是方法就不一样了，每次调用都会执行一遍。适用场景：适合做计算的场景，比如统计购物车的总价：当选择的商品数量变化，计算属性的方法被调用，自动计算总价。计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。通常情况下，我们需要使用一个方法来调用 JavaScript 方法。v-on 可以接收一个定义的方法来调用。v-on 指令可以缩写为 @ 符号。

template模板在网页上是不会展示的。

reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制。为此，Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式ref和响应式对象的属性类似，ref 的 .value 属性也是响应式的。同时，当值为对象类型时，会用 reactive() 自动转换它的 .value。// 这是响应式的替换// 该函数接收一个 ref// 需要通过 .value 取值// 但它会保持响应性// 仍然是响应式的。

虽然在 Vue 中不提倡我们直接操作 DOM，毕竟 Vue 的理念是以数据驱动视图。但是在实际情况中，我们有很多需求都是需要直接操作 DOM 节点的，这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点：ref 属性。ref 属性是 Vue2 和 Vue3 中都有的，但是使用方式却不大一样，这也导致了很多从 Vue2 转到 Vue3 的小伙伴感到有些困惑。

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 元素上，并在上面使用 v-if。这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。v-if和v-else-if、v-else中间不能有其他标签被隔开！v-show是控制元素：display: none;v-if：控制元素不显示，并且标签也不存在。

官网解释：当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。有：key属性时，状态根据key的属性值绑定到了相应的数组元素。

Vue3 教程