Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a10fcbd

Browse files
jhildenbiddlejhildenbiddle
committed
Update Vue-related descriptions
1 parent 51451a4 commit a10fcbd

File tree

2 files changed

+14
-13
lines changed

2 files changed

+14
-13
lines changed

‎docs/configuration.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ window.$docsify = {
634634

635635
- type: `Object`
636636

637-
Registers Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
637+
Registers Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
638638

639639
```js
640640
window.$docsify = {
@@ -667,7 +667,7 @@ window.$docsify = {
667667

668668
- type: `Object`
669669

670-
Specifies Vue options to be shared throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not been previously mounted via [vueMounts](#vuemounts), [vueComponents](#vuecomponents), or a markdown `<script>`.
670+
Specifies options for use with Vue content not explicitly mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
671671

672672
```js
673673
window.$docsify = {
@@ -701,7 +701,7 @@ window.$docsify = {
701701

702702
- type: `Object`
703703

704-
Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
704+
Specifies DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
705705

706706
```js
707707
window.$docsify = {

‎docs/vue.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
5353

5454
[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
5555

56-
Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options) or, when [mounting DOM elements](#mounting-dom-elements), or within Vue [components](#components).
56+
Vue content becomes more interesting when [data](#data), [computed properties](#computed-properties), [methods](#methods), and [lifecycle hooks](#lifecycle-hooks) are used. These options can be specified as [global options](#global-options) or within DOM [mounts](#mounts) and [components](#components).
5757

5858
### Data
5959

@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
189189

190190
## Global options
191191

192-
Use `vueGlobalOptions` to share Vue options throughout your site. These options will be used when Docsify detects Vue content in the main content area that has not already been mounted with [vueMounts](#mounting-dom-elements), [vueComponents](#components), or a [markdown script](#markdown-script).
192+
Use `vueGlobalOptions` to specify options for use with Vue content not explicitly mounted with [vueMounts](#mounts), [vueComponents](#components), or a [markdown script](#markdown-script). Changes to global `data` will persist and be reflected anywhere global references are used.
193193

194194
```js
195195
window.$docsify = {
@@ -231,9 +231,9 @@ Notice the behavior when multiple global counters are rendered:
231231

232232
Changes made to one counter affect the both counters. This is because both instances reference the same global `count` value. Now, navigate to a new page and return to this section to see how changes made to global data persist between page loads.
233233

234-
## Mounting DOM elements
234+
## Mounts
235235

236-
Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded.
236+
Use `vueMounts` to specify DOM elements to mount as Vue instances and their associated options. Mount elements are specified using a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) as the key with an object containing Vue options as their value. Docsify will mount the first matching element in the main content area each time a new page is loaded. Mount element `data` is unique for each instance and will not persist as users navigate the site.
237237

238238
```js
239239
window.$docsify = {
@@ -265,7 +265,7 @@ window.$docsify = {
265265

266266
## Components
267267

268-
Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component data is not shared and changes will not persist as users navigate the site.
268+
Use `vueComponents` to register Vue components using the component name as the key with an object containing Vue options as the value. Component `data` is unique for each instance and will not persist as users navigate the site.
269269

270270
```js
271271
window.$docsify = {
@@ -324,10 +324,11 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
324324
## Technical Notes
325325

326326
- Docsify processes Vue content in the following order:
327-
1. Markdown `<script>`
328-
1. `vueMounts`
329-
1. `vueGlobalOptions`
327+
1. Execute markdown `<script>`
328+
1. Register `vueComponents`
329+
1. Mount DOM elements via `vueMounts`
330+
1. Process unmounted Vue content using `vueGlobalOptions`
330331
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
331332
- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
332-
- When processing `vueGlobalOptions`, docsify parses each root element of the main content area and mounts the element if Vue content is detected. Docsify does not parse each individual node within the main content area.
333-
- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported.
333+
- When processing `vueGlobalOptions`, docsify parses the child elements within the main content area (`#main`) and mounts the element if it contains Vue content. Docsify does not parse each individual node within the main content area.
334+
- When processing `vueGlobalOptions`, docsify will only detect the full `v-` attribute syntax (e.g `v-bind:href` or `v-on:click`). For performance reasons, detection of Vue's [shorthand](https://vuejs.org/v2/guide/syntax.html#Shorthands) attribute syntax (e.g. `:href`or `@click`) is not supported. Shorthand syntax is supported when explicitly mounting Vue content via `vueComponents`, `vueMounts`, or a markdown `<script>`.

0 commit comments

Comments
 (0)