From 306ead6f7527a3df92f888781b3d0010fb50da64 Mon Sep 17 00:00:00 2001 From: Jie <51285767+DimplesY@users.noreply.github.com> Date: Mon, 1 Apr 2024 12:09:42 +0800 Subject: [PATCH 01/60] docs: modify link (#2777) --- src/api/sfc-css-features.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/sfc-css-features.md b/src/api/sfc-css-features.md index 44cec993..fbc65b1d 100644 --- a/src/api/sfc-css-features.md +++ b/src/api/sfc-css-features.md @@ -120,7 +120,7 @@ A ` From b786ffd8cb02ade7d40622e292fb13c0f5c133cd Mon Sep 17 00:00:00 2001 From: Wick Date: Wed, 1 May 2024 18:31:43 +0800 Subject: [PATCH 48/60] feat: update isProxy() param type (#2801) --- src/api/reactivity-utilities.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md index 7732864f..f58034e2 100644 --- a/src/api/reactivity-utilities.md +++ b/src/api/reactivity-utilities.md @@ -237,7 +237,7 @@ Checks if an object is a proxy created by [`reactive()`](./reactivity-core#react - **Type** ```ts - function isProxy(value: unknown): boolean + function isProxy(value: any): boolean ``` ## isReactive() {#isreactive} From cbe0bcb212035f2154053b41e2609f65a1ad4a0c Mon Sep 17 00:00:00 2001 From: Rainer Eli Date: Wed, 1 May 2024 04:34:45 -0600 Subject: [PATCH 49/60] Update slots.md (#2806) * Update slots.md Update documentation in order to indicate how to use conditional render of default slot * Update slots.md Fix typo * Update slots.md * Update src/guide/components/slots.md --------- Co-authored-by: Natalia Tepluhina --- src/guide/components/slots.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/components/slots.md b/src/guide/components/slots.md index f85211e9..2070258d 100644 --- a/src/guide/components/slots.md +++ b/src/guide/components/slots.md @@ -302,8 +302,8 @@ Sometimes you want to render something based on whether or not a slot is present You can use the [$slots](/api/component-instance.html#slots) property in combination with a [v-if](/guide/essentials/conditional.html#v-if) to achieve this. -In the example below we define a Card component with two conditional slots: `header` and `footer`. -When the header / footer is present we want to wrap them to provide additional styling: +In the example below we define a Card component with three conditional slots: `header`, `footer` and the `default` one. +When the header / footer / default is present we want to wrap them to provide additional styling: ```vue-html ``` -[Try it in the Playground](https://play.vuejs.org/#eNqFVD1v2zAQ/SsEWyBLIjVoJlcN0AYZ2qEt2oxaaOkkMaZIgqRcGYH/e4+kqFi26wAejvfevfu0XugXrbPtAHRFC1sZrh2x4AZ9X0rea2UceWCmJo1RPbnKcv/w9KtSFnnkIxMfDnotmAN8EVJ4WrDQTgh51wGrwUx+RLrb+6eOW4I/1wGJcJGjewrND1RP1Gpo2CB8+klOL9QqJR1IV+S+lbfVGqXcYW3QL9QiXOToPqPmn1PLCz+9ps5iIQ1vs2erJA75xbNLWqlecwHmp3ZcSVvSFQmIx5gQ6u/34HNmgOvkrzqoNmf8z3b0vpL+MmDBbKGkM+aYacFF+PHPDxjRnsFe1YNA9gXwN1glBl9jpH0dZI1lH/BCtd/CqXDZPtnHEcduU1O+UM/cB35J8XQeLrT+Wu7H7C7ElXKPU0xn5690Ofeab0klmLWfcUDIKmlakEe2N7xB4L0VytksHlhJFwE3yfu6e88mkvWAlDkmnxePwpN9kGkhOd3eieYbGstq48kdV5u856udY04zJevob1BYtxNxlplPkHaxVgb7XpFbPRI8AV6TtWDV5lNENatr3PaKfAgO3NIsMM1z1sGg1ig8G5yKUKhoN7u1GOBY6U6Pp1rTIJPYZXJs/v+JBW871xq2u5g6fNjCTOj+H/sTpqs=) +[Try it in the Playground](https://play.vuejs.org/#eNqVVMtu2zAQ/BWCLZBLIjVoTq4aoA1yaA9t0eaoCy2tJcYUSZCUKyPwv2dJioplOw4C+EDuzM4+ONYT/aZ1tumBLmhhK8O1IxZcr29LyTutjCN3zNRkZVRHLrLcXzz9opRFHvnIxIuDTgvmAG+EFJ4WTnhOCPnQAqvBjHFE2uvbh5Zbgj/XAolwkWN4TM33VI/UalixXvjyo5yeqVVKOpCuyP0ob6utlHL7vUE3U4twkWP4hJq/jiPP4vSSOouNrHiTPVolcclPnl3SSnWaCzC/teNK2pIuSEA8xoRQ/3+GmDM9XKZ41UK1PhF/tIOPlfSPAQtmAyWdMMdMAy7C9/9+wYDnCexU3QtknwH/glWi9z1G2vde1tj2Hi90+yNYhcvmwd4PuHabhvKNeuYu8EuK1rk7M/pLu5+zm5BXyh1uMdnOu3S+95pvSCWYtV9xQcgqaXogj2yu+AqBj1YoZ7NosJLOEq5S9OXtPZtI1gFSppx8engUHs+vVhq9eVhq9ORRrXdpRyseSqfo6SmmnONK6XTw9yis24q448wXSG+0VAb3sSDXeiBoDV6TpWDV+ktENatrdMGCfAoBfL1JYNzzpINJjVFoJ9yKUKho19ul6OFQ6UYPx1rjIpPYeXIc/vXCgjetawzbni0dPnhhJ3T3DMVSruI=) ## Dynamic Slot Names {#dynamic-slot-names} From 43761be9f7edd9aa2ea4c26a8b57da76b4c4c9d6 Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Wed, 1 May 2024 03:35:12 -0700 Subject: [PATCH 50/60] =?UTF-8?q?docs=20(#2528):=20add=20references=20to?= =?UTF-8?q?=20help=20people=20new=20to=20getter=20functions=20i=E2=80=A6?= =?UTF-8?q?=20(#2817)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs (#2528): add references to help people new to getter functions in docs * docs: update links to have more specific sections to guide users to --- src/api/component-instance.md | 2 +- src/api/reactivity-core.md | 2 +- src/glossary/index.md | 2 +- src/guide/essentials/computed.md | 2 +- src/guide/essentials/watchers.md | 5 ++--- src/guide/extras/reactivity-in-depth.md | 2 +- src/guide/reusability/composables.md | 2 +- 7 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/api/component-instance.md b/src/api/component-instance.md index 93f773df..5d11d802 100644 --- a/src/api/component-instance.md +++ b/src/api/component-instance.md @@ -212,7 +212,7 @@ Imperative API for creating watchers. - **Details** - The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a getter function. + The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description). The second argument is the callback function. The callback receives the new value and the old value of the watched source. diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md index 49c2cece..02caac10 100644 --- a/src/api/reactivity-core.md +++ b/src/api/reactivity-core.md @@ -45,7 +45,7 @@ Takes an inner value and returns a reactive and mutable ref object, which has a ## computed() {#computed} -Takes a getter function and returns a readonly reactive [ref](#ref) object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object. +Takes a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) and returns a readonly reactive [ref](#ref) object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object. - **Type** diff --git a/src/glossary/index.md b/src/glossary/index.md index 6125b5f5..4512c621 100644 --- a/src/glossary/index.md +++ b/src/glossary/index.md @@ -275,7 +275,7 @@ In a Vue context, reactivity is used to describe a collection of features. Those There are various different ways that a reactivity system could be implemented. For example, it could be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system. -Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and getter/setter functions for properties. +Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) functions for properties. For more details see: - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html) diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md index ec97209a..60055f06 100644 --- a/src/guide/essentials/computed.md +++ b/src/guide/essentials/computed.md @@ -130,7 +130,7 @@ const publishedBooksMessage = computed(() => { [Try it in the Playground](https://play.vuejs.org/#eNp1kE9Lw0AQxb/KI5dtoTainkoaaREUoZ5EEONhm0ybYLO77J9CCfnuzta0vdjbzr6Zeb95XbIwZroPlMySzJW2MR6OfDB5oZrWaOvRwZIsfbOnCUrdmuCpQo+N1S0ET4pCFarUynnI4GttMT9PjLpCAUq2NIN41bXCkyYxiZ9rrX/cDF/xDYiPQLjDDRbVXqqSHZ5DUw2tg3zP8lK6pvxHe2DtvSasDs6TPTAT8F2ofhzh0hTygm5pc+I1Yb1rXE3VMsKsyDm5JcY/9Y5GY8xzHI+wnIpVw4nTI/10R2rra+S4xSPEJzkBvvNNs310ztK/RDlLLjy1Zic9cQVkJn+R7gIwxJGlMXiWnZEq77orhH3Pq2NH9DjvTfpfSBSbmA==) -Here we have declared a computed property `publishedBooksMessage`. The `computed()` function expects to be passed a getter function, and the returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions. +Here we have declared a computed property `publishedBooksMessage`. The `computed()` function expects to be passed a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description), and the returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions. A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of `publishedBooksMessage` depends on `author.books`, so it will update any bindings that depend on `publishedBooksMessage` when `author.books` changes. diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 592fbbe1..d950548d 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -109,7 +109,7 @@ watch(question, async (newQuestion, oldQuestion) => { ### Watch Source Types {#watch-source-types} -`watch`'s first argument can be different types of reactive "sources": it can be a ref (including computed refs), a reactive object, a getter function, or an array of multiple sources: +`watch`'s first argument can be different types of reactive "sources": it can be a ref (including computed refs), a reactive object, a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description), or an array of multiple sources: ```js const x = ref(0) @@ -272,13 +272,12 @@ watch( - ## Once Watchers {#once-watchers} Watcher's callback will execute whenever the watched source changes. If you want the callback to trigger only once when the source changes, use the `once: true` option.
- + ```js export default { watch: { diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index 33415d80..91cf02ec 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/src/guide/extras/reactivity-in-depth.md @@ -67,7 +67,7 @@ This `whenDepsChange()` function has the following tasks: We can't really track the reading and writing of local variables like in the example. There's just no mechanism for doing that in vanilla JavaScript. What we **can** do though, is intercept the reading and writing of **object properties**. -There are two ways of intercepting property access in JavaScript: [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) and [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Vue 2 used getter / setters exclusively due to browser support limitations. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs. Here's some pseudo-code that illustrates how they work: +There are two ways of intercepting property access in JavaScript: [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) and [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Vue 2 used getter / setters exclusively due to browser support limitations. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs. Here's some pseudo-code that illustrates how they work: ```js{4,9,17,22} function reactive(obj) { diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md index ff147c57..c9c15202 100644 --- a/src/guide/reusability/composables.md +++ b/src/guide/reusability/composables.md @@ -199,7 +199,7 @@ const { data, error } = useFetch(url) url.value = '/new-url' ``` -Or, accept a getter function: +Or, accept a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description): ```js // re-fetch when props.id changes From c86beff0fe3e28033b4e0fe5e2f77aa6e5c59c43 Mon Sep 17 00:00:00 2001 From: DY_XiaoDong Date: Wed, 1 May 2024 18:35:35 +0800 Subject: [PATCH 51/60] refactor: remove unuseful comments (#2833) --- src/guide/best-practices/accessibility.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/guide/best-practices/accessibility.md b/src/guide/best-practices/accessibility.md index f6633c29..479273f2 100644 --- a/src/guide/best-practices/accessibility.md +++ b/src/guide/best-practices/accessibility.md @@ -154,8 +154,6 @@ Labels are typically placed on top or to the left of the form fields: ``` - - Notice how you can include `autocomplete='on'` on the form element and it will apply to all inputs in your form. You can also set different [values for autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for each input. ### Labels {#labels} @@ -167,8 +165,6 @@ Provide labels to describe the purpose of all form control; linking `for` and `i ``` - - If you inspect this element in your Chrome DevTools and open the Accessibility tab inside the Elements tab, you will see how the input gets its name from the label: ![Chrome Developer Tools showing input accessible name from label](./images/AccessibleLabelChromeDevTools.png) @@ -201,8 +197,6 @@ You can also give the input an accessible name with [`aria-label`](https://devel /> ``` - - Feel free to inspect this element in Chrome DevTools to see how the accessible name has changed: ![Chrome Developer Tools showing input accessible name from aria-label](./images/AccessibleARIAlabelDevTools.png) @@ -233,8 +227,6 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi ``` - - ![Chrome Developer Tools showing input accessible name from aria-labelledby](./images/AccessibleARIAlabelledbyDevTools.png) #### `aria-describedby` {#aria-describedby} @@ -265,8 +257,6 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi ``` - - You can see the description by inspecting Chrome DevTools: ![Chrome Developer Tools showing input accessible name from aria-labelledby and description with aria-describedby](./images/AccessibleARIAdescribedby.png) @@ -352,8 +342,6 @@ Alternatively, you can attach the instructions to the input with [`aria-describe ``` - - ### Hiding Content {#hiding-content} Usually it is not recommended to visually hide labels, even if the input has an accessible name. However, if the functionality of the input can be understood with surrounding content, then we can hide the visual label. @@ -386,8 +374,6 @@ We can use CSS to visually hide elements but keep them available for assistive t } ``` - - #### `aria-hidden="true"` {#aria-hidden-true} Adding `aria-hidden="true"` will hide the element from assistive technology but leave it visually available for other users. Do not use it on focusable elements, purely on decorative, duplicated or offscreen content. @@ -414,8 +400,6 @@ You can also use an input to create buttons: ``` - - ### Functional Images {#functional-images} You can use this technique to create functional images. @@ -450,8 +434,6 @@ You can use this technique to create functional images. ``` - - ## Standards {#standards} The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) develops web accessibility standards for the different components: From 288f7bfa3a9334c716ad5cb1a1258bcddc9a1708 Mon Sep 17 00:00:00 2001 From: DY_XiaoDong Date: Wed, 1 May 2024 18:36:36 +0800 Subject: [PATCH 52/60] docs: add docs for v-model `update:*` event (#2839) docs: add docs for v-model update:* event --- src/guide/components/v-model.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 52e42738..47704e77 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -59,6 +59,7 @@ const model = defineModel() This is how you would implement the same child component shown above prior to 3.4: ```vue + + + + diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 7084831a..f50c8bc9 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -11,12 +11,13 @@ import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' // import Banner from './components/Banner.vue' // import TextAd from './components/TextAd.vue' +import VueMasteryBanner from './components/VueMasteryBanner.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - // banner: () => h(Banner), + banner: () => h(VueMasteryBanner), 'sidebar-top': () => h(PreferenceSwitch), 'aside-mid': () => h(SponsorsAside) }) diff --git a/src/public/vuemastery/background-bubbles-vuemastery.svg b/src/public/vuemastery/background-bubbles-vuemastery.svg new file mode 100644 index 00000000..ca24160c --- /dev/null +++ b/src/public/vuemastery/background-bubbles-vuemastery.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/public/vuemastery/lock-vuemastery.svg b/src/public/vuemastery/lock-vuemastery.svg new file mode 100644 index 00000000..cfed57eb --- /dev/null +++ b/src/public/vuemastery/lock-vuemastery.svg @@ -0,0 +1,232 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/public/vuemastery/unlock-vuemastery.svg b/src/public/vuemastery/unlock-vuemastery.svg new file mode 100644 index 00000000..a709ebc0 --- /dev/null +++ b/src/public/vuemastery/unlock-vuemastery.svg @@ -0,0 +1,285 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/public/vuemastery/vuemastery-white.svg b/src/public/vuemastery/vuemastery-white.svg new file mode 100644 index 00000000..bf97acde --- /dev/null +++ b/src/public/vuemastery/vuemastery-white.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From b3eb63cf06979a5ca7d9470a0387e7d27b458758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alois=20Se=C4=8Dk=C3=A1r?= Date: Thu, 2 May 2024 15:28:27 +0200 Subject: [PATCH 57/60] fix: link to getter function definition (#2848) --- src/glossary/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/glossary/index.md b/src/glossary/index.md index 4512c621..8e3a4d66 100644 --- a/src/glossary/index.md +++ b/src/glossary/index.md @@ -275,7 +275,7 @@ In a Vue context, reactivity is used to describe a collection of features. Those There are various different ways that a reactivity system could be implemented. For example, it could be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system. -Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) functions for properties. +Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) functions for properties. For more details see: - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html) From 3044a81a605414b1506ccf58e205c85575ea4df8 Mon Sep 17 00:00:00 2001 From: DY_XiaoDong Date: Fri, 3 May 2024 15:34:05 +0800 Subject: [PATCH 58/60] docs: add warning to custom-directives (#2850) * docs: add warning to custom-directives * Update src/guide/reusability/custom-directives.md --------- Co-authored-by: Natalia Tepluhina --- src/guide/reusability/custom-directives.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md index bbc5a7dc..536fff32 100644 --- a/src/guide/reusability/custom-directives.md +++ b/src/guide/reusability/custom-directives.md @@ -210,6 +210,11 @@ app.directive('demo', (el, binding) => { ## Usage on Components {#usage-on-components} +:::warning Not recommended +Using custom directives on components is not recommended, unexpected behaviour may occur when a component has multiple root nodes. +::: + + When used on components, custom directives will always apply to a component's root node, similar to [Fallthrough Attributes](/guide/components/attrs). ```vue-html @@ -224,4 +229,4 @@ When used on components, custom directives will always apply to a component's ro
``` -Note that components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be thrown. Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. In general, it is **not** recommended to use custom directives on components. +Note that components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be thrown. Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. From a95e91000f166d5e2e63d6692411546982bd440e Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 3 May 2024 10:01:47 -0700 Subject: [PATCH 59/60] bring back the uwu logo --- .vitepress/config.ts | 8 ++++++++ .vitepress/inlined-scripts/uwu.js | 3 +++ .vitepress/theme/components/Home.vue | 20 ++++++++++++++++++++ src/public/logo-uwu.png | Bin 0 -> 93369 bytes 4 files changed, 31 insertions(+) create mode 100644 .vitepress/inlined-scripts/uwu.js create mode 100644 src/public/logo-uwu.png diff --git a/.vitepress/config.ts b/.vitepress/config.ts index b491dfdb..bc6b2af2 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -605,6 +605,14 @@ export default defineConfigWithTheme({ 'utf-8' ) ], + [ + 'script', + {}, + fs.readFileSync( + path.resolve(__dirname, './inlined-scripts/uwu.js'), + 'utf-8' + ) + ], [ 'script', { diff --git a/.vitepress/inlined-scripts/uwu.js b/.vitepress/inlined-scripts/uwu.js new file mode 100644 index 00000000..5b25107e --- /dev/null +++ b/.vitepress/inlined-scripts/uwu.js @@ -0,0 +1,3 @@ +if (location.search.includes('?uwu')) { + document.documentElement.classList.add('uwu') +} diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue index 2debf8e8..2ab0b880 100644 --- a/.vitepress/theme/components/Home.vue +++ b/.vitepress/theme/components/Home.vue @@ -11,6 +11,7 @@ onMounted(load)