From 1fc2e31cf265b2d345b071509d6f57d22f8bb82b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=83=A1?= <515696146@qq.com> Date: Fri, 14 Apr 2023 16:29:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=93=8E=E5=93=9F=E4=BD=A0=E5=B9=B2?= =?UTF-8?q?=E5=98=9B~~=E6=95=A2=E9=BB=91=E6=88=91=E5=AE=B6=E5=93=A5?= =?UTF-8?q?=E5=93=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...37\345\221\275\345\221\250\346\234\237.md" | 193 ++++++++++++ ...\214\347\273\221\345\256\232HTML-class.md" | 272 +++++++++++++++++ ...27\350\241\250\346\270\262\346\237\223.md" | 281 ++++++++++++++++++ ...13\344\273\266\345\244\204\347\220\206.md" | 271 +++++++++++++++++ 4 files changed, 1017 insertions(+) create mode 100644 "05\345\210\230\350\203\241/230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200\345\222\214\347\224\237\345\221\275\345\221\250\346\234\237.md" create mode 100644 "05\345\210\230\350\203\241/230404-Vue\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\273\221\345\256\232HTML-class.md" create mode 100644 "05\345\210\230\350\203\241/230406-Vue\347\273\221\345\256\232\345\206\205\350\201\224\346\240\267\345\274\217\345\222\214\346\235\241\344\273\266\343\200\201\345\210\227\350\241\250\346\270\262\346\237\223.md" create mode 100644 "05\345\210\230\350\203\241/230407-Vue\345\210\227\350\241\250\346\270\262\346\237\223\345\222\214\344\272\213\344\273\266\345\244\204\347\220\206.md" diff --git "a/05\345\210\230\350\203\241/230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200\345\222\214\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/05\345\210\230\350\203\241/230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200\345\222\214\347\224\237\345\221\275\345\221\250\346\234\237.md" new file mode 100644 index 0000000..15440b7 --- /dev/null +++ "b/05\345\210\230\350\203\241/230403-Vue\345\223\215\345\272\224\345\274\217\345\237\272\347\241\200\345\222\214\347\224\237\345\221\275\345\221\250\346\234\237.md" @@ -0,0 +1,193 @@ +Vue 响应式基础和生命周期 +=== +一 .声明响应式状态​: +--- + + **选用选项式 API 时,会用 data 选项来声明组件的响应式状态**。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数,并将函数返回的对象用响应式系统进行包装 + > 此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上 + ```js + export default { + data() { + return { + count: 1 + } + }, + // `mounted` 是生命周期钩子,之后我们会讲到 + mounted() { + // `this` 指向当前组件实例 + console.log(this.count) // => 1 + + // 数据属性也可以被更改 + this.count = 2 + } + } + ``` + + > 这些实例上的属性仅在实例首次创建时被添加,因此你需要确保它们都出现在 data 函数返回的对象上。若所需的值还未准备好,在必要时也可以使用 null、undefined 或者其他一些值占位。 + + > 虽然也可以不在 data 上定义,直接向组件实例添加新属性,但这个属性将无法触发响应式更新 + +##### 注意 :Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。因此,你应该避免在顶层 data 上使用任何以这些字符作前缀的属性 + +### 响应式代理 vs. 原始值​: ++ 在 Vue 3 中,数据是基于 JavaScript Proxy(代理) 实现响应式的。使用过 Vue 2 的用户可能需要注意下面这样的边界情况: + + ```js + export default { + data() { + return { + someObject: {} + } + }, + mounted() { + const newObject = {} + this.someObject = newObject + + console.log(newObject === this.someObject) // false + } + } + ``` + > 当你在赋值后再访问 this.someObject,此值已经是原来的 newObject 的一个响应式代理。与 Vue 2 不同的是,这里原始的 newObject 不会变为响应式:请确保始终通过 this 来访问响应式状态。 + +二 .声明方法​: +--- ++ 要为组件添加方法,我们需要用到 methods 选项。它应该是一个包含所有方法的对象: + ```js + export default { + data() { + return { + count: 0 + } + }, + methods: { + increment() { + this.count++ + } + }, + mounted() { + // 在其他方法或是生命周期中也可以调用方法 + this.increment() + } + } + ``` + > Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数,因为箭头函数没有自己的 this 上下文。 + + ```js + export default { + methods: { + increment: () => { + // 反例:无法访问此处的 `this`! + } + } + } + ``` + > 和组件实例上的其他属性一样,方法也可以在模板上被访问。在模板中它们常常被用作事件监听器: + + ```js + + ``` + + > 在上面的例子中,increment 方法会在 ` +``` +```js +

Vue is awesome!

+

Oh no 😢

+``` +> 一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别 + +### 3. v-else-if​ +> 顾名思义,v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用: +```js +
+ A +
+
+ B +
+
+ C +
+
+ Not A/B/C +
+``` +> 和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。 + +### 4. `