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

doc: Update README.md #786 0d7f6653b6

Browse Source
This commit is contained in:
jaywcjlove
2024-07-08 17:18:48 +00:00
parent 9159d4f54d
commit 79ff7f35e3
5 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
CONTRIBUTORS.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 MiB

After

Width:  |  Height:  |  Size: 10 MiB

2
data.js
View File

File diff suppressed because one or more lines are too long

2
data.json
View File

File diff suppressed because one or more lines are too long

58
docs/vue.html
View File

@ -414,48 +414,48 @@
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
</div></div></div><div class="wrap h3body-not-exist col-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=col-span-2-->
</div></div></div><div class="wrap h3body-not-exist col-span-2 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=col-span-2 row-span-2-->
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>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>h1</span><span class="token punctuation">></span></span> {{ count1 }} <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</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>h1</span><span class="token punctuation">></span></span> {{ count2 }} <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count1++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count1<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>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>count2++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count2<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>h1</span><span class="token punctuation">></span></span> {{ count1 }} <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</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>h1</span><span class="token punctuation">></span></span> {{ count2 }} <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>h1</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>count1++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count1<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>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>count2++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>count2<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><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 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> watch<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> count1 <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> count2 <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></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>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 监听的表达式或函数</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></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">count1</span><span class="token operator">:</span> count1<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 literal-property property">count2</span><span class="token operator">:</span> count2<span class="token punctuation">.</span><span class="token property-access">value</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 回调函数</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 parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token arrow 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 comment">// 在这里执行需要的逻辑</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><span class="token string">'count1 或 count2 变化了：'</span><span class="token punctuation">,</span> newValue<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 class="token comment">// immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。</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">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</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 class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> watch<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> count1 <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> count2 <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></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>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 监听的表达式或函数</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></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">count1</span><span class="token operator">:</span> count1<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 literal-property property">count2</span><span class="token operator">:</span> count2<span class="token punctuation">.</span><span class="token property-access">value</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// 回调函数</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 parameter">newValue<span class="token punctuation">,</span> oldValue</span><span class="token punctuation">)</span> <span class="token arrow 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 comment">// 在这里执行需要的逻辑</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><span class="token string">'count1 或 count2 变化了：'</span><span class="token punctuation">,</span> newValue<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 class="token comment">// immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token comment">// deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。</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">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">deep</span><span class="token operator">:</span> <span class="token boolean">true</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"><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></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 class="wrap h3body-not-exist col-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=col-span-2-->
</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>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> 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 class="token comment">// computed 的回调函数里，会根据已有并用到的状态计算出新的状态</span>
</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 comment">// 会根据已有并用到的状态计算出新的状态</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>

4
index.html
View File

@ -1004,7 +1004,7 @@
<a href="https://github.com/pangxiaoli" title="pangxiaoli"><img src="https://avatars.githubusercontent.com/u/54620953?v=4" width="42;" alt="pangxiaoli"></a>
<a href="https://github.com/mancuoj" title="mancuoj"><img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"></a>
<a href="https://github.com/1834423612" title="kjch"><img src="https://avatars.githubusercontent.com/u/49981661?v=4" width="42;" alt="kjch"></a>
<a href="https://github.com/greyhao" title="greyhao"><img src="https://avatars.githubusercontent.com/u/107107440?v=4" width="42;" alt="greyhao"></a>
<a href="https://github.com/greyhao" title="redear_dev"><img src="https://avatars.githubusercontent.com/u/107107440?v=4" width="42;" alt="redear_dev"></a>
<a href="https://github.com/findnr" title="findnr"><img src="https://avatars.githubusercontent.com/u/3909023?v=4" width="42;" alt="findnr"></a>
<a href="https://github.com/XYZscratcher" title="XYZ"><img src="https://avatars.githubusercontent.com/u/108533817?v=4" width="42;" alt="XYZ"></a>
<a href="https://github.com/SuperDiscovery" title="SuperDiscovery"><img src="https://avatars.githubusercontent.com/u/49646863?v=4" width="42;" alt="SuperDiscovery"></a>
@ -1456,7 +1456,7 @@
<li><a href="https://marketplace.visualstudio.com/items?itemName=jackiotyu.quick-reference">Quick Reference for VSCode</a> 由 <a href="https://github.com/jackiotyu/vscode-quick-reference">jackiotyu</a> 提供</li>
</ul>
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2024/07/09 01:12:50</footer></footer><script src="data.js?v=1.5.5" defer></script><script src="js/fuse.min.js?v=1.5.5" defer></script><script src="js/main.js?v=1.5.5" 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 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2024/07/09 01:17:52</footer></footer><script src="data.js?v=1.5.5" defer></script><script src="js/fuse.min.js?v=1.5.5" defer></script><script src="js/main.js?v=1.5.5" 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="搜索" autocomplete="off"><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>