Skip to content

Commit

Permalink
Site updated at 2023-10-04 17:54:02 UTC
Browse files Browse the repository at this point in the history
  • Loading branch information
@icai
icai committed Oct 4, 2023
1 parent df1f1fb commit df3e315
Show file tree
Hide file tree
Showing 84 changed files with 2,386 additions and 1,756 deletions.
2 changes: 1 addition & 1 deletion assets/.sprockets-manifest-a08289286f5cbc3cdb81ede4198569bd.json
View file

Large diffs are not rendered by default.

126 changes: 77 additions & 49 deletions vue~3/api/application.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@

<head>
<meta charset="utf-8">
<title>Application API - Vue.js 3 - W3cubDocs</title>
<title>Application API - Vue 3 - W3cubDocs</title>

<meta name="description" content=" Creates an application instance. ">
<meta name="keywords" content="application, api, vue, js, vue~3">
<meta name="keywords" content="application, api, vue, vue~3">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">

<link rel="canonical" href="https://docs.w3cub.com/vue~3/api/application.html">
<link href="/favicon.png" rel="icon">
<link rel="stylesheet" type="text/css" href="/assets/application-1810d67ab7e57be09d8247710d2feb6954566959eb82322d1fee3a0c9156f56974b78ebaa9928774f00767342bbe58b0799d91fcc336b92b319170b196f9b64b.css">
<script src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
<script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
<script src="/json/vue~3.js"></script>

<!-- Google tag (gtag.js) -->
Expand Down Expand Up @@ -49,7 +49,7 @@ <h1 class="_logo">
<a href="/" class="_nav-link" title="API Documentation Browser">W3cubDocs</a>
</h1>

<span class="_logo-sub-nav">/</span><span class="_logo-sub-nav"><a href="/vue~3/" class="_nav-link" title="" style="margin-left:0;">Vue.js 3</a></span>
<span class="_logo-sub-nav">/</span><span class="_logo-sub-nav"><a href="/vue~3/" class="_nav-link" title="" style="margin-left:0;">Vue 3</a></span>

<nav class="_nav">
<a href="https://tools.w3cub.com/?_sp=docs" target="_blank" class="_nav-link ">W3cubTools</a>
Expand Down Expand Up @@ -149,49 +149,6 @@ <h2 id="app-unmount" tabindex="-1">app.unmount() </h2>
unmount(): void
}</pre>
</li></ul>
<h2 id="app-provide" tabindex="-1">app.provide() </h2>
<p>Provide a value that can be injected in all descendant components within the application.</p>
<ul>
<li>
<p><strong>Type</strong></p>
<pre data-language="ts">interface App {
provide&lt;T&gt;(key: InjectionKey&lt;T&gt; | symbol | string, value: T): this
}</pre>
</li>
<li>
<p><strong>Details</strong></p>
<p>Expects the injection key as the first argument, and the provided value as the second. Returns the application instance itself.</p>
</li>
<li>
<p><strong>Example</strong></p>
<pre data-language="js">import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'hello')</pre>
<p>Inside a component in the application:</p>
<div class="composition-api"><pre data-language="js">import { inject } from 'vue'

export default {
setup() {
console.log(inject('message')) // 'hello'
}
}</pre></div>
<div class="options-api"><pre data-language="js">export default {
inject: ['message'],
created() {
console.log(this.message) // 'hello'
}
}</pre></div>
</li>
<li>
<p><strong>See also:</strong></p>
<ul>
<li><a href="../guide/components/provide-inject">Provide / Inject</a></li>
<li><a href="../guide/components/provide-inject#app-level-provide">App-level Provide</a></li>
</ul>
</li>
</ul>
<h2 id="app-component" tabindex="-1">app.component() </h2>
<p>Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.</p>
<ul>
Expand Down Expand Up @@ -291,6 +248,76 @@ <h2 id="app-mixin" tabindex="-1">app.mixin() </h2>
mixin(mixin: ComponentOptions): this
}</pre>
</li></ul>
<h2 id="app-provide" tabindex="-1">app.provide() </h2>
<p>Provide a value that can be injected in all descendant components within the application.</p>
<ul>
<li>
<p><strong>Type</strong></p>
<pre data-language="ts">interface App {
provide&lt;T&gt;(key: InjectionKey&lt;T&gt; | symbol | string, value: T): this
}</pre>
</li>
<li>
<p><strong>Details</strong></p>
<p>Expects the injection key as the first argument, and the provided value as the second. Returns the application instance itself.</p>
</li>
<li>
<p><strong>Example</strong></p>
<pre data-language="js">import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'hello')</pre>
<p>Inside a component in the application:</p>
<div class="composition-api"><pre data-language="js">import { inject } from 'vue'

