mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
doc: update vue2.md. (#5) 518249913e
This commit is contained in:
jaywcjlove
499
docs/vue2.html
499
docs/vue2.html
@ -39,10 +39,11 @@
|
||||
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||||
<p>Vue 是一套用于构建用户界面的渐进式框架</p>
|
||||
<ul>
|
||||
<ul class="style-round">
|
||||
<li><a href="https://v2.cn.vuejs.org/">Vue 2.x 官方文档</a></li>
|
||||
<li><a href="https://v3.router.vuejs.org/">Vue Router 3.x 官方文档</a></li>
|
||||
</ul>
|
||||
<!--rehype:className=style-round-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="快速创建-vue-项目-vue-cli"><a aria-hidden="true" tabindex="-1" href="#快速创建-vue-项目-vue-cli"><span class="icon icon-link"></span></a>快速创建 <strong>Vue</strong> 项目 (<a href="https://cli.vuejs.org/zh/guide/creating-a-project.html">Vue CLI</a>)</h4><div class="wrap-body">
|
||||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">npx @vue/cli create hello-world
|
||||
</span></code></pre>
|
||||
@ -51,6 +52,7 @@
|
||||
</span><span class="code-line"> {{ message }}
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -67,6 +69,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -93,6 +96,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-2'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -106,6 +110,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>现在你看到我了<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-3'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -123,6 +128,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app4 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-4'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -142,6 +148,7 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> app5 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#app-5'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -517,9 +524,9 @@
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment">// 也可以用 JavaScript 直接调用方法</span>
|
||||
</span><span class="code-line">example2<span class="token punctuation">.</span><span class="token method function property-access">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// => 'Hello Vue.js!'</span>
|
||||
</span></code></pre>
|
||||
<p>也可以用 JavaScript 直接调用方法</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">example2<span class="token punctuation">.</span><span class="token method function property-access">greet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// => 'Hello Vue.js!'</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="内联处理器中的方法"><a aria-hidden="true" tabindex="-1" href="#内联处理器中的方法"><span class="icon icon-link"></span></a>内联处理器中的方法</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
@ -579,7 +586,9 @@
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 滚动事件的默认行为(即滚动行为)会立即触发 --></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 而不会等待 `onScroll` 完成 --></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 包含 event.preventDefault() 的情况 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name"><span class="token namespace">v-on:</span>scroll.passive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onScroll<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name"><span class="token namespace">v-on:</span>scroll.passive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onScroll<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> ...
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>这个 <code>.passive</code> <a href="#v-on-%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">修饰符</a>尤其能够提升移动端的性能。</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="按键修饰符"><a aria-hidden="true" tabindex="-1" href="#按键修饰符"><span class="icon icon-link"></span></a>按键修饰符</h3><div class="wrap-body">
|
||||
@ -600,6 +609,486 @@
|
||||
</span><span class="code-line"><span class="token comment"><!-- 没有任何系统修饰符被按下的时候才触发 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.exact</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>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="计算属性和侦听器"><a aria-hidden="true" tabindex="-1" href="#计算属性和侦听器"><span class="icon icon-link"></span></a>计算属性和侦听器</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="基础例子-1"><a aria-hidden="true" tabindex="-1" href="#基础例子-1"><span class="icon icon-link"></span></a>基础例子</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example<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"><</span>p</span><span class="token punctuation">></span></span>Original message: "{{ message }}"<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> 计算的反向消息： "{{ reversedMessage }}"
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'Hello'</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 计算属性的 getter</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">reversedMessage</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 class="code-line"> <span class="token comment">// `this` 指向 vm 实例</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="计算属性缓存-vs-方法"><a aria-hidden="true" tabindex="-1" href="#计算属性缓存-vs-方法"><span class="icon icon-link"></span></a>计算属性缓存 vs 方法</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> 计算的反向消息："{{ reversedMessage() }}"
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>在组件中，我们可以将同一函数定义为一个方法而不是一个计算属性</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">reversedMessage</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 class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">.</span><span class="token method function property-access">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>两种方式的最终结果确实是完全相同的。然而，不同的是<strong>计算属性是基于它们的响应式依赖进行缓存的</strong>。</p>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="计算属性-vs-侦听属性"><a aria-hidden="true" tabindex="-1" href="#计算属性-vs-侦听属性"><span class="icon icon-link"></span></a>计算属性 vs 侦听属性</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=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"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ fullName }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#demo'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Bar'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">fullName</span><span class="token operator">:</span> <span class="token string">'Foo Bar'</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">firstName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">fullName</span> <span class="token operator">=</span>
|
||||
</span><span class="code-line"> val <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">lastName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">fullName</span> <span class="token operator">=</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> val
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>上面代码是命令式且重复的。将它与计算属性的版本进行比较：</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#demo'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'Foo'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'Bar'</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">fullName</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 class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span>
|
||||
</span><span class="code-line"> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="计算属性的-setter"><a aria-hidden="true" tabindex="-1" href="#计算属性的-setter"><span class="icon icon-link"></span></a>计算属性的 setter</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">fullName</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">get</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 class="token comment">// getter</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">newValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// setter</span>
|
||||
</span><span class="code-line"> <span class="token keyword">var</span> names <span class="token operator">=</span> newValue<span class="token punctuation">.</span><span class="token method function property-access">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token operator">=</span> names<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">lastName</span> <span class="token operator">=</span> names<span class="token punctuation">[</span>names<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="表单输入绑定"><a aria-hidden="true" tabindex="-1" href="#表单输入绑定"><span class="icon icon-link"></span></a>表单输入绑定</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="文本-1"><a aria-hidden="true" tabindex="-1" href="#文本-1"><span class="icon icon-link"></span></a>文本</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>msg<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>编辑我<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"><</span>p</span><span class="token punctuation">></span></span>msg is: {{ msg }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="多行文本"><a aria-hidden="true" tabindex="-1" href="#多行文本"><span class="icon icon-link"></span></a>多行文本</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Multiline message is:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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"><</span>textarea</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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>message<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>添加多行<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="复选框"><a aria-hidden="true" tabindex="-1" href="#复选框"><span class="icon icon-link"></span></a>复选框</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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>checked<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ checked}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap 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-->
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Jack<span class="token punctuation">"</span></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>checkedNames<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"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jack<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>john<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>John<span class="token punctuation">"</span></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>checkedNames<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"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>john<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>John<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mike<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Mike<span class="token punctuation">"</span></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>checkedNames<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"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mike<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Checked names: {{ checkedNames }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>如下 data</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">checkedNames</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="单选按钮"><a aria-hidden="true" tabindex="-1" href="#单选按钮"><span class="icon icon-link"></span></a>单选按钮</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>example-4<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"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>One<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <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>picked<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"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Two<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <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>picked<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"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Picked: {{ picked }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#example-4'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">picked</span><span class="token operator">:</span> <span class="token string">''</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="选择框"><a aria-hidden="true" tabindex="-1" href="#选择框"><span class="icon icon-link"></span></a>选择框</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>selected<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"><</span>option</span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>请选择<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token string">''</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="选择框数组"><a aria-hidden="true" tabindex="-1" href="#选择框数组"><span class="icon icon-link"></span></a>选择框(数组)</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>selected<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="v-for-渲染的动态选项"><a aria-hidden="true" tabindex="-1" href="#v-for-渲染的动态选项"><span class="icon icon-link"></span></a>v-for 渲染的动态选项</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=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"><</span>select</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>selected<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"><</span>option</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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>option in options<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option.value<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> {{ option.text }}
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Selected: {{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">selected</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'One'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Two'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Three'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="值绑定"><a aria-hidden="true" tabindex="-1" href="#值绑定"><span class="icon icon-link"></span></a>值绑定</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- 当选中时，pc 为字符串 "a" --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></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>pc<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment"><!-- toggle 为 true 或 false --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></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>toggle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token comment"><!-- 选中第一个选项时selected为字符串 abc --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>selected<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"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>abc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ABC<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="单选按钮-1"><a aria-hidden="true" tabindex="-1" href="#单选按钮-1"><span class="icon icon-link"></span></a>单选按钮</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <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>pick<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>当选中时</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">pick</span> <span class="token operator">===</span> vm<span class="token punctuation">.</span><span class="token property-access">a</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="复选框-1"><a aria-hidden="true" tabindex="-1" href="#复选框-1"><span class="icon icon-link"></span></a>复选框</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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>toggle<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">true-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">false-value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// 当选中时</span>
|
||||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">toggle</span> <span class="token operator">===</span> <span class="token string">'yes'</span>
|
||||
</span><span class="code-line"><span class="token comment">// 当没有选中时</span>
|
||||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">toggle</span> <span class="token operator">===</span> <span class="token string">'no'</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="选择框的选项"><a aria-hidden="true" tabindex="-1" href="#选择框的选项"><span class="icon icon-link"></span></a>选择框的选项</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</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>selected<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token comment"><!-- 内联对象字面量 --></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ number: 123 }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> 123
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>当选中时</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">typeof</span> vm<span class="token punctuation">.</span><span class="token property-access">selected</span> <span class="token comment">// => 'object'</span>
|
||||
</span><span class="code-line">vm<span class="token punctuation">.</span><span class="token property-access">selected</span><span class="token punctuation">.</span><span class="token property-access">number</span> <span class="token comment">// => 123</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="修饰符"><a aria-hidden="true" tabindex="-1" href="#修饰符"><span class="icon icon-link"></span></a>修饰符</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token comment"><!-- lazy:在“change”时而非“input”时更新 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.lazy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>msg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment"><!-- number:自动将用户的输入值转为数值类型 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.number</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>age<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token comment"><!-- trim:自动过滤用户输入的首尾空白字符 --></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">v-model.trim</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>msg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="组件基础"><a aria-hidden="true" tabindex="-1" href="#组件基础"><span class="icon icon-link"></span></a>组件基础</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="基本示例"><a aria-hidden="true" tabindex="-1" href="#基本示例"><span class="icon icon-link"></span></a>基本示例</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'button-counter'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">data</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 class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <button v-on:click="count++">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> 你点击了我 {{ count }} 次
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </button>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>组件是可复用的 <code>Vue</code> 实例</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>components-demo<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"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'#components-demo'</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>组件的复用</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>components-demo<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"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="data-必须是一个函数"><a aria-hidden="true" tabindex="-1" href="#data-必须是一个函数"><span class="icon icon-link"></span></a><code>data</code> 必须是一个函数</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function-variable function">data</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 class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>组件的 <code>data</code> 选项必须是一个函数</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="向子组件传递数据"><a aria-hidden="true" tabindex="-1" href="#向子组件传递数据"><span class="icon icon-link"></span></a>向子组件传递数据</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'<h3>{{ title }}</h3>'</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>当值传递给一个 <code>prop</code> <code>attribute</code> 的时候，变成了组件实例的一个 <code>property</code></p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>写博客<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>如此有趣<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="单个根元素"><a aria-hidden="true" tabindex="-1" href="#单个根元素"><span class="icon icon-link"></span></a>单个根元素</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'post'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> <div class="blog-post">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <h3>{{ post.title }}</h3>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div v-html="post.content"></div>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <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>post in posts<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post.id<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>post</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="监听子组件事件"><a aria-hidden="true" tabindex="-1" href="#监听子组件事件"><span class="icon icon-link"></span></a>监听子组件事件</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'blog-post'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'post'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div class="blog-post">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <h3>{{ post.title }}</h3>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <button
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> v-on:click="$emit('enlarge-txt')"
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> >
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> Enlarge text
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </button>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div v-html="post.content"></div>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>postFontSize += 0.1<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>可以使用 <code>$emit</code> 的第二个参数来提供这个值</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$emit('enlarge-text', 0.1)<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> Enlarge text
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>通过 <code>$event</code> 访问到被抛出的这个值</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>postFontSize += $event<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>如果这个事件处理函数是一个方法</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">...</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>enlarge-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onEnlargeText<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>那么这个值将会作为第一个参数传入这个方法</p>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token function-variable function">onEnlargeText</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">enlargeAmount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">postFontSize</span> <span class="token operator">+=</span> enlargeAmount
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="在组件上使用-v-model"><a aria-hidden="true" tabindex="-1" href="#在组件上使用-v-model"><span class="icon icon-link"></span></a>在组件上使用 v-model</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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>searchText<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>等价于</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">v-on:</span>input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>searchText = $event.target.value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p>为了让它正常工作，这个组件内的 <input> 必须：</p>
|
||||
<ul>
|
||||
<li>将其 <code>value</code> attribute 绑定到一个名叫 <code>value</code> 的 <code>prop</code> 上</li>
|
||||
<li>在其 <code>input</code> 事件被触发时，将新的值通过自定义的 <code>input</code> 事件抛出</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'custom-input'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'value'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <input
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> v-bind:value="value"
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> v-on:input="$emit('input', $event.target.value)"
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> >
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>现在 <code>v-model</code> 就应该可以在这个组件上完美地工作起来了</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>custom-input</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <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>searchText<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>custom-input</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="通过插槽分发内容"><a aria-hidden="true" tabindex="-1" href="#通过插槽分发内容"><span class="icon icon-link"></span></a>通过插槽分发内容</h3><div class="wrap-body">
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>alert-box</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> 发生了不好的事情。
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>alert-box</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">'alert-box'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <div class="demo-alert-box">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> <strong>Error!</strong>
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> <slot></slot>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </div>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap 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"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-component-demo<span class="token punctuation">"</span></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>demo<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"><</span>button</span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <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>tab in tabs<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-bind:</span>class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['tab-button', { active: currentTab === tab }]<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentTab = tab<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> {{ tab }}
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currentTabComponent<span class="token punctuation">"</span></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>tab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>component</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-home"</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">template</span><span class="token operator">:</span> <span class="token string">"<div>Home component</div>"</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 maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-posts"</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">template</span><span class="token operator">:</span> <span class="token string">"<div>Posts component</div>"</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 maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">component</span><span class="token punctuation">(</span><span class="token string">"tab-archive"</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">template</span><span class="token operator">:</span> <span class="token string">"<div>Archive component</div>"</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 keyword">new</span> <span class="token class-name">Vue</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">el</span><span class="token operator">:</span> <span class="token string">"#dynamic-component-demo"</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 literal-property property">currentTab</span><span class="token operator">:</span> <span class="token string">"Home"</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">tabs</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Home"</span><span class="token punctuation">,</span> <span class="token string">"Posts"</span><span class="token punctuation">,</span> <span class="token string">"Archive"</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 literal-property property">computed</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 function-variable function">currentTabComponent</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 keyword control-flow">return</span> <span class="token string">"tab-"</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">currentTab</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</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></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 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"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="解析-dom-模板时的注意事项"><a aria-hidden="true" tabindex="-1" href="#解析-dom-模板时的注意事项"><span class="icon icon-link"></span></a>解析 DOM 模板时的注意事项</h3><div class="wrap-body">
|
||||
<p>有些 HTML 元素，诸如 <code><ul></code>、<code><ol></code>、<code><table></code> 和 <code><select></code>，对于哪些元素可以出现在其内部是有严格限制的。有些元素，诸如 <code><li></code>、<code><tr></code> 和 <code><option></code>，只能出现在其它某些特定的元素内部</p>
|
||||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blog-post-row</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blog-post-row</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
|
||||
</span></code></pre>
|
||||
<p><code><blog-post-row></code> 会被作为无效的内容提升到外部</p>
|
||||
<hr>
|
||||
<p>如果我们从以下来源使用模板的话，这条限制是不存在的</p>
|
||||
<ul class="style-round">
|
||||
<li>字符串 (例如：template: '...')</li>
|
||||
<li>单文件组件 (.vue)</li>
|
||||
<li><code><script type="text/x-template"></code></li>
|
||||
</ul>
|
||||
<!--rehype:className=style-round-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="vue-2-api-参考"><a aria-hidden="true" tabindex="-1" href="#vue-2-api-参考"><span class="icon icon-link"></span></a>Vue 2 API 参考</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="全局配置"><a aria-hidden="true" tabindex="-1" href="#全局配置"><span class="icon icon-link"></span></a>全局配置</h3><div class="wrap-body">
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
Reference in New Issue
Block a user