buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: Update vue.md (#962) 582d26a6d9

Browse Source
This commit is contained in:
jaywcjlove
2025-05-08 10:33:00 +00:00
parent 59d6176dfe
commit 5622d55656
5 changed files with 217 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
docs/vue.html
View File

@ -672,51 +672,13 @@
</ul>
<!--rehype:className=style-list-arrow-->
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="3路由的query"><a aria-hidden="true" tabindex="-1" href="#3路由的query"><span class="icon icon-link"></span></a>3.路由的query</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>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token comment">&#x3C;!-- to的对象写法 --></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of data<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>router-link</span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> path:'/home/message/mes',
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> query: { id:item.id, title:item.mes }
</span></span></span><span class="code-line"><span class="token tag"><span class="token attr-value"> }<span class="token punctuation">"</span></span>
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>{{item.mes}}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>router-link</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>li</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>ul</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>hr</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>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>router-view</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><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>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">export</span> <span class="token keyword module">default</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">name</span><span class="token operator">:</span><span class="token string">'HomeChild1'</span><span class="token punctuation">,</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">data</span><span class="token operator">:</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 literal-property property">id</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token literal-property property">mes</span><span class="token operator">:</span><span class="token string">"消息1"</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 literal-property property">id</span><span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token literal-property property">mes</span><span class="token operator">:</span><span class="token string">"消息2"</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 literal-property property">id</span><span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token literal-property property">mes</span><span class="token operator">:</span><span class="token string">"消息3"</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 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 class="token punctuation">}</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> useRoute <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue-router'</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> route <span class="token operator">=</span> <span class="token function">useRoute</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></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 tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.list</span></span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span><span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector"><span class="token class">.link</span></span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">orange</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">skyblue</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
</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>
<blockquote>
<p>接收参数 <code>{{$route.query.id}}</code></p>
<p>接收参数 <code>{{route.query.id}}</code></p>
</blockquote>
<h4 id="跳转路由并携带参数"><a aria-hidden="true" tabindex="-1" href="#跳转路由并携带参数"><span class="icon icon-link"></span></a>跳转路由并携带参数</h4>
<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>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item of data<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>