doc: update vue.md #154 #10 1f73708838

docs/vue.html

@@ -149,16 +149,16 @@
 </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-->
 <p>通过不带参数的 <code>v-bind</code>，你可以将它们绑定到单个元素上</p>
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">  import comp from "./Comp.vue"
+</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">comp</span> <span class="token keyword module">from</span> <span class="token string">"./Comp.vue"</span>
-</span><span class="code-line">  import {ref} from "vue"
+</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 class="code-line">  const a = ref("hello")
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">  <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span>
-</span><span class="code-line">  const b = ref("world")
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">  <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">)</span>
-</span><span class="code-line">&#x3C;/script>
+</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">&#x3C;template>
+</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">  &#x3C;comp v-bind="{a, b}">&#x3C;/comp>
+</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>comp</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>{a, b}<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>comp</span><span class="token punctuation">></span></span>
-</span><span class="code-line">&#x3C;/template>
+</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>如果你是使用的 <code>setup</code> 语法糖。需要使用 <code>defineprops</code> 声名（可以直接使用<code>a</code>/<code>b</code>）</p>
 <pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
@@ -350,47 +350,47 @@
 </span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><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><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { ref } from 'vue'
+</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 class="code-line">const open = ref(false);
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> open <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</span><span class="code-line">&#x3C;/script>
+</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">&#x3C;template>
+</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">  &#x3C;button @click="open = !open">Toggle&#x3C;/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 attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>open = !open<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle<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">  &#x3C;div>Hello Vue!&#x3C;/div>  
+</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>Hello Vue!<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">&#x3C;/template>
+</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><span class="code-line">&#x3C;style scope>
+</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
-</span><span class="code-line">  div{
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">  <span class="token selector">div</span><span class="token punctuation">{</span>
-</span><span class="code-line">    transition: height 0.1s linear;
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">    <span class="token property">transition</span><span class="token punctuation">:</span> height <span class="token number">0.1</span><span class="token unit">s</span> linear<span class="token punctuation">;</span>
-</span><span class="code-line">    overflow: hidden;
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">    <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
-</span><span class="code-line">    height: v-bind(open ? '30px' : '0px');
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">v-bind</span><span class="token punctuation">(</span>open ? <span class="token string">'30px'</span> <span class="token punctuation">:</span> <span class="token string">'0px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-</span><span class="code-line">  }
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css">  <span class="token punctuation">}</span>
-</span><span class="code-line">&#x3C;/style>
+</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>style</span><span class="token punctuation">></span></span>
 </span></code></pre>
 </div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式进阶--watch和computed"><a aria-hidden="true" tabindex="-1" href="#响应式进阶--watch和computed"><span class="icon icon-link"></span></a>响应式进阶 —— watch和computed</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><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { ref, watch } from 'vue';
+</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> watch <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> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</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> isEvent <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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">function</span> <span class="token function">increment</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">  state<span class="token punctuation">.</span><span class="token property-access">count</span><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><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</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">  isEvent<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> count<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</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></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">const count = ref(0)
+</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">const isEvent = ref(false)
+</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>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line">
-</span><span class="code-line">function increment() {
-</span><span class="code-line">  state.count++
-</span><span class="code-line">}
-</span><span class="code-line">
-</span><span class="code-line">watch(count, function() {
-</span><span class="code-line">  isEvent.value = count.value % 2 === 0
-</span><span class="code-line">})
-</span><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;button @click="increment">
 </span><span class="code-line">    {{ count }}
-</span><span class="code-line">  &#x3C;/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><span class="code-line">  &#x3C;p>is event: {{ isEvent ? 'yes' : 'no' }}&#x3C;/p>
+</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>is event: {{ isEvent ? 'yes' : 'no' }}<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">&#x3C;/template>
+</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>
 </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-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@@ -401,109 +401,109 @@
 </span><span class="code-line"><span class="token punctuation">}</span><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><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { ref, computed } from 'vue';
