Skip to content

Commit f464b68

Browse files
JinjiangJinjiang
committed
Site updated: 2017-10-16 18:31:16
1 parent f91f079 commit f464b68

File tree

9 files changed

+144
-131
lines changed

9 files changed

+144
-131
lines changed

‎service-worker.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎v2/api/index.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -698,7 +698,7 @@ <h3 id="template"><a href="#template" class="headerlink" title="template"></a>te
698698
<li><p><strong>详细</strong>：</p>
699699
<p>一个字符串模板作为 Vue 实例的标识使用。模板将会 <strong>替换</strong> 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。</p>
700700
<p>如果值以 <code>#</code> 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <code>&lt;script type=&quot;x-template&quot;&gt;</code> 包含模板。</p>
701-
<p class="tip">出于安全考虑，您应该只使用您信任的 Vue 模板。避免使用其他人生成的内容作为您的模板。</p>
701+
<p class="tip">出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。</p>
702702

703703
<p class="tip">如果 Vue 选项中包含渲染函数，该模板将被忽略。</p>
704704
</li>
@@ -1444,7 +1444,7 @@ <h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h3><
14441444
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span>&gt;</span></div><div class="line"> &#123;&#123; item.text &#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
14451445
<p>另外也可以为数组索引指定别名 (或者用于对象的键)：</p>
14461446
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in items"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(val, key) in object"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"(val, key, index) in object"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
1447-
<p><code>v-for</code> 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，您需要提供一个 <code>key</code> 的特殊属性：</p>
1447+
<p><code>v-for</code> 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 <code>key</code> 的特殊属性：</p>
14481448
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></div><div class="line"> &#123;&#123; item.text &#125;&#125;</div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
14491449
<p><code>v-for</code> 的详细用法可以通过以下链接查看教程详细说明。</p>
14501450
</li>
@@ -1627,6 +1627,16 @@ <h3 id="slot"><a href="#slot" class="headerlink" title="slot"></a>slot</h3><ul>
16271627
<li><p><strong>参考</strong>：<a href="../guide/components.html#具名插槽">具名插槽</a></p>
16281628
</li>
16291629
</ul>
1630+
<h3 id="slot-scope"><a href="#slot-scope" class="headerlink" title="slot-scope"></a>slot-scope</h3><ul>
1631+
<li><p><strong>预期</strong>：<code>function argument expression</code></p>
1632+
</li>
1633+
<li><p><strong>用法</strong>：</p>
1634+
<p>用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。</p>
1635+
<p>此属性不支持动态绑定。</p>
1636+
</li>
1637+
<li><p><strong>参考</strong>：<a href="../guide/components.html#作用域插槽">Scoped Slots</a></p>
1638+
</li>
1639+
</ul>
16301640
<h3 id="is"><a href="#is" class="headerlink" title="is"></a>is</h3><ul>
16311641
<li><p><strong>预期</strong>：<code>string</code></p>
16321642
<p>用于<a href="../guide/components.html#动态组件">动态组件</a>且基于 <a href="../guide/components.html#DOM-模板解析说明">DOM 内模板的限制</a>来工作。</p>

‎v2/guide/components.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -921,7 +921,7 @@ <h3 id="data-必须是函数"><a href="#data-必须是函数" class="headerlink"
921921
</script>
922922

923923
<h3 id="组件组合"><a href="#组件组合" class="headerlink" title="组件组合"></a>组件组合</h3><p>组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。</p>
924-
<p>在 Vue 中，父子组件的关系可以总结为 <strong>prop 向下传递，事件向上传递</strong>。父组件通过 <strong>prop</strong> 给子组件下法数据，子组件通过<strong>事件</strong>给父组件发送消息。看看它们是怎么工作的。</p>
924+
<p>在 Vue 中，父子组件的关系可以总结为 <strong>prop 向下传递，事件向上传递</strong>。父组件通过 <strong>prop</strong> 给子组件下发数据，子组件通过<strong>事件</strong>给父组件发送消息。看看它们是怎么工作的。</p>
925925
<p style="text-align: center;"><br> <img style="width: 300px;" src="/images/props-events.png" alt="prop 向下传递，事件向上传递"><br></p>
926926