export default {
setup() {
console.log(inject('message')) // 'hello'
}
}</pre></div>
<div class="options-api"><pre data-language="js">export default {
inject: ['message'],
created() {
console.log(this.message) // 'hello'
}
}</pre></div>
</li>
<li>
<p><strong>See also:</strong></p>
<ul>
<li><a href="../guide/components/provide-inject">Provide / Inject</a></li>
<li><a href="../guide/components/provide-inject#app-level-provide">App-level Provide</a></li>
<li><a href="#app-runwithcontext">app.runWithContext()</a></li>
</ul>
</li>
</ul>
<h2 id="app-runwithcontext" tabindex="-1">app.runWithContext() </h2>
<p>Execute a callback with the current app as injection context.</p>
<ul>
<li>
<p><strong>Type</strong></p>
<pre data-language="ts">interface App {
runWithContext&lt;T&gt;(fn: () =&gt; T): T
}</pre>
</li>
<li>
<p><strong>Details</strong></p>
<p>Expects a callback function and runs the callback immediately. During the synchronous call of the callback, <code>inject()</code> calls are able to look up injections from the values provided by the current app, even when there is no current active component instance. The return value of the callback will also be returned.</p>
</li>
<li>
<p><strong>Example</strong></p>
<pre data-language="js">import { inject } from 'vue'

app.provide('id', 1)

const injected = app.runWithContext(() =&gt; {
return inject('id')
})

console.log(injected) // 1</pre>
</li>
</ul>
<h2 id="app-version" tabindex="-1">app.version </h2>
<p>Provides the version of Vue that the application was created with. This is useful inside <a href="../guide/reusability/plugins">plugins</a>, where you might need conditional logic based on different Vue versions.</p>
<ul>
Expand Down Expand Up @@ -398,7 +425,7 @@ <h2 id="app-config-compileroptions" tabindex="-1">app.config.compilerOptions </h
<strong class="custom-block-title">Important</strong><p>This config option is only respected when using the full build (i.e. the standalone <code>vue.js</code> that can compile templates in the browser). If you are using the runtime-only build with a build setup, compiler options must be passed to <code>@vue/compiler-dom</code> via build tool configurations instead.</p>
<ul>
<li><p>For <code>vue-loader</code>: <a href="https://vue-loader.vuejs.org/options.html#compileroptions" target="_blank" rel="noreferrer">pass via the <code>compilerOptions</code> loader option</a>. Also see <a href="https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader" target="_blank" rel="noreferrer">how to configure it in <code>vue-cli</code></a>.</p></li>
<li><p>For <code>vite</code>: <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options" target="_blank" rel="noreferrer">pass via <code>@vitejs/plugin-vue</code> options</a>.</p></li>
<li><p>For <code>vite</code>: <a href="https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options" target="_blank" rel="noreferrer">pass via <code>@vitejs/plugin-vue</code> options</a>.</p></li>
</ul>
</div>
<h3 id="app-config-compileroptions-iscustomelement" tabindex="-1">app.config.compilerOptions.isCustomElement </h3>
Expand Down Expand Up @@ -492,6 +519,7 @@ <h2 id="app-config-globalproperties" tabindex="-1">app.config.globalProperties <
}
}</pre>
</li>
<li><p><strong>See also:</strong> <a href="../guide/typescript/options-api#augmenting-global-properties">Guide - Augmenting Global Properties</a> </p></li>
</ul>
<h2 id="app-config-optionmergestrategies" tabindex="-1">app.config.optionMergeStrategies </h2>
<p>An object for defining merging strategies for custom component options.</p>
Expand Down
36 changes: 20 additions & 16 deletions vue~3/api/built-in-components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@

<head>
<meta charset="utf-8">
<title>Built-in Components - Vue.js 3 - W3cubDocs</title>
<title>Built-in Components - Vue 3 - W3cubDocs</title>

<meta name="description" content="Built-in components can be used directly in templates without needing to be registered. They are also tree-shakeable&#58; they are only included in &hellip;">
<meta name="keywords" content="built-in, components, vue, js, vue~3">
<meta name="keywords" content="built-in, components, vue, vue~3">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">

<link rel="canonical" href="https://docs.w3cub.com/vue~3/api/built-in-components.html">
<link href="/favicon.png" rel="icon">
<link rel="stylesheet" type="text/css" href="/assets/application-1810d67ab7e57be09d8247710d2feb6954566959eb82322d1fee3a0c9156f56974b78ebaa9928774f00767342bbe58b0799d91fcc336b92b319170b196f9b64b.css">
<script src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
<script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
<script src="/json/vue~3.js"></script>

<!-- Google tag (gtag.js) -->
Expand Down Expand Up @@ -49,7 +49,7 @@ <h1 class="_logo">
<a href="/" class="_nav-link" title="API Documentation Browser">W3cubDocs</a>
</h1>

<span class="_logo-sub-nav">/</span><span class="_logo-sub-nav"><a href="/vue~3/" class="_nav-link" title="" style="margin-left:0;">Vue.js 3</a></span>
<span class="_logo-sub-nav">/</span><span class="_logo-sub-nav"><a href="/vue~3/" class="_nav-link" title="" style="margin-left:0;">Vue 3</a></span>

