GithubStar/docsify
1
0
Fork 0
mirror of https://github.com/docsifyjs/docsify.git synced 2026-10-17 04:31:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rename vueOptions to vueMountOptions

Browse Source
This commit is contained in:
John Hildenbiddle
2020-10-21 13:14:07 -05:00
parent 1a52e97581
commit 86dae610de
5 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/configuration.md
+3 -3
View File
@@ -667,7 +667,7 @@ window.$docsify = {
- type: `Object`
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 [vueOptions](#vueoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
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 [vueMountOptions](#vuemountoptions), [vueComponents](#vuecomponents), or a markdown `<script>`.
```js
window.$docsify = {
@@ -697,7 +697,7 @@ window.$docsify = {
</p>
</output>
## vueOptions
## vueMountOptions
- type: `Object`
@@ -705,7 +705,7 @@ Specifies Vue mount elements and their associated options. Mount elements are sp
```js
window.$docsify = {
vueOptions: {
vueMountOptions: {
'#counter': {
data() {
return {
docs/index.html
+15 -15
View File
@@ -101,6 +101,20 @@
'/': 'Search',
},
},
vueComponents: {
'button-counter': {
template: `
<button @click="count += 1">
You clicked me {{ count }} times
</button>
`,
data() {
return {
count: 0,
};
},
},
},
vueGlobalOptions: {
data() {
return {
@@ -134,7 +148,7 @@
},
},
},
vueOptions: {
vueMountOptions: {
'#counter': {
data() {
return {
@@ -143,20 +157,6 @@
},
},
},
vueComponents: {
'button-counter': {
template: `
<button @click="count += 1">
You clicked me {{ count }} times
</button>
`,
data() {
return {
count: 0,
};
},
},
},
plugins: [
function(hook, vm) {
hook.beforeEach(function(html) {
docs/vue.md
+6 -6
View File
@@ -53,7 +53,7 @@ Vue [template syntax](https://vuejs.org/v2/guide/syntax.html) is used to create
[View output on GitHub](https://github.com/docsifyjs/docsify/blob/develop/docs/vue.md#template-syntax)
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), [instance options](#instance-options), or within [components](#components).
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), [mount options](#mount-options), or within [components](#components).
### Data
@@ -189,7 +189,7 @@ Good {{ timeOfDay }}!
## Global options
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 been previously mounted via [instance options](#instance-options), [components](#components), or a [markdown script](#markdown-script).
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 been previously mounted via [mount options](#mount-options), [components](#components), or a [markdown script](#markdown-script).
```js
window.$docsify = {
@@ -231,13 +231,13 @@ Notice the behavior when multiple global counters are rendered:
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.
## Instance options
## Mount options
Use `vueOptions` to specify Vue mount elements 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 (`#main, .markdown-section`) each time a new page is loaded.
Use `vueMountOptions` to specify Vue mount elements 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 (`#main, .markdown-section`) each time a new page is loaded.
```js
window.$docsify = {
vueOptions: {
vueMountOptions: {
'#counter': {
data() {
return {
@@ -325,7 +325,7 @@ Vue content can mounted using a `<script>` tag in your markdown pages.
- Docsify processes Vue content in the following order:
1. Markdown `<script>`
1. `vueOptions`
1. `vueMountOptions`
1. `vueGlobalOptions`
- Docsify will not mount an existing Vue instance or an element that contains an existing Vue instance.
- Docsify will automatically destroy/unmount all Vue instances it creates before new page content is loaded.
src/core/render/index.js
+2 -2
View File
@@ -114,9 +114,9 @@ function renderMain(html) {
vueGlobalData = docsifyConfig.vueGlobalOptions.data();
}
// vueOptions
// vueMountOptions
vueMountData.push(
...Object.entries(docsifyConfig.vueOptions || {})
...Object.entries(docsifyConfig.vueMountOptions || {})
.map(([cssSelector, vueConfig]) => [
dom.find(markdownElm, cssSelector),
vueConfig,
test/e2e/vue.test.js
+24 -16
View File
@@ -30,12 +30,12 @@ describe('Vue.js Compatibility', function() {
};
},
},
vueOptions: {
'#vueoptions': {
vueMountOptions: {
'#vuemountoptions': {
data: function() {
return {
counter: 0,
msg: 'vueoptions',
msg: 'vuemountoptions',
};
},
},
@@ -53,7 +53,7 @@ describe('Vue.js Compatibility', function() {
<span>{{ counter }}<span>
</div>
<div id="vueoptions">
<div id="vuemountoptions">
<p v-text="msg">---</p>
<button v-on:click="counter += 1">+</button>
<span>{{ counter }}<span>
@@ -114,8 +114,11 @@ describe('Vue.js Compatibility', function() {
'vueglobaloptions'
);
await expect(page).toEqualText('#vueglobaloptions span', '0');
await expect(page).toEqualText('#vueoptions p', 'vueoptions');
await expect(page).toEqualText('#vueoptions span', '0');
await expect(page).toEqualText(
'#vuemountoptions p',
'vuemountoptions'
);
await expect(page).toEqualText('#vuemountoptions span', '0');
await expect(page).toEqualText('#vuescript p', 'vuescript');
await expect(page).toEqualText('#vuescript span', '0');
@@ -124,8 +127,8 @@ describe('Vue.js Compatibility', function() {
await expect(page).toEqualText('#vuecomponent', '1');
await page.click('#vueglobaloptions button');
await expect(page).toEqualText('#vueglobaloptions span', '1');
await page.click('#vueoptions button');
await expect(page).toEqualText('#vueoptions span', '1');
await page.click('#vuemountoptions button');
await expect(page).toEqualText('#vuemountoptions span', '1');
await page.click('#vuescript button');
await expect(page).toEqualText('#vuescript span', '1');
});
@@ -141,23 +144,23 @@ describe('Vue.js Compatibility', function() {
await expect(page).toEqualText('#vuefor', '{{ i }}');
await expect(page).toEqualText('#vuecomponent', '---');
await expect(page).toEqualText('#vueglobaloptions p', '---');
await expect(page).toEqualText('#vueoptions p', '---');
await expect(page).toEqualText('#vuemountoptions p', '---');
await expect(page).toEqualText('#vuescript p', '---');
});
test(`ignores content when vueComponents, vueOptions, and vueGlobalOptions are undefined`, async () => {
test(`ignores content when vueComponents, vueMountOptions, and vueGlobalOptions are undefined`, async () => {
const docsifyInitConfig = getSharedConfig();
docsifyInitConfig.config.vueComponents = undefined;
docsifyInitConfig.config.vueGlobalOptions = undefined;
docsifyInitConfig.config.vueOptions = undefined;
docsifyInitConfig.config.vueMountOptions = undefined;
docsifyInitConfig.scriptURLs = vueURL;
await docsifyInit(docsifyInitConfig);
await expect(page).toEqualText('#vuefor', '{{ i }}');
await expect(page).toEqualText('#vuecomponent', '---');
await expect(page).toEqualText('#vueglobaloptions p', '---');
await expect(page).toEqualText('#vueoptions p', '---');
await expect(page).toEqualText('#vuemountoptions p', '---');
await expect(page).toEqualText('#vuescript p', 'vuescript');
});
@@ -171,14 +174,16 @@ describe('Vue.js Compatibility', function() {
await expect(page).toEqualText('#vuefor', '{{ i }}');
await expect(page).toEqualText('#vuecomponent', '0');
await expect(page).toEqualText('#vueglobaloptions p', '---');
await expect(page).toEqualText('#vueoptions p', 'vueoptions');
await expect(page).toEqualText('#vuemountoptions p', 'vuemountoptions');
await expect(page).toEqualText('#vuescript p', 'vuescript');
});
test(`ignores content when vueOptions is undefined`, async () => {
test(`ignores content when vueMountOptions is undefined`, async () => {
const docsifyInitConfig = getSharedConfig();
docsifyInitConfig.config.vueOptions['#vueoptions'] = undefined;
docsifyInitConfig.config.vueMountOptions[
'#vuemountoptions'
] = undefined;
docsifyInitConfig.scriptURLs = vueURL;
await docsifyInit(docsifyInitConfig);
@@ -188,7 +193,10 @@ describe('Vue.js Compatibility', function() {
'#vueglobaloptions p',
'vueglobaloptions'
);
await expect(page).toEqualText('#vueoptions p', 'vueglobaloptions');
await expect(page).toEqualText(
'#vuemountoptions p',
'vueglobaloptions'
);
await expect(page).toEqualText('#vuescript p', 'vuescript');
});