|
125 | 125 | </div> |
126 | 126 |
|
127 | 127 |
|
128 | | -<div class="content api with-sidebar"> |
| 128 | +<div class="content api with-sidebar "> |
129 | 129 | <div id="ad"> |
130 | 130 | <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> |
131 | 131 | </div> |
@@ -1152,6 +1152,90 @@ <h3 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</ |
1152 | 1152 | <li><a href="/guide/components.html#Cheap-Static-Components-with-v-once">Components - Cheap Static Components with v-once</a></li> |
1153 | 1153 | </ul> |
1154 | 1154 | </li> |
| 1155 | +</ul> |
| 1156 | +<h2 id="Special-Elements"><a href="#Special-Elements" class="headerlink" title="Special Elements"></a>Special Elements</h2><h3 id="component"><a href="#component" class="headerlink" title="component"></a>component</h3><ul> |
| 1157 | +<li><p><strong>Attributes:</strong></p> |
| 1158 | +<ul> |
| 1159 | +<li><code>is</code> - String</li> |
| 1160 | +<li><code>inline-template</code> - Boolean</li> |
| 1161 | +</ul> |
| 1162 | +</li> |
| 1163 | +<li><p><strong>Usage:</strong></p> |
| 1164 | +<p>Alternative syntax for invoking components. Primarily used for dynamic components with the <code>is</code> special attribute:</p> |
| 1165 | +<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- a dynamic component controlled by --></span></div><div class="line"><span class="comment"><!-- the `componentId` property on the vm --></span></div><div class="line"><span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"componentId"</span>></span><span class="tag"></<span class="name">component</span>></span></div></pre></td></tr></table></figure> |
| 1166 | +</li> |
| 1167 | +<li><p><strong>See also:</strong> <a href="/guide/components.html#Dynamic-Components">Dynamic Components</a></p> |
| 1168 | +</li> |
| 1169 | +</ul> |
| 1170 | +<h3 id="transition"><a href="#transition" class="headerlink" title="transition"></a>transition</h3><ul> |
| 1171 | +<li><p><strong>Attributes:</strong></p> |
| 1172 | +<ul> |
| 1173 | +<li><code>name</code> - String, Used to automatically generate transition CSS class names. e.g. <code>name: 'fade'</code> will auto expand to <code>.fade-enter</code>, <code>.fade-enter-active</code>, etc. Defaults to <code>"v"</code>.</li> |
| 1174 | +<li><code>appear</code> - Boolean, Whether to apply transition on initial render. Defaults to <code>false</code>.</li> |
| 1175 | +<li><code>css</code> - Boolean, Whether to apply CSS transition classes. Defaults to <code>true</code>. If set to <code>false</code>, will only trigger JavaScript hooks registered via component events.</li> |
| 1176 | +<li><code>type</code> - String, Specify the type of transition events to wait for to determine transition end timing. Available values are <code>"transition"</code> and <code>"animation"</code>. By default, it will automatically detect the type that has a longer duration.</li> |
| 1177 | +<li><code>mode</code> - String, Controls the timing sequence of leaving/entering transitions. Available modes are <code>"out-in"</code> and <code>"in-out"</code>; defaults to simultaneous.</li> |
| 1178 | +<li><code>enterClass</code> - String, Individually configure transition CSS classes.</li> |
| 1179 | +<li><code>leaveClass</code> - String, Individually configure transition CSS classes.</li> |
| 1180 | +<li><code>enterActiveClass</code> - String, Individually configure transition CSS classes.</li> |
| 1181 | +<li><code>leaveActiveClass</code> - String, Individually configure transition CSS classes.</li> |
| 1182 | +<li><code>appearClass</code> - String, Individually configure transition CSS classes.</li> |
| 1183 | +<li><code>appearActiveClass</code> - String, Individually configure transition CSS classes.</li> |
| 1184 | +</ul> |
| 1185 | +</li> |
| 1186 | +<li><p><strong>Events:</strong></p> |
| 1187 | +<ul> |
| 1188 | +<li><code>before-enter</code></li> |
| 1189 | +<li><code>enter</code></li> |
| 1190 | +<li><code>after-enter</code></li> |
| 1191 | +<li><code>before-leave</code></li> |
| 1192 | +<li><code>leave</code></li> |
| 1193 | +<li><code>after-leave</code></li> |
| 1194 | +<li><code>before-appear</code></li> |
| 1195 | +<li><code>appear</code></li> |
| 1196 | +<li><code>after-appear</code></li> |
| 1197 | +</ul> |
| 1198 | +</li> |
| 1199 | +<li><p><strong>Usage:</strong></p> |
| 1200 | +<p><code><transition></code> serve as transition effects for <strong>single</strong> element/component. The <code><transition></code> does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.</p> |
| 1201 | +<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment"><!-- simple element --></span></div><div class="line"><span class="tag"><<span class="name">transition</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"ok"</span>></span>toggled content<span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">transition</span>></span></div><div class="line"><span class="comment"><!-- dynamic component --></span></div><div class="line"><span class="tag"><<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">mode</span>=<span class="string">"out-in"</span> <span class="attr">appear</span>></span></div><div class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>></span><span class="tag"></<span class="name">component</span>></span></div><div class="line"><span class="tag"></<span class="name">transition</span>></span></div><div class="line"><span class="comment"><!-- event hooking --></span></div><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"transition-demo"</span>></span></div><div class="line"> <span class="tag"><<span class="name">transition</span> @<span class="attr">after-enter</span>=<span class="string">"transitionComplete"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"ok"</span>></span>toggled content<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">transition</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></div><div class="line"><span class="keyword">new</span> Vue({</div><div class="line"> ...</div><div class="line"> methods: {</div><div class="line"> transitionComplete: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>{</div><div class="line"> <span class="comment">// for passed 'el' that DOM element as the argument, something ...</span></div><div class="line"> }</div><div class="line"> }</div><div class="line"> ... </div><div class="line">}).$mount(<span class="string">'#transition-demo'</span>)</div><div class="line"><span class="tag"></<span class="name">script</span>></span></div></pre></td></tr></table></figure> |
| 1202 | +</li> |
| 1203 | +<li><p><strong>See also:</strong> <a href="/guide/transitions.html">Transitions: Entering, Leaving, and Lists</a></p> |
| 1204 | +</li> |
| 1205 | +</ul> |
| 1206 | +<h3 id="transition-group"><a href="#transition-group" class="headerlink" title="transition-group"></a>transition-group</h3><ul> |
| 1207 | +<li><p><strong>Attributes:</strong></p> |
| 1208 | +<ul> |
| 1209 | +<li>exposes <code><transition></code> attributes (Note does not support the <code>mode</code> attribute).</li> |
| 1210 | +<li><code>tag</code> - String, Default to <code>span</code>.</li> |
| 1211 | +</ul> |
| 1212 | +</li> |
| 1213 | +<li><p><strong>Events:</strong></p> |
| 1214 | +<ul> |
| 1215 | +<li>exposes <code><transition></code> events.</li> |
| 1216 | +</ul> |
| 1217 | +</li> |
| 1218 | +<li><p><strong>Usage:</strong></p> |
| 1219 | +<p><code><transition-group></code> serve as transition effects for <strong>multiple</strong> element/component. The <code><transition-group></code> renders a real DOM element. By default it renders a <code><span></code>, and you can configure what element is should render via the <code>tag</code> attribute.</p> |
| 1220 | +<p>Note every child in a <code><transition-group></code> must be <strong>uniquely keyed</strong>.</p> |
| 1221 | +<p><code><transition-group></code> supports moving transitions via CSS transform. When a child’s position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the <code>name</code> attribute or configured with the <code>moveClass</code> attribute). If the CSS <code>transform</code> property is “transition-able” when the moving class is applied, the element will be smoothly animated to its destination using the <a href="https://aerotwist.com/blog/flip-your-animations/" target="_blank" rel="external">FLIP technique</a>.</p> |
| 1222 | +<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"> <span class="tag"><<span class="name">transition-group</span> <span class="attr">tag</span>=<span class="string">"ul"</span> <span class="attr">name</span>=<span class="string">"slide"</span>></span></div><div class="line"> <span class="tag"><<span class="name">li</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>></span></div><div class="line"> {{ item.text }}</div><div class="line"> <span class="tag"></<span class="name">li</span>></span></div><div class="line"> <span class="tag"></<span class="name">transition-group</span>></span></div><div class="line"> ``` </div><div class="line"></div><div class="line">- **See also:** [Transitions: Entering, Leaving, and Lists](/guide/transitions.html)</div><div class="line"></div><div class="line">### keep-alive</div><div class="line"></div><div class="line">- **Usage:**</div><div class="line"></div><div class="line"> `<span class="tag"><<span class="name">keep-alive</span>></span>` serve as caching of inactive component. `<span class="tag"><<span class="name">keep-alive</span>></span>` used with component, it will be replaced.</div><div class="line"></div><div class="line"> Primarily used with preserve component state or avoid re-rendering.</div><div class="line"></div><div class="line"> ```html</div><div class="line"> <span class="comment"><!-- basic --></span></div><div class="line"> <span class="tag"><<span class="name">keep-alive</span>></span></div><div class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>></span><span class="tag"></<span class="name">component</span>></span></div><div class="line"> <span class="tag"></<span class="name">keep-alive</span>></span></div><div class="line"> <span class="comment"><!-- multiple conditional children --></span></div><div class="line"> <span class="tag"><<span class="name">keep-alive</span>></span></div><div class="line"> <span class="tag"><<span class="name">comp-a</span> <span class="attr">v-if</span>=<span class="string">"a > 1"</span>></span><span class="tag"></<span class="name">comp-a</span>></span></div><div class="line"> <span class="tag"><<span class="name">comp-b</span> <span class="attr">v-else</span>></span><span class="tag"></<span class="name">comp-b</span>></span></div><div class="line"> <span class="tag"></<span class="name">keep-alive</span>></span></div><div class="line"> <span class="comment"><!-- used together with <transition> --></span></div><div class="line"> <span class="tag"><<span class="name">transition</span>></span></div><div class="line"> <span class="tag"><<span class="name">keep-alive</span>></span></div><div class="line"> <span class="tag"><<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"view"</span>></span><span class="tag"></<span class="name">component</span>></span></div><div class="line"> <span class="tag"></<span class="name">keep-alive</span>></span></div><div class="line"> <span class="tag"></<span class="name">transition</span>></span></div></pre></td></tr></table></figure> |
| 1223 | +</li> |
| 1224 | +<li><p><strong>See also:</strong> <a href="/guide/components.html#keep-alive">Dynamic Components - keep-alive</a></p> |
| 1225 | +</li> |
| 1226 | +</ul> |
| 1227 | +<h3 id="slot"><a href="#slot" class="headerlink" title="slot"></a>slot</h3><ul> |
| 1228 | +<li><p><strong>Attributes:</strong></p> |
| 1229 | +<ul> |
| 1230 | +<li><code>name</code> - String, Used for named slot.</li> |
| 1231 | +</ul> |
| 1232 | +</li> |
| 1233 | +<li><p><strong>Usage:</strong></p> |
| 1234 | +<p><code><slot></code> serve as content distribution outlets in component templates. <code><slot></code> itself will be replaced.</p> |
| 1235 | +<p>For detailed usage, see the guide section linked below.</p> |
| 1236 | +</li> |
| 1237 | +<li><p><strong>See also:</strong> <a href="/guide/components.html#Content-Distribution-with-Slots">Content Distribution with Slots</a></p> |
| 1238 | +</li> |
1155 | 1239 | </ul> |
1156 | 1240 |
|
1157 | 1241 |
|
|
0 commit comments