buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 12:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
3c8abcee15e40f37b767552e8b83680f772c967c
reference/docs/vue.html
jaywcjlove 3c8abcee15 doc: update vue.md (#10) 04369f05d3
2022-11-03 11:18:16 +00:00

1255 lines
92 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Vue 3 备忘清单
&#x26; vue cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="渐进式 JavaScript 框架 Vue 3 备忘清单的快速参考列表，包含常用 API 和示例。为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,vue">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/vue.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script>
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="vue-3-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"></path>
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#vue-3-备忘清单"><span class="icon icon-link"></span></a>Vue 3 备忘清单</h1><div class="wrap-body">
<p>渐进式 JavaScript 框架 <a href="https://cn.vuejs.org/">Vue 3</a> 备忘清单的快速参考列表，包含常用 API 和示例。</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#介绍">介绍</a><a aria-hidden="true" class="leve3 tocs-link" href="#创建应用">创建应用</a><a aria-hidden="true" class="leve3 tocs-link" href="#应用实例">应用实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-cdn-使用-vue">通过 CDN 使用 Vue</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-es-模块构建版本">使用 ES 模块构建版本</a><a aria-hidden="true" class="leve2 tocs-link" href="#模板语法">模板语法</a><a aria-hidden="true" class="leve3 tocs-link" href="#文本插值">文本插值</a><a aria-hidden="true" class="leve3 tocs-link" href="#原始-html">原始 HTML</a><a aria-hidden="true" class="leve3 tocs-link" href="#attribute-绑定">Attribute 绑定</a><a aria-hidden="true" class="leve3 tocs-link" href="#布尔型-attribute">布尔型 Attribute</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态绑定多个值">动态绑定多个值</a><a aria-hidden="true" class="leve3 tocs-link" href="#使用-javascript-表达式">使用 JavaScript 表达式</a><a aria-hidden="true" class="leve3 tocs-link" href="#仅支持表达式例子都是无效">仅支持表达式(例子都是无效)</a><a aria-hidden="true" class="leve3 tocs-link" href="#调用函数">调用函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令-directives">指令 Directives</a><a aria-hidden="true" class="leve3 tocs-link" href="#参数-arguments">参数 Arguments</a><a aria-hidden="true" class="leve3 tocs-link" href="#绑定事件">绑定事件</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态参数">动态参数</a><a aria-hidden="true" class="leve3 tocs-link" href="#动态的事件名称">动态的事件名称</a><a aria-hidden="true" class="leve3 tocs-link" href="#修饰符-modifiers">修饰符 Modifiers</a><a aria-hidden="true" class="leve3 tocs-link" href="#指令语法">指令语法</a><a aria-hidden="true" class="leve2 tocs-link" href="#响应式基础">响应式基础</a><a aria-hidden="true" class="leve3 tocs-link" href="#声明状态">声明状态</a><a aria-hidden="true" class="leve3 tocs-link" href="#声明方法">声明方法</a><a aria-hidden="true" class="leve3 tocs-link" href="#有状态方法">有状态方法</a><a aria-hidden="true" class="leve2 tocs-link" href="#api-参考">API 参考</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局-api---应用实例">全局 API - 应用实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局-api---通用">全局 API - 通用</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合式-api---setup">组合式 API - setup()</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合式-api---响应式-工具">组合式 API - 响应式: 工具</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合式-api---生命周期钩子">组合式 API - 生命周期钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合式-api---依赖注入">组合式 API - 依赖注入</a><a aria-hidden="true" class="leve3 tocs-link" href="#组合式-api---响应式-核心">组合式 API - 响应式: 核心</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---状态选项">选项式 API - 状态选项</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---生命周期选项">选项式 API - 生命周期选项</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---其他杂项">选项式 API - 其他杂项</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---渲染选项">选项式 API - 渲染选项</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---组件实例">选项式 API - 组件实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#选项式-api---组合选项">选项式 API - 组合选项</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置内容---指令">内置内容 - 指令</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置内容---组件">内置内容 - 组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置内容---特殊-attributes">内置内容 - 特殊 Attributes</a><a aria-hidden="true" class="leve3 tocs-link" href="#内置内容---特殊元素">内置内容 - 特殊元素</a><a aria-hidden="true" class="leve3 tocs-link" href="#单文件组件---语法定义">单文件组件 - 语法定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#单文件组件---script-setup">单文件组件 - &#x3C;script setup></a><a aria-hidden="true" class="leve3 tocs-link" href="#单文件组件---css-功能">单文件组件 - CSS 功能</a><a aria-hidden="true" class="leve3 tocs-link" href="#进阶-api---渲染函数">进阶 API - 渲染函数</a><a aria-hidden="true" class="leve3 tocs-link" href="#进阶-api---服务端渲染">进阶 API - 服务端渲染</a><a aria-hidden="true" class="leve3 tocs-link" href="#进阶-api---typescript-工具类型">进阶 API - TypeScript 工具类型</a><a aria-hidden="true" class="leve3 tocs-link" href="#进阶-api---自定义渲染">进阶 API - 自定义渲染</a><a aria-hidden="true" class="leve2 tocs-link" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
<p>Vue 是一套用于构建用户界面的渐进式框架</p>
<ul class="style-round">
<li><a href="https://cn.vuejs.org/">Vue 3.x 官方文档</a> <em>(cn.vuejs.org)</em></li>
<li><a href="https://router.vuejs.org/zh/">Vue Router 4.x 官方文档</a> <em>(router.vuejs.org)</em></li>
<li><a href="./vue2.html">Vue 2 备忘清单</a></li>
</ul>
<!--rehype:className=style-round-->
<p>注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本</p>
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="创建应用"><a aria-hidden="true" tabindex="-1" href="#创建应用"><span class="icon icon-link"></span></a>创建应用</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<p>已安装 <code>16.0</code> 或更高版本的 Node.js</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> init vue@latest
</span></code></pre>
<p>指令将会安装并执行 <a href="https://www.npmjs.com/package/create-vue">create-vue</a>，它是 Vue 官方的项目脚手架工具</p>
<pre class="wrap-text "><code class="language-bash code-highlight"><span class="code-line">✔ Project name: … <span class="token operator">&#x3C;</span>your-project-name<span class="token operator">></span>
</span><span class="code-line">✔ Add TypeScript? … No/Yes
</span><span class="code-line">✔ Add JSX Support? … No/Yes
</span><span class="code-line">✔ Add Vue Router <span class="token keyword">for</span> Single Page Application development? … No/Yes
</span><span class="code-line">✔ Add Pinia <span class="token keyword">for</span> state management? … No/Yes
</span><span class="code-line">✔ Add Vitest <span class="token keyword">for</span> Unit testing? … No/Yes
</span><span class="code-line">✔ Add Cypress <span class="token keyword">for</span> both Unit and End-to-End testing? … No/Yes
</span><span class="code-line">✔ Add ESLint <span class="token keyword">for</span> code quality? … No/Yes
</span><span class="code-line">✔ Add Prettier <span class="token keyword">for</span> code formatting? … No/Yes
</span><span class="code-line">
</span><span class="code-line">Scaffolding project <span class="token keyword">in</span> ./<span class="token operator">&#x3C;</span>your-project-name<span class="token operator">></span><span class="token punctuation">..</span>.
</span><span class="code-line">Done.
</span></code></pre>
<!--rehype:className=wrap-text -->
<p>安装依赖并启动开发服务器</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token builtin class-name">cd</span> <span class="token operator">&#x3C;</span>your-project-name<span class="token operator">></span>
</span><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span>
</span><span class="code-line">$ <span class="token function">npm</span> run dev
</span></code></pre>
<p>当你准备将应用发布到生产环境时，请运行：</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> run build
</span></code></pre>
<p>此命令会在 <code>./dist</code> 文件夹中为你的应用创建一个生产环境的构建版本</p>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="应用实例"><a aria-hidden="true" tabindex="-1" href="#应用实例"><span class="icon icon-link"></span></a>应用实例</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<p>挂载应用</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> {{ count }}
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="通过-cdn-使用-vue"><a aria-hidden="true" tabindex="-1" href="#通过-cdn-使用-vue"><span class="icon icon-link"></span></a>通过 CDN 使用 Vue</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/vue@3/dist/vue.global.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Vue</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-es-模块构建版本"><a aria-hidden="true" tabindex="-1" href="#使用-es-模块构建版本"><span class="icon icon-link"></span></a>使用 ES 模块构建版本</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="模板语法"><a aria-hidden="true" tabindex="-1" href="#模板语法"><span class="icon icon-link"></span></a>模板语法</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="文本插值"><a aria-hidden="true" tabindex="-1" href="#文本插值"><span class="icon icon-link"></span></a>文本插值</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>span</span><span class="token punctuation">></span></span>Message: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>span</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>使用的是 <code>Mustache</code> 语法 (即双大括号)，每次 <code>msg</code> 属性更改时它也会同步更新</p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="原始-html"><a aria-hidden="true" tabindex="-1" href="#原始-html"><span class="icon icon-link"></span></a>原始 HTML</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>Using text interpolation: {{ rawHtml }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>Using v-html directive: <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>span</span> <span class="token attr-name">v-html</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rawHtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>双大括号<code>{{}}</code>会将数据解释为纯文本，使用 <code>v-html</code> 指令，将插入 HTML</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="attribute-绑定"><a aria-hidden="true" tabindex="-1" href="#attribute-绑定"><span class="icon icon-link"></span></a>Attribute 绑定</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>简写</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamicId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="布尔型-attribute"><a aria-hidden="true" tabindex="-1" href="#布尔型-attribute"><span class="icon icon-link"></span></a>布尔型 Attribute</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>isButtonDisabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> Button
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="动态绑定多个值"><a aria-hidden="true" tabindex="-1" href="#动态绑定多个值"><span class="icon icon-link"></span></a>动态绑定多个值</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">objectOfAttrs</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'container'</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'wrapper'</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>通过不带参数的 <code>v-bind</code>，你可以将它们绑定到单个元素上</p>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>objectOfAttrs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-javascript-表达式"><a aria-hidden="true" tabindex="-1" href="#使用-javascript-表达式"><span class="icon icon-link"></span></a>使用 JavaScript 表达式</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line">{{ number + 1 }}
</span><span class="code-line">{{ ok ? 'YES' : 'NO' }}
</span><span class="code-line">{{ message.split('').reverse().join('') }}
</span><span class="code-line">
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`list-${id}`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="仅支持表达式例子都是无效"><a aria-hidden="true" tabindex="-1" href="#仅支持表达式例子都是无效"><span class="icon icon-link"></span></a>仅支持表达式(例子都是无效)</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment">&#x3C;!-- 这是一个语句，而非表达式 --></span>
</span><span class="code-line">{{ var a = 1 }}
</span><span class="code-line"><span class="token comment">&#x3C;!-- 条件控制也不支持，请使用三元表达式 --></span>
</span><span class="code-line">{{ if (ok) { return message } }}
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="调用函数"><a aria-hidden="true" tabindex="-1" href="#调用函数"><span class="icon icon-link"></span></a>调用函数</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toTitleDate(date)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> {{ formatDate(date) }}
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>span</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令-directives"><a aria-hidden="true" tabindex="-1" href="#指令-directives"><span class="icon icon-link"></span></a>指令 Directives</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Now you see me<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="参数-arguments"><a aria-hidden="true" tabindex="-1" href="#参数-arguments"><span class="icon icon-link"></span></a>参数 Arguments</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!-- 简写 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">:href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="绑定事件"><a aria-hidden="true" tabindex="-1" href="#绑定事件"><span class="icon icon-link"></span></a>绑定事件</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!-- 简写 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动态参数"><a aria-hidden="true" tabindex="-1" href="#动态参数"><span class="icon icon-link"></span></a>动态参数</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>[attributeName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!-- 简写 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">:[attributeName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>这里的 <code>attributeName</code> 会作为一个 JS 表达式被动态执行</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动态的事件名称"><a aria-hidden="true" tabindex="-1" href="#动态的事件名称"><span class="icon icon-link"></span></a>动态的事件名称</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>[eventName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>a</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!-- 简写 --></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>a</span> <span class="token attr-name">@[eventName]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>doSomething<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="修饰符-modifiers"><a aria-hidden="true" tabindex="-1" href="#修饰符-modifiers"><span class="icon icon-link"></span></a>修饰符 Modifiers</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>form</span> <span class="token attr-name">@submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSubmit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> ...
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>form</span><span class="token punctuation">></span></span>
</span></code></pre>
<p><code>.prevent</code> 修饰符会告知 <code>v-on</code> 指令对触发的事件调用 <code>event.preventDefault()</code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="指令语法"><a aria-hidden="true" tabindex="-1" href="#指令语法"><span class="icon icon-link"></span></a>指令语法</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">v-on:submit.prevent<span class="token operator">=</span><span class="token string">"onSubmit"</span>
</span><span class="code-line">──┬─ ─┬──── ─┬───── ─┬──────
</span><span class="code-line"> ┆ ┆ ┆ ╰─ Value 解释为JS表达式
</span><span class="code-line"> ┆ ┆ ╰─ Modifiers 由前导点表示
</span><span class="code-line"> ┆ ╰─ Argument 跟随冒号或速记符号
</span><span class="code-line"> ╰─ Name 以 v- 开头使用速记时可以省略
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式基础"><a aria-hidden="true" tabindex="-1" href="#响应式基础"><span class="icon icon-link"></span></a>响应式基础</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明状态"><a aria-hidden="true" tabindex="-1" href="#声明状态"><span class="icon icon-link"></span></a>声明状态</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line highlight-line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line highlight-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="声明方法"><a aria-hidden="true" tabindex="-1" href="#声明方法"><span class="icon icon-link"></span></a>声明方法</h3><div class="wrap-body">
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> {{ count }}
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span></code></pre>
<hr>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line highlight-line"> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line highlight-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
</span><span class="code-line highlight-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="有状态方法"><a aria-hidden="true" tabindex="-1" href="#有状态方法"><span class="icon icon-link"></span></a>有状态方法</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> debounce <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'lodash-es'</span>
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 每个实例都有了自己的预置防抖的处理函数</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">debouncedClick</span> <span class="token operator">=</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token function">unmounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// 最好是在组件卸载时</span>
</span><span class="code-line"> <span class="token comment">// 清除掉防抖计时器</span>
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">debouncedClick</span><span class="token punctuation">.</span><span class="token method function property-access">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">// ... 对点击的响应 ...</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"> <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="api-参考"><a aria-hidden="true" tabindex="-1" href="#api-参考"><span class="icon icon-link"></span></a>API 参考</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="全局-api---应用实例"><a aria-hidden="true" tabindex="-1" href="#全局-api---应用实例"><span class="icon icon-link"></span></a>全局 API - 应用实例</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createApp()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#create-app">#</a></td></tr><tr><td align="left"><code>createSSRApp()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#create-ssr-app">#</a></td></tr><tr><td align="left"><code>app.mount()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-mount">#</a></td></tr><tr><td align="left"><code>app.unmount()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-unmount">#</a></td></tr><tr><td align="left"><code>app.provide()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-provide">#</a></td></tr><tr><td align="left"><code>app.component()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-component">#</a></td></tr><tr><td align="left"><code>app.directive()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-directive">#</a></td></tr><tr><td align="left"><code>app.use()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-use">#</a></td></tr><tr><td align="left"><code>app.mixin()</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-mixin">#</a></td></tr><tr><td align="left"><code>app.version</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-version">#</a></td></tr><tr><td align="left"><code>app.config</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config">#</a></td></tr><tr><td align="left"><code>app.config.errorHandler</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-errorhandler">#</a></td></tr><tr><td align="left"><code>app.config.warnHandler</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-warnhandler">#</a></td></tr><tr><td align="left"><code>app.config.performance</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-performance">#</a></td></tr><tr><td align="left"><code>app.config.compilerOptions</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-compileroptions">#</a></td></tr><tr><td align="left"><code>app.config.globalProperties</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-globalproperties">#</a></td></tr><tr><td align="left"><code>app.config.optionMergeStrategies</code></td><td align="left"><a href="https://cn.vuejs.org/api/application.html#app-config-optionmergestrategies">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="全局-api---通用"><a aria-hidden="true" tabindex="-1" href="#全局-api---通用"><span class="icon icon-link"></span></a>全局 API - 通用</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>version</code></td><td align="left"><a href="https://cn.vuejs.org/api/general.html#version">#</a></td></tr><tr><td align="left"><code>nextTick()</code></td><td align="left"><a href="https://cn.vuejs.org/api/general.html#nexttick">#</a></td></tr><tr><td align="left"><code>defineComponent()</code></td><td align="left"><a href="https://cn.vuejs.org/api/general.html#definecomponent">#</a></td></tr><tr><td align="left"><code>defineAsyncComponent()</code></td><td align="left"><a href="https://cn.vuejs.org/api/general.html#defineasynccomponent">#</a></td></tr><tr><td align="left"><code>defineCustomElement()</code></td><td align="left"><a href="https://cn.vuejs.org/api/general.html#definecustomelement">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---setup"><a aria-hidden="true" tabindex="-1" href="#组合式-api---setup"><span class="icon icon-link"></span></a>组合式 API - setup()</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#basic-usage">#</a></td></tr><tr><td align="left"><code>访问 Props</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#accessing-props">#</a></td></tr><tr><td align="left"><code>Setup 上下文</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#setup-context">#</a></td></tr><tr><td align="left"><code>与渲染函数一起使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---响应式-工具"><a aria-hidden="true" tabindex="-1" href="#组合式-api---响应式-工具"><span class="icon icon-link"></span></a>组合式 API - 响应式: 工具</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>isRef()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#isref">#</a></td></tr><tr><td align="left"><code>unref()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#unref">#</a></td></tr><tr><td align="left"><code>toRef()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#toref">#</a></td></tr><tr><td align="left"><code>toRefs()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#torefs">#</a></td></tr><tr><td align="left"><code>isProxy()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#isproxy">#</a></td></tr><tr><td align="left"><code>isReactive()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#isreactive">#</a></td></tr><tr><td align="left"><code>isReadonly()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="组合式-api---生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#组合式-api---生命周期钩子"><span class="icon icon-link"></span></a>组合式 API - 生命周期钩子</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-3-->
<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>onMounted()</code></td><td align="left">组件挂载完成后执行 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted">#</a></td></tr><tr><td align="left"><code>onUpdated()</code></td><td align="left">状态变更而更新其 DOM 树之后调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onupdated">#</a></td></tr><tr><td align="left"><code>onUnmounted()</code></td><td align="left">组件实例被卸载之后调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted">#</a></td></tr><tr><td align="left"><code>onBeforeMount()</code></td><td align="left">组件被挂载之前被调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforemount">#</a></td></tr><tr><td align="left"><code>onBeforeUpdate()</code></td><td align="left">状态变更而更新其 DOM 树之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforeupdate">#</a></td></tr><tr><td align="left"><code>onBeforeUnmount()</code></td><td align="left">组件实例被卸载之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onbeforeunmount">#</a></td></tr><tr><td align="left"><code>onErrorCaptured()</code></td><td align="left">捕获了后代组件传递的错误时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured">#</a></td></tr><tr><td align="left"><code>onRenderTracked()</code></td><td align="left">组件渲染过程中追踪到响应式依赖时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onrendertracked">#</a></td></tr><tr><td align="left"><code>onRenderTriggered()</code></td><td align="left">响应式依赖的变更触发了组件渲染时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onrendertriggered">#</a></td></tr><tr><td align="left"><code>onActivated()</code></td><td align="left">若组件实例是 &#x3C;KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onactivated">#</a></td></tr><tr><td align="left"><code>onDeactivated()</code></td><td align="left">若组件实例是 &#x3C;KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#ondeactivated">#</a></td></tr><tr><td align="left"><code>onServerPrefetch()</code></td><td align="left">组件实例在服务器上被渲染之前调用 <a href="https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch">#</a></td></tr></tbody></table>
<!--rehype:className=style-list-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---依赖注入"><a aria-hidden="true" tabindex="-1" href="#组合式-api---依赖注入"><span class="icon icon-link"></span></a>组合式 API - 依赖注入</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide()</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide">#</a></td></tr><tr><td align="left"><code>inject()</code></td><td align="left"><a href="https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="组合式-api---响应式-核心"><a aria-hidden="true" tabindex="-1" href="#组合式-api---响应式-核心"><span class="icon icon-link"></span></a>组合式 API - 响应式: 核心</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>ref()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#ref">#</a></td></tr><tr><td align="left"><code>computed ()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#computed">#</a></td></tr><tr><td align="left"><code>reactive()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#reactive">#</a></td></tr><tr><td align="left"><code>readonly()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#readonly">#</a></td></tr><tr><td align="left"><code>watchEffect()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#watcheffect">#</a></td></tr><tr><td align="left"><code>watchPostEffect()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#watchposteffect">#</a></td></tr><tr><td align="left"><code>watchSyncEffect()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#watchsynceffect">#</a></td></tr><tr><td align="left"><code>watch()</code></td><td align="left"><a href="https://cn.vuejs.org/api/reactivity-core.html#watch">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---状态选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---状态选项"><span class="icon icon-link"></span></a>选项式 API - 状态选项</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>data</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#data">#</a></td></tr><tr><td align="left"><code>props</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#props">#</a></td></tr><tr><td align="left"><code>computed</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#computed">#</a></td></tr><tr><td align="left"><code>methods</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#methods">#</a></td></tr><tr><td align="left"><code>watch</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#watch">#</a></td></tr><tr><td align="left"><code>emits</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#emits">#</a></td></tr><tr><td align="left"><code>expose</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-state.html#expose">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="选项式-api---生命周期选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---生命周期选项"><span class="icon icon-link"></span></a>选项式 API - 生命周期选项</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>beforeCreate</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#beforecreate">#</a></td></tr><tr><td align="left"><code>created</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#created">#</a></td></tr><tr><td align="left"><code>beforeMount</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#beforemount">#</a></td></tr><tr><td align="left"><code>mounted</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#mounted">#</a></td></tr><tr><td align="left"><code>beforeUpdate</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#beforeupdate">#</a></td></tr><tr><td align="left"><code>updated</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#updated">#</a></td></tr><tr><td align="left"><code>beforeUnmount</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#beforeunmount">#</a></td></tr><tr><td align="left"><code>unmounted</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#unmounted">#</a></td></tr><tr><td align="left"><code>errorCaptured</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#errorcaptured">#</a></td></tr><tr><td align="left"><code>renderTracked</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#rendertracked">#</a></td></tr><tr><td align="left"><code>renderTriggered</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#rendertriggered-sup-classvt-badge-dev-only">#</a></td></tr><tr><td align="left"><code>activated</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#activated">#</a></td></tr><tr><td align="left"><code>deactivated</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#deactivated">#</a></td></tr><tr><td align="left"><code>serverPrefetch</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---其他杂项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---其他杂项"><span class="icon icon-link"></span></a>选项式 API - 其他杂项</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>name</code></td><td align="left">显式声明组件展示时的名称 <a href="https://cn.vuejs.org/api/options-misc.html#name">#</a></td></tr><tr><td align="left"><code>inheritAttrs</code></td><td align="left">默认的组件 <code>attribute</code> 透传行为 <a href="https://cn.vuejs.org/api/options-misc.html#inheritattrs">#</a></td></tr><tr><td align="left"><code>components</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-misc.html#components">#</a></td></tr><tr><td align="left"><code>directives</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-misc.html#directives">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---渲染选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---渲染选项"><span class="icon icon-link"></span></a>选项式 API - 渲染选项</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>template</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-rendering.html#template">#</a></td></tr><tr><td align="left"><code>render</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-rendering.html#render">#</a></td></tr><tr><td align="left"><code>compilerOptions</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-rendering.html#compileroptions">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="选项式-api---组件实例"><a aria-hidden="true" tabindex="-1" href="#选项式-api---组件实例"><span class="icon icon-link"></span></a>选项式 API - 组件实例</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>$data</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#data">#</a></td></tr><tr><td align="left"><code>$props</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#props">#</a></td></tr><tr><td align="left"><code>$el</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#el">#</a></td></tr><tr><td align="left"><code>$options</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#options">#</a></td></tr><tr><td align="left"><code>$parent</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#parent">#</a></td></tr><tr><td align="left"><code>$root</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#root">#</a></td></tr><tr><td align="left"><code>$slots</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#slots">#</a></td></tr><tr><td align="left"><code>$refs</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#refs">#</a></td></tr><tr><td align="left"><code>$attrs</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#attrs">#</a></td></tr><tr><td align="left"><code>$watch()</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#watch">#</a></td></tr><tr><td align="left"><code>$emit()</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#emit">#</a></td></tr><tr><td align="left"><code>$forceUpdate()</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#forceupdate">#</a></td></tr><tr><td align="left"><code>$nextTick()</code></td><td align="left"><a href="https://cn.vuejs.org/api/component-instance.html#nexttick">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="选项式-api---组合选项"><a aria-hidden="true" tabindex="-1" href="#选项式-api---组合选项"><span class="icon icon-link"></span></a>选项式 API - 组合选项</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>provide</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-composition.html#provide">#</a></td></tr><tr><td align="left"><code>inject</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-composition.html#inject">#</a></td></tr><tr><td align="left"><code>mixins</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-composition.html#mixins">#</a></td></tr><tr><td align="left"><code>extends</code></td><td align="left"><a href="https://cn.vuejs.org/api/options-composition.html#extends">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="内置内容---指令"><a aria-hidden="true" tabindex="-1" href="#内置内容---指令"><span class="icon icon-link"></span></a>内置内容 - 指令</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>v-text</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-text">#</a></td></tr><tr><td align="left"><code>v-html</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-html">#</a></td></tr><tr><td align="left"><code>v-show</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-show">#</a></td></tr><tr><td align="left"><code>v-if</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-if">#</a></td></tr><tr><td align="left"><code>v-else</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-else">#</a></td></tr><tr><td align="left"><code>v-else-if</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-else-if">#</a></td></tr><tr><td align="left"><code>v-for</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-for">#</a></td></tr><tr><td align="left"><code>v-on</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-on">#</a></td></tr><tr><td align="left"><code>v-bind</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-bind">#</a></td></tr><tr><td align="left"><code>v-model</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-model">#</a></td></tr><tr><td align="left"><code>v-slot</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-slot">#</a></td></tr><tr><td align="left"><code>v-pre</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-pre">#</a></td></tr><tr><td align="left"><code>v-once</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-once">#</a></td></tr><tr><td align="left"><code>v-memo</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-memo">#</a></td></tr><tr><td align="left"><code>v-cloak</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-directives.html#v-cloak">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---组件"><a aria-hidden="true" tabindex="-1" href="#内置内容---组件"><span class="icon icon-link"></span></a>内置内容 - 组件</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;Transition></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-components.html#transition">#</a></td></tr><tr><td align="left"><code>&#x3C;TransitionGroup></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-components.html#transitiongroup">#</a></td></tr><tr><td align="left"><code>&#x3C;KeepAlive></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-components.html#keepalive">#</a></td></tr><tr><td align="left"><code>&#x3C;Teleport></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-components.html#teleport">#</a></td></tr><tr><td align="left"><code>&#x3C;Suspense></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-components.html#suspense">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---特殊-attributes"><a aria-hidden="true" tabindex="-1" href="#内置内容---特殊-attributes"><span class="icon icon-link"></span></a>内置内容 - 特殊 Attributes</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>key</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-special-attributes.html#key">#</a></td></tr><tr><td align="left"><code>ref</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-special-attributes.html#ref">#</a></td></tr><tr><td align="left"><code>is</code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-special-attributes.html#is">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="内置内容---特殊元素"><a aria-hidden="true" tabindex="-1" href="#内置内容---特殊元素"><span class="icon icon-link"></span></a>内置内容 - 特殊元素</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;component></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-special-elements.html#component">#</a></td></tr><tr><td align="left"><code>&#x3C;slot></code></td><td align="left"><a href="https://cn.vuejs.org/api/built-in-special-elements.html#slot">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="单文件组件---语法定义"><a aria-hidden="true" tabindex="-1" href="#单文件组件---语法定义"><span class="icon icon-link"></span></a>单文件组件 - 语法定义</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>总览</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#overview">#</a></td></tr><tr><td align="left"><code>相应语言块</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#language-blocks">#</a></td></tr><tr><td align="left"><code>自动名称推导</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#automatic-name-inference">#</a></td></tr><tr><td align="left"><code>预处理器</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#pre-processors">#</a></td></tr><tr><td align="left"><code>Src 导入</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#src-imports">#</a></td></tr><tr><td align="left"><code>注释</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-spec.html#comments">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="单文件组件---script-setup"><a aria-hidden="true" tabindex="-1" href="#单文件组件---script-setup"><span class="icon icon-link"></span></a>单文件组件 - &#x3C;script setup></h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>基本语法</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#basic-syntax">#</a></td></tr><tr><td align="left"><code>响应式</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#reactivity">#</a></td></tr><tr><td align="left"><code>使用组件</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#using-components">#</a></td></tr><tr><td align="left"><code>使用自定义指令</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#using-custom-directives">#</a></td></tr><tr><td align="left"><code>defineProps() 和 defineEmits()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits">#</a></td></tr><tr><td align="left"><code>defineExpose</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose">#</a></td></tr><tr><td align="left"><code>useSlots() 和 useAttrs()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#useslots-useattrs">#</a></td></tr><tr><td align="left"><code>与普通的 &#x26;lt;script&#x26;gt; 一起使用</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script">#</a></td></tr><tr><td align="left"><code>顶层 await</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await">#</a></td></tr><tr><td align="left"><code>针对 TypeScript 的功能</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#typescript-only-features">#</a></td></tr><tr><td align="left"><code>限制</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-script-setup.html#restrictions">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="单文件组件---css-功能"><a aria-hidden="true" tabindex="-1" href="#单文件组件---css-功能"><span class="icon icon-link"></span></a>单文件组件 - CSS 功能</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>组件作用域 CSS</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#scoped-css">#</a></td></tr><tr><td align="left"><code>CSS Modules</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#css-modules">#</a></td></tr><tr><td align="left"><code>CSS 中的 v-bind()</code></td><td align="left"><a href="https://cn.vuejs.org/api/sfc-css-features.html#v-bind-in-css">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---渲染函数"><a aria-hidden="true" tabindex="-1" href="#进阶-api---渲染函数"><span class="icon icon-link"></span></a>进阶 API - 渲染函数</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>h()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#h">#</a></td></tr><tr><td align="left"><code>mergeProps()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#mergeprops">#</a></td></tr><tr><td align="left"><code>cloneVNode()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#clonevnode">#</a></td></tr><tr><td align="left"><code>isVNode()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#isvnode">#</a></td></tr><tr><td align="left"><code>resolveComponent()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#resolvecomponent">#</a></td></tr><tr><td align="left"><code>resolveDirective()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#resolvedirective">#</a></td></tr><tr><td align="left"><code>withDirectives()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#withdirectives">#</a></td></tr><tr><td align="left"><code>withModifiers()</code></td><td align="left"><a href="https://cn.vuejs.org/api/render-function.html#withmodifiers">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---服务端渲染"><a aria-hidden="true" tabindex="-1" href="#进阶-api---服务端渲染"><span class="icon icon-link"></span></a>进阶 API - 服务端渲染</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>renderToString()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertostring">#</a></td></tr><tr><td align="left"><code>renderToNodeStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertonodestream">#</a></td></tr><tr><td align="left"><code>pipeToNodeWritable()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#pipetonodewritable">#</a></td></tr><tr><td align="left"><code>renderToWebStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertowebstream">#</a></td></tr><tr><td align="left"><code>pipeToWebWritable()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#pipetowebwritable">#</a></td></tr><tr><td align="left"><code>renderToSimpleStream()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#rendertosimplestream">#</a></td></tr><tr><td align="left"><code>useSSRContext()</code></td><td align="left"><a href="https://cn.vuejs.org/api/ssr.html#usessrcontext">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---typescript-工具类型"><a aria-hidden="true" tabindex="-1" href="#进阶-api---typescript-工具类型"><span class="icon icon-link"></span></a>进阶 API - TypeScript 工具类型</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>PropType&#x3C;T></code></td><td align="left"><a href="https://cn.vuejs.org/api/utility-types.html#proptypet">#</a></td></tr><tr><td align="left"><code>ComponentCustomProperties</code></td><td align="left"><a href="https://cn.vuejs.org/api/utility-types.html#componentcustomproperties">#</a></td></tr><tr><td align="left"><code>ComponentCustomOptions</code></td><td align="left"><a href="https://cn.vuejs.org/api/utility-types.html#componentcustomoptions">#</a></td></tr><tr><td align="left"><code>ComponentCustomProps</code></td><td align="left"><a href="https://cn.vuejs.org/api/utility-types.html#componentcustomprops">#</a></td></tr><tr><td align="left"><code>CSSProperties</code></td><td align="left"><a href="https://cn.vuejs.org/api/utility-types.html#cssproperties">#</a></td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="进阶-api---自定义渲染"><a aria-hidden="true" tabindex="-1" href="#进阶-api---自定义渲染"><span class="icon icon-link"></span></a>进阶 API - 自定义渲染</h3><div class="wrap-body">
<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>createRenderer()</code></td><td align="left"><a href="https://cn.vuejs.org/api/custom-renderer.html#create-renderer">#</a></td></tr></tbody></table>
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://cn.vuejs.org/">Vue 3.x 官方文档</a></li>
<li><a href="https://router.vuejs.org/zh/">Vue Router 4.x 官方文档</a></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer><script>
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
window.onhashchange = function () {
anchorPoint()
updateAnchor()
};
}
function anchorPoint() {
const hash = window.location.hash?.replace(/^#/, '') || '';
const elm = document.getElementById(decodeURIComponent(hash));
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
if (elm?.tagName === 'H3') {
elm?.parentElement?.parentElement?.classList.add('active');
}
}
anchorPoint();
function updateAnchor(element) {
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
anchorContainer.forEach((tocanchor) => {
tocanchor.classList.remove('is-active-link');
});
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
if (anchor) {
anchor.classList.add('is-active-link');
}
}
// toc 定位
updateAnchor()
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
anchor.forEach((item) => {
item.addEventListener('click', (e) => {
updateAnchor()
})
})
</script></body>
</html>
Reference in New Issue View Git Blame Copy Permalink