+</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> computed <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> text <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</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 comment">// computed 的回调函数里，会根据已有并用到的状态计算出新的状态</span>
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> capital <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token keyword">function</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> text<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</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 punctuation">}</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><span class="code-line">
-</span><span class="code-line">const text = ref('')
+</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><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
+</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>to capital: {{ capital }}<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">const capital = computed(function(){
+</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">  return text.value.toUpperCase();
-</span><span class="code-line">})
-</span><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;input v-model="text" />
-</span><span class="code-line">  &#x3C;p>to capital: {{ capital }}&#x3C;/p>
-</span><span class="code-line">&#x3C;/template>
 </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="defineprops"><a aria-hidden="true" tabindex="-1" href="#defineprops"><span class="icon icon-link"></span></a>defineProps</h3><div class="wrap-body">
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { defineProps } from 'vue';
+</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> defineProps <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 comment">// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力</span>
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineProps</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 literal-property property">username</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</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></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">// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
+</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">defineProps({
+</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>username: {{ username }}<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">  username: String
+</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><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;p>username: {{ username }}&#x3C;/p>
-</span><span class="code-line">&#x3C;/template>
 </span></code></pre>
 <p>子组件定义需要的参数</p>
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">const username = 'vue'
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token string">'vue'</span>
-</span><span class="code-line">&#x3C;/script>
+</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">&#x3C;template>
+</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">  &#x3C;children :username="username" />
+</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">:username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">&#x3C;/template>
+</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>父组件参入参数</p>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineemits"><a aria-hidden="true" tabindex="-1" href="#defineemits"><span class="icon icon-link"></span></a>defineEmits</h3><div class="wrap-body">
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { defineEmits, ref } from 'vue';
+</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> defineEmits<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>
+</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> emit <span class="token operator">=</span> <span class="token function">defineEmits</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'search'</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></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</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> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</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 function">emit</span><span class="token punctuation">(</span><span class="token string">'search'</span><span class="token punctuation">,</span> keyword<span class="token punctuation">.</span><span class="token property-access">value</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 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">const emit = defineEmits(['search'])
+</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><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">const keyword = ref('')
+</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>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<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">const onSearch = function() {
-</span><span class="code-line">  emit('search', keyword.value)
-</span><span class="code-line">}
-</span><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;input v-model="keyword" />
-</span><span class="code-line">  &#x3C;button @click="onSearch">search&#x3C;/button>
-</span><span class="code-line">&#x3C;/template>
 </span></code></pre>
 <p>子组件定义支持 <code>emit</code> 的函数</p>
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">const onSearch = function(keyword){
+</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">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">keyword</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-</span><span class="code-line">  console.log(keyword)
+</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>keyword<span class="token punctuation">)</span>
-</span><span class="code-line">}
+</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
-</span><span class="code-line">&#x3C;/script>
+</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">&#x3C;template>
+</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">  &#x3C;children @search="onSearch" />
+</span><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">&#x3C;/template>
+</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>父组件绑定子组件定义的事件</p>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineexpose"><a aria-hidden="true" tabindex="-1" href="#defineexpose"><span class="icon icon-link"></span></a>defineExpose</h3><div class="wrap-body">
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { defineExpose, ref } from 'vue';
+</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> defineExpose<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>
+</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> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</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> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</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 console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token property-access">value</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 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 function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span> onSearch <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></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">const keyword = ref('')
+</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><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">const onSearch = function() {
+</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">  console.log(keyword.value)
-</span><span class="code-line">}
-</span><span class="code-line">
-</span><span class="code-line">defineExpose({ onSearch })
-</span><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;input v-model="keyword" />
-</span><span class="code-line">&#x3C;/template>
 </span></code></pre>
 <p>子组件对父组件暴露方法</p>
-<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
+<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 class="code-line">import { ref } from 'vue'  
+</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> childrenRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</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> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</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">  childrenRef<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">onSearch</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 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">const childrenRef = ref(null)
+</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><span class="code-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>childrenRef<span class="token punctuation">'</span></span> <span class="token punctuation">/></span></span>
-</span><span class="code-line">const onSearch = function(){
+</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>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<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">  childrenRef.value.onSearch()
+</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><span class="code-line">&#x3C;/script>
-</span><span class="code-line">
-</span><span class="code-line">&#x3C;template>
-</span><span class="code-line">  &#x3C;children ref='childrenRef' />
-</span><span class="code-line">  &#x3C;button @click="onSearch">search&#x3C;/button>
-</span><span class="code-line">&#x3C;/template>
 </span></code></pre>
 <p>父组件调用子组件的方法</p>
 </div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="provide--inject"><a aria-hidden="true" tabindex="-1" href="#provide--inject"><span class="icon icon-link"></span></a>Provide / Inject</h3><div class="wrap-body">

index.html

@@ -689,7 +689,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/21 14:36:37</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
+</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/21 14:38:58</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
   <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
 </svg><input id="mysearch-input" type="search" placeholder="搜索备忘清单"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
 </html>