mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
feat: add es6.md cheatsheet. b258494776
This commit is contained in:
jaywcjlove
@ -34,7 +34,7 @@
|
||||
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 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">
|
||||
</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>
|
||||
@ -42,8 +42,8 @@
|
||||
<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></div></div><div class="h1wrap-body"><div class="wrap"><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"><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">
|
||||
</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></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></li>
|
||||
@ -51,7 +51,7 @@
|
||||
</ul>
|
||||
<!--rehype:className=style-round-->
|
||||
<p>注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本</p>
|
||||
</div></div></div><div class="wrap 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">
|
||||
</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
|
||||
@ -80,7 +80,7 @@
|
||||
<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 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">
|
||||
</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">
|
||||
@ -98,7 +98,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</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"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</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"><</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"></</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"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
@ -113,7 +113,7 @@
|
||||
</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"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</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"><</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>
|
||||
@ -127,30 +127,30 @@
|
||||
</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"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
</div></div></div></div></div><div class="wrap"><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"><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">
|
||||
</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"><</span>span</span><span class="token punctuation">></span></span>Message: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</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 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">
|
||||
</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"><</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"></</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"><</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"><</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"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><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">
|
||||
</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"><</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"></</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"><</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"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>button</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<!--rehype:className=wrap-text -->
|
||||
</div></div></div><div class="wrap 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">
|
||||
</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>
|
||||
@ -164,55 +164,55 @@
|
||||
<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"><</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"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><!-- 这是一个语句，而非表达式 --></span>
|
||||
</span><span class="code-line">{{ var a = 1 }}
|
||||
</span><span class="code-line"><span class="token comment"><!-- 条件控制也不支持，请使用三元表达式 --></span>
|
||||
</span><span class="code-line">{{ if (ok) { return message } }}
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>span</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>这里的 <code>attributeName</code> 会作为一个 JS 表达式被动态执行</p>
|
||||
</div></div></div><div class="wrap"><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">
|
||||
</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"><</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"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 简写 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><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">
|
||||
</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"><</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"></</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"><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">
|
||||
</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表达式
|
||||
@ -233,8 +233,6 @@ function anchorPoint() {
|
||||
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||||
if (elm?.tagName === 'H3') {
|
||||
elm?.parentElement?.parentElement?.classList.add('active');
|
||||
const box = elm?.parentElement?.parentElement;
|
||||
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
|
||||
}
|
||||
}
|
||||
anchorPoint();
|
||||
@ -245,7 +243,6 @@ function updateAnchor(element) {
|
||||
tocanchor.classList.remove('is-active-link');
|
||||
});
|
||||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||||
console.log('anchor', anchor)
|
||||
if (anchor) {
|
||||
anchor.classList.add('is-active-link');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user