<nav class="_nav">
<a href="https://tools.w3cub.com/?_sp=docs" target="_blank" class="_nav-link ">W3cubTools</a>
Expand Down Expand Up @@ -172,15 +172,19 @@ <h2 id="transition" tabindex="-1">
<li>
<p><strong>Example</strong></p>
<p>Simple element:</p>
<pre data-language="javascript">&lt;Transition&gt;
<pre data-language="template">&lt;Transition&gt;
&lt;div v-if="ok"&gt;toggled content&lt;/div&gt;
&lt;/Transition&gt;</pre>
<p>Forcing a transition by changing the <code>key</code> attribute:</p>
<pre data-language="template">&lt;Transition&gt;
&lt;div :key="text"&gt;{{ text }}&lt;/div&gt;
&lt;/Transition&gt;</pre>
<p>Dynamic component, with transition mode + animate on appear:</p>
<pre data-language="javascript">&lt;Transition name="fade" mode="out-in" appear&gt;
<pre data-language="template">&lt;Transition name="fade" mode="out-in" appear&gt;
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/Transition&gt;</pre>
<p>Listening to transition events:</p>
<pre data-language="javascript">&lt;Transition @after-enter="onTransitionComplete"&gt;
<pre data-language="template">&lt;Transition @after-enter="onTransitionComplete"&gt;
&lt;div v-show="ok"&gt;toggled content&lt;/div&gt;
&lt;/Transition&gt;</pre>
</li>
Expand Down Expand Up @@ -217,7 +221,7 @@ <h2 id="transitiongroup" tabindex="-1">
</li>
<li>
<p><strong>Example</strong></p>
<pre data-language="javascript">&lt;TransitionGroup tag="ul" name="slide"&gt;
<pre data-language="template">&lt;TransitionGroup tag="ul" name="slide"&gt;
&lt;li v-for="item in items" :key="item.id"&gt;
{{ item.text }}
&lt;/li&gt;
Expand Down Expand Up @@ -259,22 +263,22 @@ <h2 id="keepalive" tabindex="-1">
<li>
<p><strong>Example</strong></p>
<p>Basic usage:</p>
<pre data-language="javascript">&lt;KeepAlive&gt;
<pre data-language="template">&lt;KeepAlive&gt;
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/KeepAlive&gt;</pre>
<p>When used with <code>v-if</code> / <code>v-else</code> branches, there must be only one component rendered at a time:</p>
<pre data-language="javascript">&lt;KeepAlive&gt;
<pre data-language="template">&lt;KeepAlive&gt;
&lt;comp-a v-if="a &gt; 1"&gt;&lt;/comp-a&gt;
&lt;comp-b v-else&gt;&lt;/comp-b&gt;
&lt;/KeepAlive&gt;</pre>
<p>Used together with <code>&lt;Transition&gt;</code>:</p>
<pre data-language="javascript">&lt;Transition&gt;
<pre data-language="template">&lt;Transition&gt;
&lt;KeepAlive&gt;
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/KeepAlive&gt;
&lt;/Transition&gt;</pre>
<p>Using <code>include</code> / <code>exclude</code>:</p>
<pre data-language="javascript">&lt;!-- comma-delimited string --&gt;
<pre data-language="template">&lt;!-- comma-delimited string --&gt;
&lt;KeepAlive include="a,b"&gt;
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/KeepAlive&gt;
Expand All @@ -289,7 +293,7 @@ <h2 id="keepalive" tabindex="-1">
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/KeepAlive&gt;</pre>
<p>Usage with <code>max</code>:</p>
<pre data-language="javascript">&lt;KeepAlive :max="10"&gt;
<pre data-language="template">&lt;KeepAlive :max="10"&gt;
&lt;component :is="view"&gt;&lt;/component&gt;
&lt;/KeepAlive&gt;</pre>
</li>
Expand Down Expand Up @@ -318,11 +322,11 @@ <h2 id="teleport" tabindex="-1">
<li>
<p><strong>Example</strong></p>
<p>Specifying target container:</p>
<pre data-language="javascript">&lt;teleport to="#some-id" /&gt;
<pre data-language="template">&lt;teleport to="#some-id" /&gt;
&lt;teleport to=".some-class" /&gt;
&lt;teleport to="[data-teleport]" /&gt;</pre>
<p>Conditionally disabling:</p>
<pre data-language="javascript">&lt;teleport to="#popup" :disabled="displayVideoInline"&gt;
<pre data-language="template">&lt;teleport to="#popup" :disabled="displayVideoInline"&gt;
&lt;video src="./my-movie.mp4"&gt;
&lt;/teleport&gt;</pre>
</li>
Expand Down
Loading

0 comments on commit df3e315

Please sign in to comment.