doc: update vue.md #125 37d647eb67

docs/vue.html

@@ -196,32 +196,37 @@
 </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">
+</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">
-<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>script setup<span class="token operator">></span>
+<!--rehype:wrap-class=row-span-2-->
-</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
+<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>script</span> <span class="token attr-name">setup</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> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
+</span></span></span><span class="code-line"><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 function-variable function">onClick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<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></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><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
-</span><span class="code-line">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</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>onClick<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>click<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 punctuation">}</span>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
-</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
-</span><span class="code-line">
-</span><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
-</span><span class="code-line">  <span class="token operator">&#x3C;</span>button @click<span class="token operator">=</span><span class="token string">"onClick"</span><span class="token operator">></span>click<span class="token operator">&#x3C;</span><span class="token operator">/</span>button<span class="token operator">></span>
-</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></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">
+</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">
-<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>script setup<span class="token operator">></span>
+<!--rehype:wrap-class=row-span-2-->
-</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
+<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">setup</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> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
+</span></span></span><span class="code-line"><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 function-variable function">onClick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">msg<span class="token punctuation">,</span> e</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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">,</span> e<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></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><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">msg<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
-</span><span class="code-line">  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">,</span> e<span class="token punctuation">)</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>onClick('Hello Vue!', $event)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line"><span class="token punctuation">}</span>
+</span><span class="code-line">    click
-</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></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 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>template</span><span class="token punctuation">></span></span>
-</span><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
-</span><span class="code-line">  <span class="token operator">&#x3C;</span>button @click<span class="token operator">=</span><span class="token string">"onClick('Hello Vue!', $event)"</span><span class="token operator">></span>click<span class="token operator">&#x3C;</span><span class="token operator">/</span>button<span class="token operator">></span>
-</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
 </span></code></pre>
+<!--rehype:className=wrap-text-->
 </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>
@@ -250,20 +255,22 @@
 </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="自定义指令-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 row-span-2"><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-js"><code class="language-js code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>script setup<span class="token operator">></span>
+<!--rehype:wrap-class=row-span-2-->
-</span><span class="code-line"><span class="token keyword">const</span> vAdmin <span class="token operator">=</span> <span class="token punctuation">{</span>
+<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">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
-</span><span class="code-line">  <span class="token function">created</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding<span class="token punctuation">,</span> vnode<span class="token punctuation">,</span> prevVnode</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">const</span> vAdmin <span class="token operator">=</span> <span class="token punctuation">{</span>
-</span><span class="code-line">    el<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> isAdmin <span class="token operator">?</span> <span class="token string">'block'</span> <span class="token operator">:</span> <span class="token string">'none'</span>
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">  <span class="token function">created</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding<span class="token punctuation">,</span> vnode<span class="token punctuation">,</span> prevVnode</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></span><span class="code-line"><span class="token script"><span class="token language-javascript">    el<span class="token punctuation">.</span><span class="token property-access">style</span><span class="token punctuation">.</span><span class="token property-access">display</span> <span class="token operator">=</span> isAdmin <span class="token operator">?</span> <span class="token string">'block'</span> <span class="token operator">:</span> <span class="token string">'none'</span>
-</span><span class="code-line"><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><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></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></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><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
-</span><span class="code-line">  <span class="token operator">&#x3C;</span>button v<span class="token operator">-</span>admin<span class="token operator">></span><span class="token maybe-class-name">Settings</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>button<span class="token operator">></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">v-admin</span><span class="token punctuation">></span></span>Settings<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 operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
 </span></code></pre>
-<p>更多指令函数参考：<a href="https://vuejs.org/guide/reusability/custom-directives.html">https://vuejs.org/guide/reusability/custom-directives.html</a></p>
+<!--rehype:className=wrap-text-->
+<p>更多<a href="https://vuejs.org/guide/reusability/custom-directives.html">指令函数参考</a></p>
 </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>{{ state.count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
@@ -310,7 +317,6 @@
 </span></code></pre>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="script-setup-setup语法糖"><a aria-hidden="true" tabindex="-1" href="#script-setup-setup语法糖"><span class="icon icon-link"></span></a><code>&#x3C;script setup></code> setup语法糖</h3><div class="wrap-body">
 <pre class="language-html"><code class="language-html code-highlight"><span class="code-line highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</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 comment">// setup语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时</span>
 </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> reactive <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</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><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</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 class="token punctuation">)</span>
@@ -326,6 +332,7 @@
 </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>template</span><span class="token punctuation">></span></span>
 </span></code></pre>
+<p><strong><code>setup</code></strong> 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时</p>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="用-ref-定义响应式变量"><a aria-hidden="true" tabindex="-1" href="#用-ref-定义响应式变量"><span class="icon icon-link"></span></a>用 <code>ref()</code> 定义响应式变量</h3><div class="wrap-body">
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`</span>
 </span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>

index.html

@@ -458,6 +458,9 @@
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq">
 </a>
+<a href="https://github.com/Alex-Programer" title="Alex">
+  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex">
+</a>
 <a href="https://github.com/mofelee" title="mofelee">
   <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee">
 </a>
@@ -473,15 +476,15 @@
 <a href="https://github.com/13812700839" title="花殇">
   <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇">
 </a>
-<a href="https://github.com/Alex-Programer" title="Alex">
-  <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex">
-</a>
 <a href="https://github.com/Smartdousha" title="Anko">
   <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko">
 </a>
 <a href="https://github.com/CharlotteZeng" title="Chart">
   <img src="https://avatars.githubusercontent.com/u/19461184?v=4" width="42;" alt="Chart">
 </a>
+<a href="https://github.com/DaiNing810" title="DaiN">
+  <img src="https://avatars.githubusercontent.com/u/94962339?v=4" width="42;" alt="DaiN">
+</a>
 <a href="https://github.com/demigodliu" title="DemigodLiu">
   <img src="https://avatars.githubusercontent.com/u/30372735?v=4" width="42;" alt="DemigodLiu">
 </a>
@@ -562,7 +565,7 @@
 <!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
 <p>如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
 
-</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/18 04:31:52</footer></footer><script>
+</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/11/18 04:40:19</footer></footer><script>
 if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
   window.onhashchange = function () {
     anchorPoint()