927927
<h2 id="Prop"><a href="#Prop" class="headerlink" title="Prop"></a>Prop</h2><h3 id="使用-Prop-传递数据"><a href="#使用-Prop-传递数据" class="headerlink" title="使用 Prop 传递数据"></a>使用 Prop 传递数据</h3><p>组件实例的作用域是<strong>孤立的</strong>。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 <strong>prop</strong> 才能下发到子组件中。</p>
@@ -1216,14 +1216,19 @@ <h3 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="
12161216
<p>作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。</p>
12171217
<p>在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：</p>
12181218
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">slot</span> <span class="attr">text</span>=<span class="string">"hello from child"</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
1219-
<p>在父级中，具有特殊特性 <code>scope</code> 的 <code>&lt;template&gt;</code> 元素必须存在，表示它是作用域插槽的模板。<code>scope</code> 的值对应一个临时变量名，此变量接收从子组件中传递的 prop 对象：</p>
1220-
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">child</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">template</span> <span class="attr">scope</span>=<span class="string">"props"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>hello from parent<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; props.text &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">child</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
1219+
<p>在父级中，具有特殊特性 <code>slot-scope</code> 的 <code>&lt;template&gt;</code> 元素必须存在，表示它是作用域插槽的模板。<code>slot-scope</code> 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：</p>
1220+
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">child</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>hello from parent<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123; props.text &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">child</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
12211221
<p>如果我们渲染上述模板，得到的输出会是：</p>
12221222
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"parent"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"child"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>hello from parent<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span>&gt;</span>hello from child<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
1223+
<blockquote>
1224+
<p>在 2.5.0+，<code>slot-scope</code> 能被用在任意元素或组件中而不再局限于 <code>&lt;template&gt;</code>。</p>
1225+
</blockquote>
12231226
<p>作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：</p>
1224-
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-awesome-list</span> <span class="attr">:items</span>=<span class="string">"items"</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 作用域插槽也可以是具名的 --&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot</span>=<span class="string">"item"</span> <span class="attr">scope</span>=<span class="string">"props"</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"my-fancy-item"</span>&gt;</span>&#123;&#123; props.text &#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">my-awesome-list</span>&gt;</span></div></pre></td></tr></table></figure>
1227+
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-awesome-list</span> <span class="attr">:items</span>=<span class="string">"items"</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 作用域插槽也可以是具名的 --&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">li</span> </span></div><div class="line"><span class="tag"> <span class="attr">slot</span>=<span class="string">"item"</span> </span></div><div class="line"><span class="tag"> <span class="attr">slot-scope</span>=<span class="string">"props"</span> </span></div><div class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"my-fancy-item"</span>&gt;</span></div><div class="line"> &#123;&#123; props.text &#125;&#125;</div><div class="line"> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">my-awesome-list</span>&gt;</span></div></pre></td></tr></table></figure>
12251228
<p>列表组件的模板：</p>
12261229
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"item"</span></span></div><div class="line"><span class="tag"> <span class="attr">v-for</span>=<span class="string">"item in items"</span></span></div><div class="line"><span class="tag"> <span class="attr">:text</span>=<span class="string">"item.text"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 这里写入备用内容 --&gt;</span></div><div class="line"> <span class="tag">&lt;/<span class="name">slot</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></td></tr></table></figure>
1230+
<h4 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h4><p><code>scope-slot</code> 的值实际上是一个可以出现在函数签名参数位置的合法的 JavaScript 表达式。这意味着在受支持的环境 (单文件组件或现代浏览器) 中，您还可以在表达式中使用 ES2015 解构：</p>
1231+
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">child</span>&gt;</span></div><div class="line"> <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot-scope</span>=<span class="string">"&#123; text &#125;"</span>&gt;</span>&#123;&#123; text &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">child</span>&gt;</span></div></pre></td></tr></table></figure>
12271232
<h2 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h2><p>通过使用保留的 <code>&lt;component&gt;</code> 元素，动态地绑定到它的 <code>is</code> 特性，我们让多个组件可以使用同一个挂载点，并动态切换：</p>
12281233
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line"> el: <span class="string">'#example'</span>,</div><div class="line"> data: &#123;</div><div class="line"> currentView: <span class="string">'home'</span></div><div class="line"> &#125;,</div><div class="line"> components: &#123;</div><div class="line"> home: &#123; <span class="comment">/* ... */</span> &#125;,</div><div class="line"> posts: &#123; <span class="comment">/* ... */</span> &#125;,</div><div class="line"> archive: &#123; <span class="comment">/* ... */</span> &#125;</div><div class="line"> &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
12291234
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">component</span> <span class="attr">v-bind:is</span>=<span class="string">"currentView"</span>&gt;</span></div><div class="line"> <span class="comment">&lt;!-- 组件在 vm.currentview 变化时改变！ --&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">component</span>&gt;</span></div></pre></td></tr></table></figure>

0 commit comments

Comments
 (0)