mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 15:34:05 +08:00
408 lines
32 KiB
HTML
408 lines
32 KiB
HTML
<h2 id="指令"><a href="#指令" class="headerlink" title="指令" data-scroll="">指令</a></h2><h3 id="v-text"><a href="#v-text" class="headerlink" title="v-text" data-scroll="">v-text</a></h3><ul>
|
||
<li><p><strong>预期</strong>：<code>string</code></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>更新元素的 <code>textContent</code>。如果要更新部分的 <code>textContent</code> ，需要使用 <code>{{ Mustache }}</code> 插值。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">v-text</span>=<span class="hljs-string">"msg"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||
<span class="hljs-comment"><!-- 和下面的一样 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>{{msg}}<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/syntax.html#插值">数据绑定语法 - 插值</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html" data-scroll="">v-html</a></h3><ul>
|
||
<li><p><strong>预期</strong>：<code>string</code></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>更新元素的 <code>innerHTML</code> 。<strong>注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译</strong> 。如果试图使用 <code>v-html</code> 组合模板，可以重新考虑是否通过使用组件来替代。</p>
|
||
<p class="tip">在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener">XSS 攻击</a>。只在可信内容上使用 <code>v-html</code>，<strong>永不</strong>用在用户提交的内容上。</p>
|
||
|
||
<p class="tip">在<a href="guide/single-file-components.html">单文件组件</a>里，<code>scoped</code> 的样式不会应用在 <code>v-html</code> 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 <code>v-html</code> 的内容设置带作用域的 CSS，你可以替换为 <a href="https://vue-loader.vuejs.org/en/features/css-modules.html" target="_blank" rel="noopener">CSS Modules</a> 或用一个额外的全局 <code><style></code> 元素手动设置类似 BEM 的作用域策略。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"html"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/syntax.html#纯-HTML">数据绑定语法 - 插值</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-show"><a href="#v-show" class="headerlink" title="v-show" data-scroll="">v-show</a></h3><ul>
|
||
<li><p><strong>预期</strong>：<code>any</code></p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>根据表达式之真假值，切换元素的 <code>display</code> CSS 属性。</p>
|
||
<p>当条件变化时该指令触发过渡效果。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/conditional.html#v-show">条件渲染 - v-show</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-if"><a href="#v-if" class="headerlink" title="v-if" data-scroll="">v-if</a></h3><ul>
|
||
<li><p><strong>预期</strong>：<code>any</code></p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <code><template></code> ，将提出它的内容作为条件块。</p>
|
||
<p>当条件变化时该指令触发过渡效果。</p>
|
||
<p class="tip">当和 <code>v-if</code> 一起使用时，<code>v-for</code> 的优先级比 <code>v-if</code> 更高。详见<a href="guide/list.html#v-for-with-v-if">列表渲染教程</a></p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/conditional.html">条件渲染 - v-if</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-else"><a href="#v-else" class="headerlink" title="v-else" data-scroll="">v-else</a></h3><ul>
|
||
<li><p><strong>不需要表达式</strong></p>
|
||
</li>
|
||
<li><p><strong>限制</strong>：前一兄弟元素必须有 <code>v-if</code> 或 <code>v-else-if</code>。</p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>为 <code>v-if</code> 或者 <code>v-else-if</code> 添加“else 块”。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"Math.random() > 0.5"</span>></span>
|
||
Now you see me
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>></span>
|
||
Now you don't
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/conditional.html#v-else">条件渲染 - v-else</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-else-if"><a href="#v-else-if" class="headerlink" title="v-else-if" data-scroll="">v-else-if</a></h3><blockquote>
|
||
<p>2.1.0 新增</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><p><strong>类型</strong>：<code>any</code></p>
|
||
</li>
|
||
<li><p><strong>限制</strong>：前一兄弟元素必须有 <code>v-if</code> 或 <code>v-else-if</code>。</p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>表示 <code>v-if</code> 的 “else if 块”。可以链式调用。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"type === 'A'"</span>></span>
|
||
A
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"type === 'B'"</span>></span>
|
||
B
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"type === 'C'"</span>></span>
|
||
C
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>></span>
|
||
Not A/B/C
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：<a href="guide/conditional.html#v-else-if">条件渲染 - v-else-if</a></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for" data-scroll="">v-for</a></h3><ul>
|
||
<li><p><strong>预期</strong>：<code>Array | Object | number | string | Iterable (2.6 新增)</code></p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 <code>alias in expression</code> ，为当前遍历的元素提供别名：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span>></span>
|
||
{{ item.text }}
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p>另外也可以为数组索引指定别名 (或者用于对象的键)：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item, index) in items"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(val, key) in object"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(val, key, index) in object"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p><code>v-for</code> 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 <code>key</code> 的特殊属性：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"item.id"</span>></span>
|
||
{{ item.text }}
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p>从 2.6 起，<code>v-for</code> 也可以在实现了<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#可迭代协议" target="_blank" rel="noopener">可迭代协议</a>的值上使用，包括原生的 <code>Map</code> 和 <code>Set</code>。不过应该注意的是 Vue 2.x 目前并不支持可响应的 <code>Map</code> 和 <code>Set</code> 值，所以无法自动探测变更。</p>
|
||
<p class="tip">当和 <code>v-if</code> 一起使用时，<code>v-for</code> 的优先级比 <code>v-if</code> 更高。详见<a href="guide/list.html#v-for-with-v-if">列表渲染教程</a></p>
|
||
|
||
<p><code>v-for</code> 的详细用法可以通过以下链接查看教程详细说明。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/list.html">列表渲染</a></li>
|
||
<li><a href="guide/list.html#key">key</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-on"><a href="#v-on" class="headerlink" title="v-on" data-scroll="">v-on</a></h3><ul>
|
||
<li><p><strong>缩写</strong>：<code>@</code></p>
|
||
</li>
|
||
<li><p><strong>预期</strong>：<code>Function | Inline Statement | Object</code></p>
|
||
</li>
|
||
<li><p><strong>参数</strong>：<code>event</code></p>
|
||
</li>
|
||
<li><p><strong>修饰符</strong>：</p>
|
||
<ul>
|
||
<li><code>.stop</code> - 调用 <code>event.stopPropagation()</code>。</li>
|
||
<li><code>.prevent</code> - 调用 <code>event.preventDefault()</code>。</li>
|
||
<li><code>.capture</code> - 添加事件侦听器时使用 capture 模式。</li>
|
||
<li><code>.self</code> - 只当事件是从侦听器绑定的元素本身触发时才触发回调。</li>
|
||
<li><code>.{keyCode | keyAlias}</code> - 只当事件是从特定键触发时才触发回调。</li>
|
||
<li><code>.native</code> - 监听组件根元素的原生事件。</li>
|
||
<li><code>.once</code> - 只触发一次回调。</li>
|
||
<li><code>.left</code> - (2.2.0) 只当点击鼠标左键时触发。</li>
|
||
<li><code>.right</code> - (2.2.0) 只当点击鼠标右键时触发。</li>
|
||
<li><code>.middle</code> - (2.2.0) 只当点击鼠标中键时触发。</li>
|
||
<li><code>.passive</code> - (2.3.0) 以 <code>{ passive: true }</code> 模式添加侦听器</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。</p>
|
||
<p>用在普通元素上时，只能监听<a href="https://developer.mozilla.org/zh-CN/docs/Web/Events" target="_blank" rel="noopener"><strong>原生 DOM 事件</strong></a>。用在自定义元素组件上时，也可以监听子组件触发的<strong>自定义事件</strong>。</p>
|
||
<p>在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 <code>$event</code> 属性：<code>v-on:click="handle('ok', $event)"</code>。</p>
|
||
<p>从 <code>2.4.0</code> 开始，<code>v-on</code> 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 方法处理器 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 动态事件 (2.6.0+) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-on:</span>[<span class="hljs-attr">event</span>]=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 内联语句 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"doThat('hello', $event)"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 缩写 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 动态事件缩写 (2.6.0+) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> @[<span class="hljs-attr">event</span>]=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 停止冒泡 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click.stop</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 阻止默认行为 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click.prevent</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 阻止默认行为，没有表达式 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">form</span> @<span class="hljs-attr">submit.prevent</span>></span><span class="hljs-tag"></<span class="hljs-name">form</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 串联修饰符 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click.stop.prevent</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 键修饰符，键别名 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> @<span class="hljs-attr">keyup.enter</span>=<span class="hljs-string">"onEnter"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 键修饰符，键代码 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> @<span class="hljs-attr">keyup.13</span>=<span class="hljs-string">"onEnter"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 点击回调只会触发一次 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-on:click.once</span>=<span class="hljs-string">"doThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 对象语法 (2.4.0+) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-on</span>=<span class="hljs-string">"{ mousedown: doThis, mouseup: doThat }"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
||
<p>在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">my-component</span> @<span class="hljs-attr">my-event</span>=<span class="hljs-string">"handleThis"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 内联语句 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">my-component</span> @<span class="hljs-attr">my-event</span>=<span class="hljs-string">"handleThis(123, $event)"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 组件中的原生事件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">my-component</span> @<span class="hljs-attr">click.native</span>=<span class="hljs-string">"onClick"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/events.html">事件处理器</a></li>
|
||
<li><a href="guide/components.html#监听子组件事件">组件 - 自定义事件</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind" data-scroll="">v-bind</a></h3><ul>
|
||
<li><p><strong>缩写</strong>：<code>:</code></p>
|
||
</li>
|
||
<li><p><strong>预期</strong>：<code>any (with argument) | Object (without argument)</code></p>
|
||
</li>
|
||
<li><p><strong>参数</strong>：<code>attrOrProp (optional)</code></p>
|
||
</li>
|
||
<li><p><strong>修饰符</strong>：</p>
|
||
<ul>
|
||
<li><code>.prop</code> - 被用于绑定 DOM 属性 (property)。(<a href="https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028" target="_blank" rel="noopener">差别在哪里？</a>)</li>
|
||
<li><code>.camel</code> - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)</li>
|
||
<li><code>.sync</code> (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 <code>v-on</code> 侦听器。</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p>
|
||
<p>在绑定 <code>class</code> 或 <code>style</code> 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。</p>
|
||
<p>在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。</p>
|
||
<p>没有参数时，可以绑定到一个包含键值对的对象。注意此时 <code>class</code> 和 <code>style</code> 绑定不支持数组和对象。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 绑定一个属性 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">v-bind:src</span>=<span class="hljs-string">"imageSrc"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 动态特性名 (2.6.0+) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">v-bind:</span>[<span class="hljs-attr">key</span>]=<span class="hljs-string">"value"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 缩写 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"imageSrc"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 动态特性名缩写 (2.6.0+) --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">:</span>[<span class="hljs-attr">key</span>]=<span class="hljs-string">"value"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 内联字符串拼接 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"'/path/to/images/' + fileName"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- class 绑定 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"{ red: isRed }"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"[classA, classB]"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"[classA, { classB: isB, classC: isC }]"</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- style 绑定 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"{ fontSize: size + 'px' }"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"[styleObjectA, styleObjectB]"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 绑定一个有属性的对象 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"{ id: someProp, 'other-attr': otherProp }"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 通过 prop 修饰符绑定 DOM 属性 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:text-content.prop</span>=<span class="hljs-string">"text"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- prop 绑定。“prop”必须在 my-component 中声明。--></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">my-component</span> <span class="hljs-attr">:prop</span>=<span class="hljs-string">"someThing"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 通过 $props 将父组件的 props 一起传给子组件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">child-component</span> <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"$props"</span>></span><span class="hljs-tag"></<span class="hljs-name">child-component</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- XLink --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">svg</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">:xlink:special</span>=<span class="hljs-string">"foo"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span></code></pre>
|
||
<p><code>.camel</code> 修饰符允许在使用 DOM 模板时将 <code>v-bind</code> 属性名称驼峰化，例如 SVG 的 <code>viewBox</code> 属性：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">:view-box.camel</span>=<span class="hljs-string">"viewBox"</span>></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span></code></pre>
|
||
<p>在使用字符串模板或通过 <code>vue-loader</code>/<code>vueify</code> 编译时，无需使用 <code>.camel</code>。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/class-and-style.html">Class 与 Style 绑定</a></li>
|
||
<li><a href="guide/components.html#通过-Prop-向子组件传递数据">组件 - Props</a></li>
|
||
<li><a href="guide/components-custom-events.html#sync-修饰符">组件 - <code>.sync</code> 修饰符</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model" data-scroll="">v-model</a></h3><ul>
|
||
<li><p><strong>预期</strong>：随表单控件类型不同而不同。</p>
|
||
</li>
|
||
<li><p><strong>限制</strong>：</p>
|
||
<ul>
|
||
<li><code><input></code></li>
|
||
<li><code><select></code></li>
|
||
<li><code><textarea></code></li>
|
||
<li>components</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>修饰符</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/forms.html#lazy"><code>.lazy</code></a> - 取代 <code>input</code> 监听 <code>change</code> 事件</li>
|
||
<li><a href="guide/forms.html#number"><code>.number</code></a> - 输入字符串转为有效的数字</li>
|
||
<li><a href="guide/forms.html#trim"><code>.trim</code></a> - 输入首尾空格过滤</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/forms.html">表单控件绑定</a></li>
|
||
<li><a href="guide/components-custom-events.html#将原生事件绑定到组件">组件 - 在输入组件上使用自定义事件</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-slot"><a href="#v-slot" class="headerlink" title="v-slot" data-scroll="">v-slot</a></h3><ul>
|
||
<li><p><strong>缩写</strong>：<code>#</code></p>
|
||
</li>
|
||
<li><p><strong>预期</strong>：可放置在函数参数位置的 JavaScript 表达式 (在<a href="guide/components-slots.html#解构插槽-Props">支持的环境下</a>可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。</p>
|
||
</li>
|
||
<li><p><strong>参数</strong>：插槽名 (可选，默认值是 <code>default</code>)</p>
|
||
</li>
|
||
<li><p><strong>限用于</strong></p>
|
||
<ul>
|
||
<li><code><template></code></li>
|
||
<li><a href="guide/components-slots.html#独占默认插槽的缩写语法">组件</a> (对于一个单独的带 prop 的默认插槽)</li>
|
||
</ul>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>提供具名插槽或需要接收 prop 的插槽。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 具名插槽 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">base-layout</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>></span>
|
||
Header content
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
|
||
|
||
Default slot content
|
||
|
||
<span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>></span>
|
||
Footer content
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">base-layout</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 接收 prop 的具名插槽 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">infinite-scroll</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:item</span>=<span class="hljs-string">"slotProps"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span>
|
||
{{ slotProps.item.text }}
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">infinite-scroll</span>></span>
|
||
|
||
<span class="hljs-comment"><!-- 接收 prop 的默认插槽，使用了解构 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">mouse-position</span> <span class="hljs-attr">v-slot</span>=<span class="hljs-string">"{ x, y }"</span>></span>
|
||
Mouse position: {{ x }}, {{ y }}
|
||
<span class="hljs-tag"></<span class="hljs-name">mouse-position</span>></span></code></pre>
|
||
<p>更多细节请查阅以下链接。</p>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/components-slots.html">组件 - 插槽</a></li>
|
||
<li><a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md" target="_blank" rel="noopener">RFC-0001</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-pre"><a href="#v-pre" class="headerlink" title="v-pre" data-scroll="">v-pre</a></h3><ul>
|
||
<li><p><strong>不需要表达式</strong></p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">v-pre</span>></span>{{ this will not be compiled }}<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak" data-scroll="">v-cloak</a></h3><ul>
|
||
<li><p><strong>不需要表达式</strong></p>
|
||
</li>
|
||
<li><p><strong>用法</strong>：</p>
|
||
<p>这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 <code>[v-cloak] { display: none }</code> 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。</p>
|
||
</li>
|
||
<li><p><strong>示例</strong>：</p>
|
||
<pre><code class="hljs css"><span class="hljs-selector-attr">[v-cloak]</span> {
|
||
<span class="hljs-attribute">display</span>: none;
|
||
}</code></pre>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-cloak</span>></span>
|
||
{{ message }}
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p></p><div> 不会显示，直到编译结束。</div><p></p>
|
||
</li>
|
||
</ul>
|
||
<h3 id="v-once"><a href="#v-once" class="headerlink" title="v-once" data-scroll="">v-once</a></h3><ul>
|
||
<li><p><strong>不需要表达式</strong></p>
|
||
</li>
|
||
<li><p><strong>详细</strong>：</p>
|
||
<p>只渲染元素和组件<strong>一次</strong>。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。</p>
|
||
<pre><code class="hljs html"><span class="hljs-comment"><!-- 单个元素 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">v-once</span>></span>This will never change: {{msg}}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||
<span class="hljs-comment"><!-- 有子元素 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-once</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>comment<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>{{msg}}<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-comment"><!-- 组件 --></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">my-component</span> <span class="hljs-attr">v-once</span> <span class="hljs-attr">:comment</span>=<span class="hljs-string">"msg"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
|
||
<span class="hljs-comment"><!-- `v-for` 指令--></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"i in list"</span> <span class="hljs-attr">v-once</span>></span>{{i}}<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
||
</li>
|
||
<li><p><strong>参考</strong>：</p>
|
||
<ul>
|
||
<li><a href="guide/syntax.html#插值">数据绑定语法- 插值</a></li>
|
||
<li><a href="guide/components-edge-cases.html#通过-v-once-创建低开销的静态组件">组件 - 对低开销的静态组件使用 <code>v-once</code></a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|