|
1 |
| -# Directives |
| 1 | +# Diretivas |
2 | 2 |
|
3 | 3 | ## v-text
|
4 | 4 |
|
5 |
| -- **Expects:** `string` |
| 5 | +- **Espera:** `string` |
6 | 6 |
|
7 |
| -- **Details:** |
| 7 | +- **Detalhes:** |
8 | 8 |
|
9 | 9 | Updates the element's [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). If you need to update the part of `textContent`, you should use [mustache interpolations](/guide/template-syntax.html#text) instead
|
10 | 10 |
|
11 |
| -- **Example:** |
| 11 | +- **Exemplo:** |
12 | 12 |
|
13 | 13 | ```html
|
14 | 14 | <span v-text="msg"></span>
|
15 | 15 | <!-- same as -->
|
16 | 16 | <span>{{msg}}</span>
|
17 | 17 | ```
|
18 | 18 |
|
19 |
| -- **See also:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#text) |
| 19 | +- **Ver também:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#text) |
20 | 20 |
|
21 | 21 | ## v-html
|
22 | 22 |
|
23 |
| -- **Expects:** `string` |
| 23 | +- **Espera:** `string` |
24 | 24 |
|
25 |
| -- **Details:** |
| 25 | +- **Detalhes:** |
26 | 26 |
|
27 | 27 | Updates the element's [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). **Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates**. If you find yourself trying to compose templates using `v-html`, try to rethink the solution by using components instead.
|
28 | 28 |
|
|
32 | 32 |
|
33 | 33 | In [single-file components](../guide/single-file-component.html), `scoped` styles will not apply to content inside `v-html`, because that HTML is not processed by Vue's template compiler. If you want to target `v-html` content with scoped CSS, you can instead use [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html) or an additional, global `<style>` element with a manual scoping strategy such as BEM.
|
34 | 34 |
|
35 |
| -- **Example:** |
| 35 | +- **Exemplo:** |
36 | 36 |
|
37 | 37 | ```html
|
38 | 38 | <div v-html="html"></div>
|
39 | 39 | ```
|
40 | 40 |
|
41 |
| -- **See also:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#raw-html) |
| 41 | +- **Ver também:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#raw-html) |
42 | 42 |
|
43 | 43 | ## v-show
|
44 | 44 |
|
45 |
| -- **Expects:** `any` |
| 45 | +- **Espera:** `any` |
46 | 46 |
|
47 |
| -- **Usage:** |
| 47 | +- **Uso:** |
48 | 48 |
|
49 | 49 | Toggles the element's `display` CSS property based on the truthy-ness of the expression value.
|
50 | 50 |
|
51 | 51 | This directive triggers transitions when its condition changes.
|
52 | 52 |
|
53 |
| -- **See also:** [Conditional Rendering - v-show](../guide/conditional.html#v-show) |
| 53 | +- **Ver também:** [Conditional Rendering - v-show](../guide/conditional.html#v-show) |
54 | 54 |
|
55 | 55 | ## v-if
|
56 | 56 |
|
57 |
| -- **Expects:** `any` |
| 57 | +- **Espera:** `any` |
58 | 58 |
|
59 |
| -- **Usage:** |
| 59 | +- **Uso:** |
60 | 60 |
|
61 | 61 | Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
|
62 | 62 |
|
63 | 63 | This directive triggers transitions when its condition changes.
|
64 | 64 |
|
65 | 65 | When used together, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element — see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
|
66 | 66 |
|
67 |
| -- **See also:** [Conditional Rendering - v-if](../guide/conditional.html#v-if) |
| 67 | +- **Ver também:** [Conditional Rendering - v-if](../guide/conditional.html#v-if) |
68 | 68 |
|
69 | 69 | ## v-else
|
70 | 70 |
|
71 |
| -- **Does not expect expression** |
| 71 | +- **Não espera expressão** |
72 | 72 |
|
73 | 73 | - **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
|
74 | 74 |
|
75 |
| -- **Usage:** |
| 75 | +- **Uso:** |
76 | 76 |
|
77 | 77 | Denote the "else block" for `v-if` or a `v-if`/`v-else-if` chain.
|
78 | 78 |
|
|
85 | 85 | </div>
|
86 | 86 | ```
|
87 | 87 |
|
88 |
| -- **See also:** [Conditional Rendering - v-else](../guide/conditional.html#v-else) |
| 88 | +- **Ver também:** [Conditional Rendering - v-else](../guide/conditional.html#v-else) |
89 | 89 |
|
90 | 90 | ## v-else-if
|
91 | 91 |
|
92 |
| -- **Expects:** `any` |
| 92 | +- **Espera:** `any` |
93 | 93 |
|
94 | 94 | - **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
|
95 | 95 |
|
96 |
| -- **Usage:** |
| 96 | +- **Uso:** |
97 | 97 |
|
98 | 98 | Denote the "else if block" for `v-if`. Can be chained.
|
99 | 99 |
|
|
112 | 112 | </div>
|
113 | 113 | ```
|
114 | 114 |
|
115 |
| -- **See also:** [Conditional Rendering - v-else-if](../guide/conditional.html#v-else-if) |
| 115 | +- **Ver também:** [Conditional Rendering - v-else-if](../guide/conditional.html#v-else-if) |
116 | 116 |
|
117 | 117 | ## v-for
|
118 | 118 |
|
119 |
| -- **Expects:** `Array | Object | number | string | Iterable` |
| 119 | +- **Espera:** `Array | Object | number | string | Iterable` |
120 | 120 |
|
121 |
| -- **Usage:** |
| 121 | +- **Uso:** |
122 | 122 |
|
123 | 123 | Render the element or template block multiple times based on the source data. The directive's value must use the special syntax `alias in expression` to provide an alias for the current element being iterated on:
|
124 | 124 |
|
|
148 | 148 |
|
149 | 149 | The detailed usage for `v-for` is explained in the guide section linked below.
|
150 | 150 |
|
151 |
| -- **See also:** |
| 151 | +- **Ver também:** |
152 | 152 | - [List Rendering](../guide/list.html)
|
153 | 153 |
|
154 | 154 | ## v-on
|
155 | 155 |
|
156 |
| -- **Shorthand:** `@` |
| 156 | +- **Forma abreviada:** `@` |
157 | 157 |
|
158 |
| -- **Expects:** `Function | Inline Statement | Object` |
| 158 | +- **Espera:** `Function | Inline Statement | Object` |
159 | 159 |
|
160 |
| -- **Argument:** `event` |
| 160 | +- **Argumento:** `event` |
161 | 161 |
|
162 |
| -- **Modifiers:** |
| 162 | +- **Modificadores:** |
163 | 163 |
|
164 | 164 | - `.stop` - call `event.stopPropagation()`.
|
165 | 165 | - `.prevent` - call `event.preventDefault()`.
|
|
172 | 172 | - `.middle` - only trigger handler for middle button mouse events.
|
173 | 173 | - `.passive` - attaches a DOM event with `{ passive: true }`.
|
174 | 174 |
|
175 |
| -- **Usage:** |
| 175 | +- **Uso:** |
176 | 176 |
|
177 | 177 | Attaches an event listener to the element. The event type is denoted by the argument. The expression can be a method name, an inline statement, or omitted if there are modifiers present.
|
178 | 178 |
|
|
182 | 182 |
|
183 | 183 | `v-on` also supports binding to an object of event/listener pairs without an argument. Note when using the object syntax, it does not support any modifiers.
|
184 | 184 |
|
185 |
| -- **Example:** |
| 185 | +- **Exemplo:** |
186 | 186 |
|
187 | 187 | ```html
|
188 | 188 | <!-- method handler -->
|
|
231 | 231 | <my-component @my-event="handleThis(123, $event)"></my-component>
|
232 | 232 | ```
|
233 | 233 |
|
234 |
| -- **See also:** |
| 234 | +- **Ver também:** |
235 | 235 | - [Event Handling](../guide/events.html)
|
236 | 236 | - [Components - Custom Events](../guide/component-basics.html#listening-to-child-components-events)
|
237 | 237 |
|
238 | 238 | ## v-bind
|
239 | 239 |
|
240 |
| -- **Shorthand:** `:` |
| 240 | +- **Forma abreviada:** `:` |
241 | 241 |
|
242 |
| -- **Expects:** `any (with argument) | Object (without argument)` |
| 242 | +- **Espera:** `any (with argument) | Object (without argument)` |
243 | 243 |
|
244 |
| -- **Argument:** `attrOrProp (optional)` |
| 244 | +- **Argumento:** `attrOrProp (optional)` |
245 | 245 |
|
246 |
| -- **Modifiers:** |
| 246 | +- **Modificadores:** |
247 | 247 |
|
248 | 248 | - `.camel` - transform the kebab-case attribute name into camelCase.
|
249 | 249 |
|
250 |
| -- **Usage:** |
| 250 | +- **Uso:** |
251 | 251 |
|
252 | 252 | Dynamically bind one or more attributes, or a component prop to an expression.
|
253 | 253 |
|
|
257 | 257 |
|
258 | 258 | When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode `class` and `style` does not support Array or Objects.
|
259 | 259 |
|
260 |
| -- **Example:** |
| 260 | +- **Exemplo:** |
261 | 261 |
|
262 | 262 | ```html
|
263 | 263 | <!-- bind an attribute -->
|
|
305 | 305 |
|
306 | 306 | `.camel` is not needed if you are using string templates, or compiling with `vue-loader`/`vueify`.
|
307 | 307 |
|
308 |
| -- **See also:** |
| 308 | +- **Ver também:** |
309 | 309 | - [Class and Style Bindings](../guide/class-and-style.html)
|
310 | 310 | - [Components - Props](../guide/component-basics.html#passing-data-to-child-components-with-props)
|
311 | 311 |
|
312 | 312 | ## v-model
|
313 | 313 |
|
314 |
| -- **Expects:** varies based on value of form inputs element or output of components |
| 314 | +- **Espera:** varies based on value of form inputs element or output of components |
315 | 315 |
|
316 |
| -- **Limited to:** |
| 316 | +- **Limitado a:** |
317 | 317 |
|
318 | 318 | - `<input>`
|
319 | 319 | - `<select>`
|
320 | 320 | - `<textarea>`
|
321 | 321 | - components
|
322 | 322 |
|
323 |
| -- **Modifiers:** |
| 323 | +- **Modificadores:** |
324 | 324 |
|
325 | 325 | - [`.lazy`](../guide/forms.html#lazy) - listen to `change` events instead of `input`
|
326 | 326 | - [`.number`](../guide/forms.html#number) - cast valid input string to numbers
|
327 | 327 | - [`.trim`](../guide/forms.html#trim) - trim input
|
328 | 328 |
|
329 |
| -- **Usage:** |
| 329 | +- **Uso:** |
330 | 330 |
|
331 | 331 | Create a two-way binding on a form input element or a component. For detailed usage and other notes, see the Guide section linked below.
|
332 | 332 |
|
333 |
| -- **See also:** |
| 333 | +- **Ver também:** |
334 | 334 | - [Form Input Bindings](../guide/forms.html)
|
335 | 335 | - [Components - Form Input Components using Custom Events](../guide/component-custom-events.html#v-model-arguments)
|
336 | 336 |
|
337 | 337 | ## v-slot
|
338 | 338 |
|
339 |
| -- **Shorthand:** `#` |
| 339 | +- **Forma abreviada:** `#` |
340 | 340 |
|
341 |
| -- **Expects:** JavaScript expression that is valid in a function argument position (supports destructuring in [supported environments](../guide/component-slots.html#destructuring-slot-props)). Optional - only needed if expecting props to be passed to the slot. |
| 341 | +- **Espera:** JavaScript expression that is valid in a function argument position (supports destructuring in [supported environments](../guide/component-slots.html#destructuring-slot-props)). Optional - only needed if expecting props to be passed to the slot. |
342 | 342 |
|
343 |
| -- **Argument:** slot name (optional, defaults to `default`) |
| 343 | +- **Argumento:** slot name (optional, defaults to `default`) |
344 | 344 |
|
345 |
| -- **Limited to:** |
| 345 | +- **Limitado a:** |
346 | 346 |
|
347 | 347 | - `<template>`
|
348 | 348 | - [components](../guide/component-slots.html#abbreviated-syntax-for-lone-default-slots) (for a lone default slot with props)
|
349 | 349 |
|
350 |
| -- **Usage:** |
| 350 | +- **Uso:** |
351 | 351 |
|
352 | 352 | Denote named slots or slots that expect to receive props.
|
353 | 353 |
|
354 |
| -- **Example:** |
| 354 | +- **Exemplo:** |
355 | 355 |
|
356 | 356 | ```html
|
357 | 357 | <!-- Named slots -->
|
|
386 | 386 |
|
387 | 387 | For more details, see the links below.
|
388 | 388 |
|
389 |
| -- **See also:** |
| 389 | +- **Ver também:** |
390 | 390 | - [Components - Slots](../guide/component-slots.html)
|
391 | 391 |
|
392 | 392 | ## v-pre
|
393 | 393 |
|
394 |
| -- **Does not expect expression** |
| 394 | +- **Não espera expressão** |
395 | 395 |
|
396 |
| -- **Usage:** |
| 396 | +- **Uso:** |
397 | 397 |
|
398 | 398 | Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.
|
399 | 399 |
|
400 |
| -- **Example:** |
| 400 | +- **Exemplo:** |
401 | 401 |
|
402 | 402 | ```html
|
403 | 403 | <span v-pre>{{ this will not be compiled }}</span>
|
404 | 404 | ```
|
405 | 405 |
|
406 | 406 | ## v-cloak
|
407 | 407 |
|
408 |
| -- **Does not expect expression** |
| 408 | +- **Não espera expressão** |
409 | 409 |
|
410 |
| -- **Usage:** |
| 410 | +- **Uso:** |
411 | 411 |
|
412 | 412 | This directive will remain on the element until the associated component instance finishes compilation. Combined with CSS rules such as `[v-cloak] { display: none }`, this directive can be used to hide un-compiled mustache bindings until the component instance is ready.
|
413 | 413 |
|
414 |
| -- **Example:** |
| 414 | +- **Exemplo:** |
415 | 415 |
|
416 | 416 | ```css
|
417 | 417 | [v-cloak] {
|
|
429 | 429 |
|
430 | 430 | ## v-once
|
431 | 431 |
|
432 |
| -- **Does not expect expression** |
| 432 | +- **Não espera expressão** |
433 | 433 |
|
434 |
| -- **Details:** |
| 434 | +- **Detalhes:** |
435 | 435 |
|
436 | 436 | Render the element and component **once** only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped. This can be used to optimize update performance.
|
437 | 437 |
|
|
451 | 451 | </ul>
|
452 | 452 | ```
|
453 | 453 |
|
454 |
| -- **See also:** |
| 454 | +- **Ver também:** |
455 | 455 | - [Data Binding Syntax - interpolations](../guide/template-syntax.html#text)
|
456 | 456 |
|
457 | 457 | ## v-is
|
458 | 458 |
|
459 | 459 | > Note: this section only affects cases where Vue templates are directly written in the page's HTML.
|
460 | 460 |
|
461 |
| -- **Expects:** string literal |
| 461 | +- **Espera:** string literal |
462 | 462 |
|
463 |
| -- **Limited to:** native HTML elements |
| 463 | +- **Limitado a:** native HTML elements |
464 | 464 |
|
465 |
| -- **Usage:** When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements. As a workaround, we can use `v-is` directive on these elements: |
| 465 | +- **Uso:** When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements. As a workaround, we can use `v-is` directive on these elements: |
466 | 466 |
|
467 | 467 | ```html
|
468 | 468 | <table>
|
|
0 commit comments