-
-
-
-
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index dd8984d..10e09d6 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -5,8 +5,6 @@
@touchstart="onTouchStart"
@touchend="onTouchEnd"
>
-
-
@@ -52,7 +50,6 @@ import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import BuySellAds from '@theme/components/BuySellAds.vue'
import CarbonAds from '@theme/components/CarbonAds.vue'
-import BannerTop from '@theme/components/BannerTop.vue'
import { resolveSidebarItems } from '../util'
export default {
@@ -63,15 +60,15 @@ export default {
Page,
Sidebar,
Navbar,
- BannerTop,
BuySellAds,
CarbonAds
},
data() {
return {
- showTopBanner: false,
- isSidebarOpen: false
+ isSidebarOpen: false,
+ isMenuFixed: false,
+ menuPosition: 0
}
},
@@ -115,8 +112,7 @@ export default {
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
- 'no-sidebar': !this.shouldShowSidebar,
- 'has-top-banner': this.showTopBanner
+ 'no-sidebar': !this.shouldShowSidebar
},
userPageClass
]
@@ -131,8 +127,6 @@ export default {
this.$router.afterEach(() => {
this.isSidebarOpen = false
})
-
- this.showTopBanner = false
},
methods: {
diff --git a/src/api/application-api.md b/src/api/application-api.md
index 2dd0d7b..f18b560 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -96,7 +96,8 @@ app.directive('my-directive', {
mounted() {},
// called before the containing component's VNode is updated
beforeUpdate() {},
- // called after the containing component's VNode and the VNodes of its children // have updated
+ // called after the containing component's VNode and the VNodes of its
+ // children have updated
updated() {},
// called before the bound element's parent component is unmounted
beforeUnmount() {},
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index 31b7c03..0f1e4bb 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -20,7 +20,7 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
- **Props:**
- - `is` - `string | Component`
+ - `is` - `string | Component | VNode`
- **Usage:**
@@ -41,6 +41,8 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
```
+- **Usage with built-in components:**
+
The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is`, but you must register them if you want to pass them by name. For example:
```js
@@ -62,15 +64,15 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
Registration is not required if you pass the component itself to `is` rather than its name.
-- **key:**
+- **Usage with VNodes:**
-When using and passing vnode of the same type, you need to provide keys:
-
-```html
-
-```
+ In advanced use cases, it can sometimes be useful to render an existing VNode via a template. Using a `` makes this possible, but it should be seen as an escape hatch, used to avoid rewriting the entire template as a `render` function.
+
+ ```html
+
+ ```
-Otherwise, you are passing two compiled vnodes of the same type to the renderer. Because they are compiled as completely static, they will not be updated at all.
+ A caveat of mixing VNodes and templates in this way is that you need to provide a suitable `key` attribute. The VNode will be considered static, so any updates will be ignored unless the `key` changes. The `key` can be on the VNode or the `` tag, but either way it must change every time you want the VNode to re-render. This caveat doesn't apply if the nodes have different types, e.g. changing a `span` to a `div`.
- **See also:** [Dynamic Components](../guide/component-dynamic-async.html)
diff --git a/src/api/directives.md b/src/api/directives.md
index b58ee87..02cc8a0 100644
--- a/src/api/directives.md
+++ b/src/api/directives.md
@@ -35,7 +35,7 @@
- **Example:**
```html
-
+
```
- **See also:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#raw-html)
diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md
index cfb7b2b..cf73d93 100644
--- a/src/api/sfc-script-setup.md
+++ b/src/api/sfc-script-setup.md
@@ -131,6 +131,31 @@ import * as Form from './form-components'
```
+## Using Custom Directives
+
+Globally registered custom directives just work as expected, and local ones can be used directly in the template, much like we explained above for components.
+
+But there's one restriction to be aware of: You must name local custom directives according to the following schema: `vNameOfDirective` in order for them to be directly usable in the template.
+
+```html
+
+
+
This is a Heading
+
+```
+```html
+
+```
+
## `defineProps` and `defineEmits`
To declare `props` and `emits` in `
```
+:::warning
+`render` function is not supported in this scenario. Please use one normal `
```
### `entry-client.js`
-The client entry creates the application using the root component factory and mounts it to the DOM:
+The client entry creates the application using the `App.vue` component and mounts it to the DOM:
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
// client-specific bootstrapping logic...
-const { app } = createApp({
- // here we can pass additional arguments to app factory
-})
+const app = createSSRApp(App)
// this assumes App.vue template root element has `id="app"`
app.mount('#app')
@@ -122,12 +143,11 @@ app.mount('#app')
The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here.
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
-export default function() {
- const { app } = createApp({
- /*...*/
- })
+export default function () {
+ const app = createSSRApp(App)
return {
app
diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md
index eb98a33..ee20b1c 100644
--- a/src/guide/transitions-overview.md
+++ b/src/guide/transitions-overview.md
@@ -176,7 +176,7 @@ Easing can also convey the quality of material being animated. Take this pen for
-You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
+You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting the cubic-bezier function's parameters, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance.
diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 8038704..c8363a0 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -88,7 +88,7 @@ Or, if you want to combine TypeScript with a [JSX `render` function](/guide/rend
For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-component.html) (SFCs), get the awesome [Volar extension](https://github.com/johnsoncodehk/volar), which provides TypeScript inference inside SFCs and many other great features.
-[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
+[WebStorm](https://www.jetbrains.com/webstorm/) provides out of the box support for both TypeScript and Vue. Other JetBrains IDEs also support them, either out of the box or via [this free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js).
## Defining Vue Components
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index f0ed015..e337e82 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -1485,7 +1485,7 @@ Prefer class selectors over element selectors in `scoped` styles, because large
::: details Detailed Explanation
To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`).
-The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
+The problem is that large numbers of element-attribute selectors (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than class-attribute selectors (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible.
:::
- 
- 
- 
-