You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Modificación y traducción de los archivos .vitepress/config.ts, .vitepress/theme/components/PreferenceSwitch.vue, src/guide/essentials/template-syntax.md, src/guide/quick-start.md, src/style-guide/index.md, src/style-guide/rules-essential.md, src/style-guide/rules-strongly-recommended.md
Copy file name to clipboardExpand all lines: src/guide/essentials/template-syntax.md
+34-34Lines changed: 34 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,84 +1,84 @@
1
1
# Sintaxis de la Template
2
2
3
-
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
3
+
Vue utiliza una sintaxis de template basada en HTML que te permite vincular declarativamente el renderizado del DOM con los datos de la instancia del componente subyacente. Todas las templates de Vue son HTML sintácticamente válido que pueden ser analizados por navegadores y por analizadores de HTML que cumplan las especificaciones.
4
4
5
-
Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
5
+
Entre bastidores, Vue compila las templates en código JavaScript altamente optimizado. Combinado con el sistema de reactividad, Vue es capaz de descifrar de manera inteligente la cantidad mínima de componentes a re-renderizar y aplicar la cantidad mínima de manipulaciones al DOM cuando cambia el estado de la aplicación.
6
6
7
-
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](/guide/extras/render-function.html)instead of templates, with optional JSX support. However, do note that they do not enjoy the same level of compile-time optimizations as templates.
7
+
Si estás familiarizado con los conceptos de Virtual DOM y prefieres la potencia bruta de JavaScript, también puedes [escribir directamente funciones de renderizado](/guide/extras/render-function.html)en lugar de templates, con soporte opcional para JSX. Sin embargo, ten en cuenta que no disfrutarás el mismo nivel de optimizaciones en tiempo de compilación como con las plantillas.
8
8
9
-
## Text Interpolation
9
+
## Interpolación de Texto
10
10
11
-
The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
11
+
La forma más básica de vinculación de datos es la interpolación de texto utilizando la sintaxis de "Mustache" o bigotes (dobles llaves):
12
12
13
13
```vue-html
14
-
<span>Message: {{ msg }}</span>
14
+
<span>Mensaje: {{ msg }}</span>
15
15
```
16
16
17
-
The mustache tag will be replaced with the value of the `msg`property from the corresponding component instance. It will also be updated whenever the `msg` property changes.
17
+
La etiqueta del mustache se reemplazará con el valor de la propiedad `msg`de la instancia del componente correspondiente. También se actualizará cada vez que cambie la propiedad `msg`.
18
18
19
-
## Raw HTML
19
+
## HTML Puro
20
20
21
-
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](/api/built-in-directives.html#v-html):
21
+
Los dobles mustaches interpretan los datos como texto sin formato, no como HTML. Para generar HTML real, necesitarás usar la [directiva `v-html`](/api/built-in-directives.html#v-html):
<p>Usando interpolación de texto: {{ rawHtml }}</p>
34
+
<p>Usando la directiva v-html: <spanv-html="rawHtml"></span></p>
35
35
</div>
36
36
37
-
Here we're encountering something new. The `v-html`attribute you're seeing is called a **directive**. Directives are prefixed with `v-`to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, we're basically saying "keep this element's inner HTML up-to-date with the `rawHtml`property on the current active instance."
37
+
Aquí nos encontramos con algo nuevo. El atributo `v-html`que estás viendo se llama **directiva**. Las directivas tienen el prefijo `v-`para indicar que son atributos especiales proporcionados por Vue y, como habrás adivinado, aplican un comportamiento reactivo especial al DOM renderizado. Básicamente estamos diciendo "manten actualizado el HTML interno de este elemento con la propiedad `rawHtml`en la instancia activa actual".
38
38
39
-
The contents of the `span`will be replaced with the value of the`rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html`to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
39
+
El contenido de `span`se reemplazará con el valor de la propiedad`rawHtml`, interpretado como HTML sin formato: los datos vinculados se ignoran. Ten en cuenta que no puedes usar `v-html`para componer templates parciales, porque Vue no es un motor de templates basado en cadenas. En su lugar, se prefieren los componentes como unidad fundamental para la reutilización y composición de la interfaz de usuario.
40
40
41
-
:::warning Security Warning
42
-
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html`on trusted content and **never**on user-provided content.
41
+
:::warning Advertencia de seguridad
42
+
El HTML arbitrario renderizado dinámicamente en tu sitio web puede ser muy peligroso porque puede conducir fácilmente a [vulnerabilidades XSS](https://es.wikipedia.org/wiki/Cross-site_scripting). Utiliza `v-html`solo en contenido confiable y **nunca**en contenido proporcionado por el usuario.
43
43
:::
44
44
45
-
## Attribute Bindings
45
+
## Enlaces de Atributos
46
46
47
-
Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](/api/built-in-directives.html#v-bind):
47
+
Los mustaches no se pueden usar dentro de los atributos HTML. En su lugar, utiliza una directiva [`v-bind`](/api/built-in-directives.html#v-bind):
48
48
49
49
```vue-html
50
50
<div v-bind:id="dynamicId"></div>
51
51
```
52
52
53
-
The `v-bind`directive instructs Vue to keep the element's`id`attribute in sync with the component's`dynamicId`property. If the bound value is`null`or`undefined`, then the attribute will be removed from the rendered element.
53
+
La directiva `v-bind`le indica a Vue que mantenga el atributo`id`del elemento sincronizado con la propiedad`dynamicId`del componente. Si el valor vinculado es`null`o`undefined`, el atributo se eliminará del elemento renderizado.
54
54
55
-
### Shorthand
55
+
### Abreviatura
56
56
57
-
Because `v-bind`is so commonly used, it has a dedicated shorthand syntax:
57
+
Debido a que `v-bind`se usa con tanta frecuencia, tiene una sintaxis abreviada dedicada:
58
58
59
59
```vue-html
60
60
<div :id="dynamicId"></div>
61
61
```
62
62
63
-
Attributes that start with `:`may look a bit different from normal HTML, but it is in fact a valid character for attribute names and all Vue-supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is optional, but you will likely appreciate it when you learn more about its usage later.
63
+
Los atributos que comienzan con `:`pueden verse un poco diferentes del HTML normal, pero de hecho es un carácter válido para los nombres de atributos y todos los navegadores compatibles con Vue pueden analizarlo correctamente. Además, no aparecen en el renderizado final. La sintaxis abreviada es opcional, pero probablemente la apreciarás cuando aprendas más sobre su uso más adelante.
64
64
65
-
> For the rest of the guide, we will be using the shorthand syntax in code examples, as that's the most common usage for Vue developers.
65
+
> Para el resto de la guía, usaremos la sintaxis abreviada en los ejemplos de código, ya que es la más comúnmente usada para los desarrolladores de Vue.
66
66
67
-
### Boolean Attributes
67
+
### Atributos Booleanos
68
68
69
-
[Boolean attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes)are attributes that can indicate true / false values by its presence on an element. For example, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)is one of the most commonly used boolean attributes.
69
+
Los [atributos booleanos](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes)son atributos que pueden indicar valores verdadero/falso por su presencia en un elemento. Por ejemplo, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)es uno de los atributos booleanos más comúnmente utilizados.
The `disabled`attribute will be included if `isButtonDisabled`has a [truthy value](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). It will also be included if the value is an empty string, maintaining consistency with `<button disabled="">`. For other falsy values the attribute will be omitted.
77
+
El atributo `disabled`se incluirá si `isButtonDisabled`tiene un [valor verdadero (thruty)](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). También se incluirá si el valor es una cadena vacía, manteniendo la coherencia con `<button disabled="">`. Para otros valores falsos, se omitirá el atributo.
78
78
79
-
### Dynamically Binding Multiple Attributes
79
+
### Vinculación Dinámica de Múltiples Atributos
80
80
81
-
If you have a JavaScript object representing multiple attributes that looks like this:
81
+
Si tienes un objeto de JavaScript representando múltiples atributos que se ve así:
82
82
83
83
<divclass="composition-api">
84
84
@@ -105,13 +105,13 @@ data() {
105
105
106
106
</div>
107
107
108
-
You can bind them to a single element by using`v-bind`without an argument:
108
+
Puedes vincularlos a un único elemento usando`v-bind`sin un argumento:
109
109
110
110
```vue-html
111
111
<div v-bind="objectOfAttrs"></div>
112
112
```
113
113
114
-
## Using JavaScript Expressions
114
+
## Usando Expresiones JavaScript
115
115
116
116
So far we've only been binding to simple property keys in our templates. But Vue actually supports the full power of JavaScript expressions inside all data bindings:
117
117
@@ -164,7 +164,7 @@ Template expressions are sandboxed and only have access to a [restricted list of
164
164
165
165
Globals not explicitly included in the list, for example user-attached properties on `window`, will not be accessible in template expressions. You can, however, explicitly define additional globals for all Vue expressions by adding them to [`app.config.globalProperties`](/api/application.html#app-config-globalproperties).
166
166
167
-
## Directives
167
+
## Directivas
168
168
169
169
Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](/api/built-in-directives.html), including `v-html` and `v-bind` which we have introduced above.
Copy file name to clipboardExpand all lines: src/guide/quick-start.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ footer: false
6
6
7
7
Según tu caso de uso y preferencias, puedes usar Vue con o sin un paso de compilación.
8
8
9
-
## Con Herramientas de Construcción
9
+
## Con Herramientas de Empaquetado
10
10
11
11
Una configuración de desarrollo nos permite usar los [Componentes de un Solo Archivo](/guide/scaling-up/sfc) (SFC) de Vue. La configuración de desarrollo oficial de Vue se basa en [Vite](https://vitejs.dev), una herramienta de compilación frontend que es moderna, ligera y extremadamente rápida.
12
12
@@ -64,7 +64,7 @@ Esto creará una compilación de tu aplicación lista para producción en el dir
64
64
65
65
[Próximos Pasos >](#next-steps)
66
66
67
-
## Sin Herramientas de Construcción
67
+
## Sin Herramientas de Empaquetado
68
68
69
69
Para comenzar con Vue sin un paso de compilación, simplemente copia el siguiente código en un archivo HTML y ábrelo en tu navegador:
Copy file name to clipboardExpand all lines: src/style-guide/index.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,44 +2,44 @@
2
2
outline: deep
3
3
---
4
4
5
-
# Style Guide
5
+
# Guía de estilo
6
6
7
-
:::warning Status Notice
8
-
The style guide is currently a bit outdated. Most examples are in Options API only, and there are no rules regarding `<script setup>`and Composition API. We are planning to improve it in the future.
7
+
:::warning Notificación de Estado
8
+
La guía de estilo está un poco desactualizada. La mayoría de los ejemplos se refieren solo en la Option API y no hay reglas con respecto al `<script setup>`ni la Composition API. Estamos planeando mejorarla en el futuro.
9
9
:::
10
10
11
-
This is the official style guide for Vue-specific code. If you use Vue in a project, it's a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don't believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values.
11
+
Esta es la guía de estilo oficial específica para el código de Vue. Si usas Vue en un proyecto, esta es una excelente referencia para evitar errores, superficialidad y antipatrones. Sin embargo, creemos que ninguna guía de estilo es ideal para todos los equipos o proyectos, por lo que recomendamos desviaciones conscientes en función a la experiencia, la tecnología pertinente y los intereses individuales.
12
12
13
-
For the most part, we also avoid suggestions about JavaScript or HTML in general. We don't mind whether you use semicolons or trailing commas. We don't mind whether your HTML uses single-quotes or double-quotes for attribute values. Some exceptions will exist however, where we've found that a particular pattern is helpful in the context of Vue.
13
+
En su mayor parte, evitamos las sugerencias sobre JavaScript o HTML en general. No nos importa si usa puntos y comas o comas finales. No nos importa si su HTML usa comillas simples o comillas dobles para los valores de los atributos. Sin embargo, existirán algunas excepciones donde hemos encontrado que un patrón particular es útil en el contexto de Vue.
14
14
15
-
Finally, we've split rules into four categories:
15
+
Finalmente, hemos dividido las reglas en cuatro categorías:
16
16
17
-
## Rule Categories
17
+
## Categorías
18
18
19
-
### Priority A: Essential (Error Prevention)
19
+
### Prioridad A: Esencial (Prevención de Errores)
20
20
21
-
These rules help prevent errors, so learn and abide by them at all costs. Exceptions may exist, but should be very rare and only be made by those with expert knowledge of both JavaScript and Vue.
21
+
Estas reglas ayudan a prevenir errores; apréndelas y apégate a ellas a toda costa. Pueden existir excepciones, pero deberían ser muy raras y solo las deben realizar por personas expertas tanto en JavaScript como en Vue.
22
22
23
-
-[See all priority A rules](./rules-essential)
23
+
-[Ver todas las reglas de Prioridad A](./rules-essential)
24
24
25
-
### Priority B: Strongly Recommended
25
+
### Prioridad B: Muy Recomendado
26
26
27
-
These rules have been found to improve readability and/or developer experience in most projects. Your code will still run if you violate them, but violations should be rare and well-justified.
27
+
Se ha encontrado que estas reglas mejoran la legibilidad y/o la experiencia del desarrollador en la mayoría de los proyectos. Tu código se ejecutará aún si no las respetas, pero las violaciones deberían ser raras y estar bien justificadas.
28
28
29
-
-[See all priority B rules](./rules-strongly-recommended)
29
+
-[Ver todas las reglas de Prioridad B](./rules-strong-recommended)
30
30
31
-
### Priority C: Recommended
31
+
### Prioridad C: Recomendado
32
32
33
-
Where multiple, equally good options exist, an arbitrary choice can be made to ensure consistency. In these rules, we describe each acceptable option and suggest a default choice. That means you can feel free to make a different choice in your own codebase, as long as you're consistent and have a good reason. Please do have a good reason though! By adapting to the community standard, you will:
33
+
Donde existen múltiples opciones, todas igualmente buenas, se puede hacer una elección arbitraria para garantizar la coherencia. En estas reglas, describimos cada opción aceptable y sugerimos una opción predeterminada. Eso significa que puedes sentirte libre de hacer una elección diferente en tu código base, siempre que esta sea coherente y tengas una buena razón. ¡Por favor, ten al menos una buena razón! Al adaptarte al estándar de la comunidad, tu:
34
34
35
-
1.Train your brain to more easily parse most of the community code you encounter
36
-
2.Be able to copy and paste most community code examples without modification
37
-
3.Often find new hires are already accustomed to your preferred coding style, at least in regards to Vue
35
+
1.Entrenas tu cerebro para analizar más fácilmente la mayor parte del código de la comunidad que encuentres.
36
+
2.Serás capaz de copiar y pegar la mayoría de los ejemplos de código de la comunidad sin modificaciones.
37
+
3.A menudo encuentras nuevos desarrolladores acostumbrados a tu estilo de codificación preferido, al menos en lo que respecta a Vue.
38
38
39
-
-[See all priority C rules](./rules-recommended)
39
+
-[Ver todas las reglas de Prioridad C](./rules-recommended)
40
40
41
-
### Priority D: Use with Caution
41
+
### Prioridad D: usar con Precaución
42
42
43
-
Some features of Vue exist to accommodate rare edge cases or smoother migrations from a legacy code base. When overused however, they can make your code more difficult to maintain or even become a source of bugs. These rules shine a light on potentially risky features, describing when and why they should be avoided.
43
+
Algunas características de Vue existen para adaptarse a casos extremos raros o migraciones más fluidas desde una base de código legada. Sin embargo, cuando se usan en exceso, pueden hacer que tu código sea más difícil de mantener o incluso convertirse en una fuente de errores. Estas reglas arrojan luz sobre las características potencialmente riesgosas y describen cuándo y por qué deben evitarse.
44
44
45
-
-[See all priority D rules](./rules-use-with-caution)
45
+
-[Ver todas las reglas de Prioridad D](./rules-use-with-caution)
0 commit comments