From 718b100f382ab0f2ae803ada8107da0fbf606ee5 Mon Sep 17 00:00:00 2001 From: carlos solis Date: Thu, 20 Dec 2018 02:25:31 -0300 Subject: [PATCH 01/13] =?UTF-8?q?Traducci=C3=B3n=20cookbook=20index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/cookbook/index.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/v2/cookbook/index.md b/src/v2/cookbook/index.md index 1729e743f4..ae7b0c1d87 100644 --- a/src/v2/cookbook/index.md +++ b/src/v2/cookbook/index.md @@ -4,39 +4,39 @@ type: cookbook order: 0 --- -## WORK IN PROGRESS +## TRABAJO EN PROGRESO -

This cookbook is still in its very early stages. At this point, we will not be linking to it from anywhere else. Pages may be removed or reorganized at any time. Even the goals and overall format are still in flux.

+

Este recetario está todavía en sus primeras etapas. En este punto, no estaremos enlazando a él desde ningún otro lugar. Las páginas pueden ser removidas o reorganizadas en cualquier momento. Incluso los objetivos y el formato general están todavía en cambios.

-## The Cookbook vs the Guide +## El recetario vs la guía -How is the cookbook different from the guide? Why is this necessary? +¿En qué se diferencia el recetario de la guía? ¿Por qué es necesario? -- __Greater Focus__: In the guide, we're essentially telling a story. Each section builds on and assumes knowledge from each previous section. In the cookbook, each recipe can and should stand on its own. This means recipes can focus on one specific aspect of Vue, rather than having to give a general overview. +- __Mayor enfoque__: En la guía, esencialmente estamos contando una historia. Cada sección se basa en los conocimientos de cada sección anterior y los asume. En el recetario, cada receta puede y debe ser independiente. Esto significa que las recetas pueden centrarse en un aspecto específico de Vue, en lugar de tener que dar una visión general. -- __Greater Depth__: To avoid making the guide too long, we try to include only the simplest possible examples to help you understand each feature. Then we move on. In the cookbook, we can include more complex examples, combining features in interesting ways. Each recipe can also be as long and detailed as it needs to be, in order to fully explore its niche. +- __Mayor profundidad__: Para evitar que la guía sea demasiado larga, tratamos de incluir sólo los ejemplos más simples posibles para ayudarle a entender cada característica. Desde allí seguimos avanzando. En el recetario, podemos incluir ejemplos más complejos, combinando características de maneras interesantes. Cada receta puede ser tan larga y detallada como sea necesario, para poder explorar a fondo su nicho. -- __Teaching JavaScript__: In the guide, we assume at least intermediate familiarity with ES5 JavaScript. For example, we won't explain how `Array.prototype.filter` works in a computed property that filters a list. In the cookbook however, essential JavaScript features (including ES6/2015+) can be explored and explained in the context of how they help us build better Vue applications. +- __Enseñanza de JavaScript__: En la guía, asumimos al menos una familiaridad intermedia con ES5 JavaScript. Por ejemplo, no explicaremos cómo funciona `Array.prototype.filter` en una propiedad calculada que filtra una lista. En el recetario, sin embargo, las características esenciales de JavaScript (incluyendo ES6/2015+) pueden ser exploradas y explicadas en el contexto de cómo nos ayudan a construir mejores aplicaciones de Vue. -- __Exploring the Ecosystem__: For advanced features, we assume some ecosystem knowledge. For example, if you want to use single-file components in Webpack, we don't explain how to configure the non-Vue parts of the Webpack config. In the cookbook, we have the space to explore these ecosystem libraries in more depth - at least to the extent that is universally useful for Vue developers. +- __Explorando el ecosistema__: Para las características avanzadas, asumimos un cierto conocimiento del ecosistema. Por ejemplo, si desea utilizar componentes de un solo archivo en Webpack, no explicamos cómo configurar las partes de menor importancia de la configuración de Webpack. En el recetario, tenemos el espacio para explorar estas librerías de ecosistemas en mayor profundidad, al menos en la medida en que sean de utilidad universal para los desarrolladores de Vue. -## Guidelines for Recipes +## Pautas para las recetas -Recipes should generally: +En general, las recetas deberían: -> 1. Solve a specific, common problem +> 1. Resolver un problema específico y común -> 2. Start with the simplest possible example +> 2. Comenzar con el ejemplo más simple posible -> 3. Introduce complexities one at a time +> 3. Introducir las complejidades de una en una -> 4. Link to other docs, rather than re-explaining concepts +> 4. Vincularse a otros documentos, en lugar de volver a explicar los conceptos -> 5. Describe the problem, rather than assuming familiarity +> 5. Describir el problema, en lugar de asumir la familiaridad -> 6. Explain the process, rather than just the end result +> 6. Explicar el proceso, y no sólo el resultado final -> 7. Explain the pros and cons of your strategy, including when it is and isn't appropriate +> 7. Explicar los pros y los contras de su estrategia, incluyendo cuándo es y cuándo no es apropiada -> 8. Mention alternative solutions, if relevant, but leave in-depth explorations to a separate recipe +> 8. Mencionar soluciones alternativas, si son pertinentes, pero dejar las exploraciones en profundidad a una receta separada From b401c64fd44552b088c1b30d21878889d72b85b8 Mon Sep 17 00:00:00 2001 From: carlos solis Date: Sun, 23 Dec 2018 03:51:03 -0300 Subject: [PATCH 02/13] =?UTF-8?q?traducci=C3=B3n=20cookbook/adding-instanc?= =?UTF-8?q?e-properties.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/cookbook/adding-instance-properties.md | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index b9b03d6abb..5dd58d18ff 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -1,18 +1,18 @@ --- -title: Adding Instance Properties +title: Agregar propiedades de instancia type: cookbook order: 1.1 --- -## Simple Example +## Ejemplo Simple -There may be data/utilities you'd like to use in many components, but you don't want to [pollute the global scope](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md). In these cases, you can make them available to each Vue instance by defining them on the prototype: +Pueden haber datos/utilidades que le gustaría usar en muchos componentes, pero no desea [contaminar el alcance global](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md). En estos casos, puede ponerlos a disposición de cada instancia de Vue definiéndolos en el prototype: ``` js Vue.prototype.$appName = 'My App' ``` -Now `$appName` is available on all Vue instances, even before creation. If we run: +Ahora `$appName` está disponible en todas las instancias de Vue, incluso antes de su creación. Si ejecutamos: ``` js new Vue({ @@ -22,31 +22,31 @@ new Vue({ }) ``` -Then `"My App"` will be logged to the console! +A continuación, `"My App"` se registrará en la consola. -## The Importance of Scoping Instance Properties +## La importancia de determinar el alcance de las propiedades de una instancia -You may be wondering: +Tal vez se esté preguntando: -> "Why does `appName` start with `$`? Is that important? What does it do? +> ¿Por qué `appName` comienza con `$`? ¿Es eso importante? ¿Qué es lo que hace? -No magic is happening here. `$` is a convention Vue uses for properties that are available to all instances. This avoids conflicts with any defined data, computed properties, or methods. +Aquí no hay magia. `$` es una convención que Vue utiliza para propiedades que están disponibles para todas las instancias. Esto evita conflictos con cualquier dato definido, propiedades calculadas o métodos. -> "Conflicts? What do you mean?" +> ¿Conflictos? ¿Qué quieres decir?" -Another great question! If you set: +Otra gran pregunta! Si se establece: ``` js Vue.prototype.appName = 'My App' ``` -Then what would you expect to be logged below? +Entonces, ¿qué espería que se registre más abajo? ``` js new Vue({ data: { - // Uh oh - appName is *also* the name of the - // instance property we defined! + // ¡Uh oh - appName es *además* el nombre de la + // propiedad de la instancia que definimos! appName: 'The name of some other app' }, beforeCreate: function () { @@ -58,13 +58,13 @@ new Vue({ }) ``` -It would be `"The name of some other app"`, then `"My App"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features. +Sería `"The name of some other app"`, luego `"My App"`, porque `this.appName` es sobreescrito ([o algo parecido](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) por `data` cuando se crea la instancia. Las propiedades de instancia se analizan con `$` para evitarlo. Incluso puede usar su propia convención si lo desea, como `$_appName` o `ΩappName`, para evitar incluso conflictos con plugins o futuras características. -## Real-World Example: Replacing Vue Resource with Axios +## Ejemplo del mundo real: Reemplazar el recurso Vue por Axios -Let's say you're replacing the [now-retired Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). You really enjoyed accessing request methods through `this.$http` and you want to do the same thing with Axios instead. +Digamos que está reemplazando el [ahora ya retirado Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). Usted realmente disfrutó accediendo a los métodos de petición a través de `this.$http` y desea hacer lo mismo con Axios. -All you have to do is include axios in your project: +Todo lo que tiene que hacer es incluir Axios en su proyecto: ``` html @@ -76,13 +76,13 @@ All you have to do is include axios in your project: ``` -Alias `axios` to `Vue.prototype.$http`: +Alias de `axios` para `Vue.prototype.$http`: ``` js Vue.prototype.$http = axios ``` -Then you'll be able to use methods like `this.$http.get` in any Vue instance: +Y ahora podrá usar métodos como `this.$http.get` en cualquier instancia de Vue: ``` js new Vue({ @@ -100,11 +100,11 @@ new Vue({ }) ``` -## The Context of Prototype Methods +## El contexto de los métodos en el prototype -In case you're not aware, methods added to a prototype in JavaScript gain the context of the instance. That means they can use `this` to access data, computed properties, methods, or anything else defined on the instance. +En caso de que no lo sepa, los métodos añadidos a un prototype en JavaScript ganan el contexto de la instancia. Esto significa que pueden usar `this` para acceder a datos, propiedades calculadas, métodos o cualquier otra cosa definida en la instancia. -Let's take advantage of this in a `$reverseText` method: +Aprovechemos esto en un método `$reverseText`: ``` js Vue.prototype.$reverseText = function (propertyName) { @@ -123,7 +123,7 @@ new Vue({ }) ``` -Note that the context binding will __not__ work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: +Tenga en cuenta que la vinculación de contexto __no funcionará__ si utiliza una función de flecha ES6/2015, ya que se vinculan implícitamente con su ámbito superior. Esto significa en la versión de la función de flecha: ``` js Vue.prototype.$reverseText = propertyName => { @@ -131,37 +131,37 @@ Vue.prototype.$reverseText = propertyName => { } ``` -Would throw an error: +Podría arrojar un error: ``` log Uncaught TypeError: Cannot read property 'split' of undefined ``` -## When To Avoid This Pattern +## Cuándo evitar este patrón -As long as you're vigilant in scoping prototype properties, using this pattern is quite safe - as in, unlikely to produce bugs. +Siempre y cuando se esté atento a las propiedades de prototype, el uso de este patrón es bastante seguro, e improbable que produzca errores. -However, it can sometimes cause confusion with other developers. They might see `this.$http`, for example, and think, "Oh, I didn't know about this Vue feature!" Then they move to a different project and are confused when `this.$http` is undefined. Or, maybe they want to Google how to do something, but can't find results because they don't realize they're actually using Axios under an alias. +Sin embargo, a veces puede causar confusión con otros desarrolladores. Podrían ver `this.$http`, por ejemplo, y pensar, "¡Oh, yo no sabía de esta característica de Vue! Luego cambian a un proyecto diferente y se confunden al encontrar que `this.$http` devuelve un valor indefinido. O, tal vez quieran buscar en Google cómo hacer algo, pero no pueden encontrar resultados porque no se dan cuenta de que están usando Axios bajo un alias. -__The convenience comes at the cost of explicitness.__ When looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? +___La conveniencia viene a costa de la claridad.___ ¿ Cuando se mira un componente, es imposible saber de dónde viene `$http` realmente? ¿Un plugin? ¿Un compañero de trabajo? -So what are the alternatives? +Entonces, ¿cuáles son las alternativas? -## Alternative Patterns +## Patrones alternativos -### When Not Using a Module System +### Cuando no se esta utilizando un sistema de módulos -In applications with __no__ module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. +En aplicaciones __sin__ sistema de módulos (por ejemplo, a través de Webpack o Browserify), hay un patrón que se utiliza a menudo con cualquier frontend mejorado con JavaScript: un objeto `App` global. -If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: +Si lo que quiere añadir no tiene nada que ver con Vue específicamente, esto puede ser una buena alternativa por considerar. Aquí hay un ejemplo: ``` js var App = Object.freeze({ name: 'My App', description: '2.1.4', helpers: { - // This is a purely functional version of - // the $reverseText method we saw earlier + // Esta es una versión puramente funcional + // del método $reverseText que vimos anteriormente reverseText: function (text) { return text.split('').reverse().join('') } @@ -169,11 +169,11 @@ var App = Object.freeze({ }) ``` -

If you raised an eyebrow at `Object.freeze`, what it does is prevent the object from being changed in the future. This essentially makes all its properties constants, protecting you from future state bugs.

+

Si ha levantado una ceja con `Object.freeze`, lo que hace es evitar que el objeto se modifique en el futuro. Esto esencialmente hace que todas sus propiedades sean constantes, protegiéndole de futuros errores de estado.

-Now the source of these shared properties is more obvious: there's an `App` object defined somewhere in the app. To find it, developers can run a project-wide search. +Ahora el origen de estas propiedades compartidas es más obvio: hay un objeto `App` definido en algún lugar de la aplicación. Para encontrarlo, los desarrolladores pueden realizar una búsqueda en todo el proyecto. -Another advantage is that `App` can now be used _anywhere_ in your code, whether it's Vue-related or not. That includes attaching values directly to instance options, rather than having to enter a function to access properties on `this`: +Otra ventaja es que `App` ahora puede ser usado _en cualquier lugar_ en su código, ya sea que esté relacionado con Vue o no. Esto incluye adjuntar valores directamente a las opciones de instancia, en lugar de tener que introducir una función para acceder a las propiedades en `this`: ``` js new Vue({ @@ -186,8 +186,8 @@ new Vue({ }) ``` -### When Using a Module System +### Cuando se utiliza un sistema de módulos -When you have access to a module system, you can easily organize shared code into modules, then `require`/`import` those modules wherever they're needed. This is the epitome of explicitness, because in each file you gain a list of dependencies. You know _exactly_ where each one came from. +Cuando se tiene acceso a un sistema de módulos, se puede organizar fácilmente el código compartido en módulos y, a continuación, requerir o importar (`require`/`import`) esos módulos dondequiera que se necesiten. Este es el epítome de lo explícito, porque en cada archivo se obtiene una lista de dependencias. Se sabe _exactamente_ de dónde vino cada uno. -While certainly more verbose, this approach is definitely the most maintainable, especially when working with other developers and/or building a large app. +Aunque ciertamente es más verboso, este enfoque es definitivamente el más mantenible, especialmente cuando se trabaja con otros desarrolladores y/o se construye una aplicación de gran tamaño. From fbee42648596c275990df61e31a4c6118981a73c Mon Sep 17 00:00:00 2001 From: Miljan Date: Sun, 23 Dec 2018 21:36:18 +0100 Subject: [PATCH 03/13] revision --- src/v2/cookbook/adding-instance-properties.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index 5dd58d18ff..ac7577aba5 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -160,8 +160,8 @@ var App = Object.freeze({ name: 'My App', description: '2.1.4', helpers: { - // Esta es una versión puramente funcional - // del método $reverseText que vimos anteriormente + // Esta es una versión puramente funcional + // del método $reverseText que vimos anteriormente reverseText: function (text) { return text.split('').reverse().join('') } From c22a2a2a796deb1c663e3f00aa303ef81ee950aa Mon Sep 17 00:00:00 2001 From: carlos solis Date: Sat, 29 Dec 2018 02:50:53 -0300 Subject: [PATCH 04/13] =?UTF-8?q?Traducci=C3=B3n=20/src/v2/guide/class-and?= =?UTF-8?q?-style.md=20Cambios=20menores=20en=20/src/v2/guide/class-and-st?= =?UTF-8?q?yle.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/class-and-style.md | 38 +++--- src/v2/guide/comparison.md | 204 ++++++++++++++++---------------- 2 files changed, 122 insertions(+), 120 deletions(-) diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 104eea410a..fded9a06a9 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -4,21 +4,21 @@ type: guide order: 6 --- -Una necesidad común para la vinculación de datos es manipular la lista de clases de un elemento, así como sus estilos en línea. Como ambos son atributos, podemos usar `v-bind` para controlarlos: sólo debemos calcular un string final con nuestras expresiones. Sin embargo, trabajar con concatenaciones de strings es molesto y propenso a errores. Por esta razón, Vue ofrece mejoras especiales cuando `v-bind` es usado junto con `class` and `style`. En adición a strings, las expresiones pueden también ser evaluadas a objetos o arrays. +Una necesidad común para la vinculación de datos es manipular la lista de clases de un elemento y sus estilos en línea. Como ambos son atributos, podemos usar `v-bind` para manejarlos: sólo necesitamos calcular una cadena de texto final con nuestras expresiones. Sin embargo, trabajar con concatenaciones de cadenas de texto es molesto y propenso a errores. Por esta razón, Vue proporciona mejoras especiales cuando se utiliza `v-bind` con `class` y `style`. Además de las cadenas de texto, las expresiones también pueden evaluar objetos o arrays. ## Vinculación de datos en clases HTML ### Sintaxis de objeto -Podemos pasar un objeto a `v-bind:class` para intercambiar dinámicamente las clases: +Podemos pasar un objeto a `v-bind:class` para cambiar dinámicamente de clase: ``` html
``` -La sintaxis anterior ilustra que la presencia de la clase `active` será determinada por el [thrutiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) de la propiedad `isActive`. +La sintaxis anterior significa que la presencia de la clase `active` estará determinada por el [thrutiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) de la propiedad `isActive`. -Puede intercambiar múltiples clases si tiene más campos en el objeto. Además, la directiva `v-bind:class` puede coexistir con el atributo común `class`. De modo que en la siguiente plantilla: +Puede alternar múltiples clases al tener más campos en el objeto. Además, la directiva `v-bind:class` también puede coexistir con el atributo `class` regular. Así que, dada la siguiente plantilla: ``` html
``` -Siempre que `isActive` o `hasError` cambie, la lista de clases será actualizada acordemente. Por ejemplo, si `hasError` toma el valor `true`, la lista de clases cambiará a `"static active text-danger".` +Cuando `isActive` o `hasError` cambien, la lista de clases se actualizará en consecuencia. Por ejemplo, si `hasError` se convierte en `true`, la lista de clases se convertirá en `"static active text-danger"`. -El objeto vinculado no debe necesariamente estar en línea: +El objeto vinculado no tiene que estar en línea: ``` html
@@ -57,7 +57,7 @@ data: { } ``` -Esto mostrará el mismo resultado. También podemos vincular a una [propiedad calculada](computed.html) que retorne un objeto. Esto es un patrón muy común y poderoso: +Esto dará el mismo resultado. También podemos vincular a una [propiedad calculada](computed.html) que devuelve un objeto. Este es un patrón común y poderoso: ``` html
@@ -97,15 +97,15 @@ Lo cual renderizará:
``` -Si quisiera también intercambiar condicionalmente una clase en el listado de clases, lo puede hacer con una expresión ternaria: +Si también desea alternar condicionalmente una clase de la lista, puede hacerlo con una expresión ternaria: ``` html
``` -Esto siempre aplicará `errorClass`, pero solo aplicará `activeClass` cuando `isActive` tenga valor `true`. +Esto siempre aplicará `errorClass`, pero sólo se aplicará `activeClass` cuando `isActive` sea verdadero. -Sin embargo, esto puede ser un poco extenso si tiene múltiples clases condicionales. Por esto también es posible usar la sintaxis de objeto dentro de la sintaxis de array: +Sin embargo, esto puede ser un poco extenso si tiene varias clases condicionales. Es por eso que también es posible usar la sintaxis de objeto dentro de la sintaxis de array: ``` html
@@ -113,9 +113,9 @@ Sin embargo, esto puede ser un poco extenso si tiene múltiples clases condicion ### Con Componentes -> Esta sección asume conocimientos previos de [Componentes Vue](components.html). Sea libre de saltar ésta sección y regresar más adelante. +> Esta sección asume conocimientos previos de [Componentes Vue](components.html). Siéntase libre de omitirla y regresar más tarde. -Cuando usa el atributo `class` en un componente personalizado, los cambios serán añadidos al elemento raíz del componente. Las clases existentes de dicho elemento no serán sobreescritas. +Cuando utilice el atributo `class` en un componente personalizado, esas clases se añadirán al elemento raíz del componente. Las clases existentes en este elemento no serán sobrescritas. Por ejemplo, si declara este componente: @@ -137,7 +137,7 @@ El HTML renderizado será:

Hi

``` -Lo mismo aplica en el uso de vinculación de datos en clases: +Lo mismo ocurre en el uso de vinculación de datos en clases: ``` html @@ -153,7 +153,7 @@ Cuando `isActive` es `true`, el HTML renderizado será: ### Sintaxis de objeto -La sintaxis de objetos para `v-bind:style` es bastante sencilla - casi parece CSS, excepto que es un objeto javascript. Puede usar camelCase o kebab-case (use comillas con kebab-case) para los nombres de propiedades: +La sintaxis del objeto para `v-bind:style` es bastante sencilla - casi parece CSS, excepto que es un objeto JavaScript. Puede usar camelCase o kebab-case (use comillas con kebab-case) para los nombres de las propiedades CSS: ``` html
@@ -165,7 +165,7 @@ data: { } ``` -A menudo es una buena idea vincular a un objeto de estilos directamente para que la plantilla sea más limpia: +A menudo es una buena idea vincular a un objeto de estilos directamente para que la plantilla esté más limpia: ``` html
@@ -179,7 +179,7 @@ data: { } ``` -De nuevo, la sintaxis de objeto es comúnmente usada junto con propiedades calculadas que retornan objetos. +Una vez más, la sintaxis de objeto se utiliza a menudo junto con las propiedades calculadas que devuelven los objetos. ### Sintaxis de Array @@ -191,7 +191,7 @@ La sintaxis de array para `v-bind:style` le permite aplicar múltiples objetos d ### Prefijos automáticos -Cuando use una propiedad CSS que requiera [prefijos de navegador](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) en `v-bind:style`, por ejemplo `transform`, Vue automáticamente detectará y añadira los prefijos apropiados a los estilos aplicados. +Cuando use una propiedad CSS que requiera [prefijos de navegador](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) en `v-bind:style`, por ejemplo `transform`, Vue detectará y añadirá automáticamente los prefijos apropiados a los estilos aplicados. ### Múltiples valores @@ -203,4 +203,4 @@ A partir de 2.3.0+ puede asignar un array con múltiples valores (prefijados) a
``` -Esto sólo renderizará el último valor en el array que sea soportado por el navegador. En este ejemplo, será traducido `display: flex` para navegadores que soporten la versión no prefijada de flexbox. +Esto sólo renderizará el último valor en el array que sea soportado por el navegador. En este ejemplo, mostrará `display: flex` para los navegadores que soportan la versión sin prefijos de flexbox. \ No newline at end of file diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md index 88d3994aad..8eba7a1a8a 100644 --- a/src/v2/guide/comparison.md +++ b/src/v2/guide/comparison.md @@ -1,78 +1,80 @@ --- -title: Comparison with Other Frameworks +title: Comparación con otros frameworks type: guide order: 801 --- -This is definitely the most difficult page in the guide to write, but we do feel it's important. Odds are, you've had problems you tried to solve and you've used another library to solve them. You're here because you want to know if Vue can solve your specific problems better. That's what we hope to answer for you. +Esta es definitivamente la página más difícil de escribir en la guía, pero creemos que es importante. Lo más probable es que haya tenido problemas que intentó resolver y haya usado otra librería para ello. Está aquí porque quiere saber si Vue puede resolver mejor sus problemas específicos. Eso es lo que esperamos responder por usted. -We also try very hard to avoid bias. As the core team, we obviously like Vue a lot. There are some problems we think it solves better than anything else out there. If we didn't believe that, we wouldn't be working on it. We do want to be fair and accurate though. Where other libraries offer significant advantages, such as React's vast ecosystem of alternative renderers or Knockout's browser support back to IE6, we try to list these as well. -We'd also like **your** help keeping this document up-to-date because the JavaScript world moves fast! If you notice an inaccuracy or something that doesn't seem quite right, please let us know by [opening an issue](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide). +También nos esforzamos por evitar los prejuicios. Como equipo central, obviamente nos gusta mucho Vue. Hay algunos problemas que creemos que resuelve mejor que cualquier otra opción. Si no creyéramos eso, no estaríamos trabajando en ello. Sin embargo, queremos ser justos y precisos. Mientras que otras librerías ofrecen ventajas significativas, como el vasto ecosistema de renderizadores alternativos de React o la compatibilidad con navegadores de Knockout con IE6, también intentamos enumerarlas. + +También nos gustaría **su** ayuda para mantener este documento actualizado porque el mundo JavaScript se mueve rápido! Si usted nota una inexactitud o algo que no parece correcto, por favor háganoslo saber [creando un issue](https://github.com/vuejs/vuejs.org/issues/new?title=Inaccuracy+in+comparisons+guide). ## React -React and Vue share many similarities. They both: +React y Vue comparten muchas similitudes. Ambos: + +- utilizan un DOM virtual +- proporcionan componentes de vista reactivos y componibles +- mantienen el enfoque en la librería central, con temas como el enrutamiento y la gestión global del estado manejadas por librerías asociadas -- utilize a virtual DOM -- provide reactive and composable view components -- maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries +Siendo tan similares en alcance, hemos dedicado más tiempo a afinar esta comparación que cualquier otra. Queremos garantizar no sólo la precisión técnica, sino también el equilibrio. Señalamos dónde React supera a Vue, por ejemplo en la riqueza de su ecosistema y la abundancia de sus renderizadores personalizados. -Being so similar in scope, we've put more time into fine-tuning this comparison than any other. We want to ensure not only technical accuracy, but also balance. We point out where React outshines Vue, for example in the richness of their ecosystem and abundance of their custom renderers. +Dicho esto, es inevitable que la comparación parezca sesgada hacia Vue para algunos usuarios de React, ya que muchos de los temas explorados son hasta cierto punto subjetivos. Reconocemos la existencia de diferentes gustos técnicos, y esta comparación tiene como objetivo principal esbozar las razones por las que Vue podría ser potencialmente una mejor opción si sus preferencias coinciden con las nuestras. -With that said, it's inevitable that the comparison would appear biased towards Vue to some React users, as many of the subjects explored are to some extent subjective. We acknowledge the existence of varying technical taste, and this comparison primarily aims to outline the reasons why Vue could potentially be a better fit if your preferences happen to coincide with ours. +La comunidad de React [ha sido fundamental](https://github.com/vuejs/vuejs.org/issues/364) para ayudarnos a lograr este equilibrio, con un agradecimiento especial a Dan Abramov del equipo de React. Fue extremadamente generoso con su tiempo y su considerable experiencia para ayudarnos a refinar este documento hasta que estuvimos [ambos contentos](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740) con el resultado final. -The React community [has been instrumental](https://github.com/vuejs/vuejs.org/issues/364) in helping us achieve this balance, with special thanks to Dan Abramov from the React team. He was extremely generous with his time and considerable expertise to help us refine this document until we were [both happy](https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740) with the final result. +### Rendimiento -### Performance +Tanto React como Vue ofrecen un rendimiento comparable en los casos de uso más comunes, con Vue normalmente un poco por delante debido a su implementación más ligera del DOM virtual. Si le interesan los números, puede consultar este [benchmark independiente](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts/table.html) que se centra en el rendimiento de renderizado/actualización en bruto. Observe que esto no tiene en cuenta estructuras de componentes complejas, por lo que sólo debería considerarse una referencia y no un veredicto. -Both React and Vue offer comparable performance in most commonly seen use cases, with Vue usually slightly ahead due to its lighter-weight Virtual DOM implementation. If you are interested in numbers, you can check out this [3rd party benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts/table.html) which focuses on raw rendering/updating performance. Note that this does not take complex component structures into account, so should only be considered a reference rather than a verdict. +#### Esfuerzos de optimización -#### Optimization Efforts +En React, cuando el estado de un componente cambia, activa el re-renderizado de todo el subárbol de componentes, comenzando en ese componente como raíz. Para evitar repeticiones innecesarias de componentes hijo, necesita usar `PureComponent` o implementar `shouldComponentUpdate` siempre que pueda. También es posible que necesite utilizar estructuras de datos inmutables para que los cambios de estado sean más fáciles de optimizar. Sin embargo, en algunos casos puede que no pueda confiar en dichas optimizaciones porque `PureComponent/shouldComponentUpdate` asume que el resultado del renderizado de todo el subárbol está determinado por los props del componente actual. Si ese no es el caso, entonces tales optimizaciones pueden llevar a un estado DOM inconsistente. -In React, when a component's state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root. To avoid unnecessary re-renders of child components, you need to either use `PureComponent` or implement `shouldComponentUpdate` whenever you can. You may also need to use immutable data structures to make your state changes more optimization-friendly. However, in certain cases you may not be able to rely on such optimizations because `PureComponent/shouldComponentUpdate` assumes the entire sub tree's render output is determined by the props of the current component. If that is not the case, then such optimizations may lead to inconsistent DOM state. +En Vue, las dependencias de un componente se rastrean automáticamente durante su renderizado, por lo que el sistema sabe con precisión qué componentes deben volver a renderizarse cuando cambia el estado. Se puede considerar que cada componente tiene `shouldComponentUpdate` automáticamente implementado, sin las precauciones de los componentes anidados. -In Vue, a component's dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes. Each component can be considered to have `shouldComponentUpdate` automatically implemented for you, without the nested component caveats. +En general, esto le elimina la necesidad de toda una clase de optimizaciones de rendimiento a los desarrolladores, y les permite centrarse más en la construcción de la aplicación en sí misma a medida que va escalando. -Overall this removes the need for a whole class of performance optimizations from the developer's plate, and allows them to focus more on building the app itself as it scales. +### HTML Y CSS -### HTML & CSS +En React, todo es únicamente JavaScript. No sólo las estructuras HTML se expresan a través de JSX, sino que las tendencias recientes también apuntan a poner la gestión de CSS dentro de JavaScript. Este enfoque tiene sus propios beneficios, pero también viene con varias desventajas que no parecen valer la pena para todos los desarrolladores. -In React, everything is just JavaScript. Not only are HTML structures expressed via JSX, the recent trends also tend to put CSS management inside JavaScript as well. This approach has its own benefits, but also comes with various trade-offs that may not seem worthwhile for every developer. -Vue embraces classic web technologies and builds on top of them. To show you what that means, we'll dive into some examples. +Vue adopta las tecnologías web clásicas y construye a partir de ellas. Para mostrarles lo que eso significa, nos sumergiremos en algunos ejemplos. -#### JSX vs Templates +#### JSX vs Plantillas -In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript. +En React, todos los componentes expresan su interfaz de usuario dentro de las funciones de render utilizando JSX, una sintaxis declarativa similar a XML que funciona con JavaScript. -Render functions with JSX have a few advantages: +Las funciones de renderizado con JSX tienen algunas ventajas: -- You can leverage the power of a full programming language (JavaScript) to build your view. This includes temporary variables, flow controls, and directly referencing JavaScript values in scope. +- Puede aprovechar la potencia de un lenguaje de programación completo (JavaScript) para crear su vista. Esto incluye variables temporales, controles de flujo y referencias directas a los valores JavaScript en el ámbito de aplicación. -- The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what's currently available for Vue templates. +- El soporte de herramientas (p.e. linting, comprobación de tipos, autocompletado del editor) para JSX es en algunos aspectos más avanzado que el disponible actualmente para las plantillas de Vue. -In Vue, we also have [render functions](render-function.html) and even [support JSX](render-function.html#JSX), because sometimes you do need that power. However, as the default experience we offer templates as a simpler alternative. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own: +En Vue, también tenemos [funciones de render](render-function.html) e incluso [soporte JSX](render-function.html#JSX), porque a veces se necesita esa potencia. Sin embargo, como experiencia por defecto ofrecemos plantillas como una alternativa más simple. Cualquier HTML válido es también una plantilla Vue válida, y esto lleva a algunas ventajas propias: -- For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective. +- Para muchos desarrolladores que han trabajado con HTML, las plantillas se sienten más naturales para leer y escribir. La preferencia en sí misma puede ser algo subjetiva, pero si hace que el desarrollador sea más productivo, entonces el beneficio es objetivo. -- HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue's reactivity features. +- Las plantillas basadas en HTML hacen mucho más fácil la migración progresiva de las aplicaciones existentes para aprovechar las características de reactividad de Vue. -- It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase. +- También hace que sea mucho más fácil para los diseñadores y desarrolladores menos experimentados analizar y contribuir a la base de código. -- You can even use pre-processors such as Pug (formerly known as Jade) to author your Vue templates. +- Incluso puede utilizar preprocesadores como Pug (antes conocido como Jade) para crear sus plantillas de Vue. -Some argue that you'd need to learn an extra DSL (Domain-Specific Language) to be able to write templates - we believe this difference is superficial at best. First, JSX doesn't mean the user doesn't need to learn anything - it's additional syntax on top of plain JavaScript, so it can be easy for someone familiar with JavaScript to learn, but saying it's essentially free is misleading. Similarly, a template is just additional syntax on top of plain HTML and thus has very low learning cost for those who are already familiar with HTML. With the DSL we are also able to help the user get more done with less code (e.g. `v-on` modifiers). The same task can involve a lot more code when using plain JSX or render functions. +Algunos argumentan que necesitarías aprender un DSL (Domain-Specific Language) extra para poder escribir plantillas - creemos que esta diferencia es superficial en el mejor de los casos. Primero, JSX no significa que el usuario no necesite aprender nada - es sintaxis adicional encima del JavaScript regular, así que puede ser fácil para alguien familiarizado con JavaScript aprender, pero decir que es esencialmente gratis es engañoso. Del mismo modo, una plantilla es sólo una sintaxis adicional encima de HTML regular y, por lo tanto, tiene un coste de aprendizaje muy bajo para aquellos que ya están familiarizados con HTML. Con el DSL también podemos ayudar al usuario a hacer más con menos código (por ejemplo, los modificadores `v-on`). La misma tarea puede implicar mucho más código cuando se utilizan funciones JSX o de render. -On a higher level, we can divide components into two categories: presentational ones and logical ones. We recommend using templates for presentational components and render function / JSX for logical ones. The percentage of these components depends on the type of app you are building, but in general we find presentational ones to be much more common. +En un nivel superior, podemos dividir los componentes en dos categorías: los de presentación y los lógicos. Recomendamos el uso de plantillas para los componentes de presentación y la función de render / JSX para los lógicos. El porcentaje de estos componentes depende del tipo de aplicación que estés construyendo, pero en general encontramos que los de presentación son mucho más comunes. -#### Component-Scoped CSS +#### CSS con alcance a componentes -Unless you spread components out over multiple files (for example with [CSS Modules](https://github.com/gajus/react-css-modules)), scoping CSS in React is often done via CSS-in-JS solutions (e.g. [styled-components](https://github.com/styled-components/styled-components), [glamorous](https://github.com/paypal/glamorous), and [emotion](https://github.com/emotion-js/emotion)). This introduces a new component-oriented styling paradigm that is different from the normal CSS authoring process. Additionally, although there is support for extracting CSS into a single stylesheet at build time, it is still common that a runtime will need to be included in the bundle for styling to work properly. While you gain access to the dynamism of JavaScript while constructing your styles, the tradeoff is often increased bundle size and runtime cost. +A menos que extienda los componentes sobre múltiples archivos (por ejemplo, con [Módulos CSS](https://github.com/gajus/react-css-modules)) el alcance de CSS en React suele hacerse a través de soluciones CSS-en-JS (por ejemplo, [componentes de estilo](https://github.com/styled-components/styled-components), [glamorous](https://github.com/paypal/glamorous), y [emotion](https://github.com/emotion-js/emotion)). Esto introduce un nuevo paradigma de estilo orientado a componentes que es diferente del proceso normal de creación de CSS. Además, aunque hay soporte para extraer CSS en una sola hoja de estilo en el momento de la compilación, sigue siendo común que se necesite incluir un tiempo de ejecución en el paquete para que el estilo funcione correctamente. Mientras que usted obtiene acceso al dinamismo de JavaScript mientras construye sus estilos, la compensación es a menudo el aumento del tamaño del paquete y el costo del tiempo de ejecución. -If you are a fan of CSS-in-JS, many of the popular CSS-in-JS libraries support Vue (e.g. [styled-components-vue](https://github.com/styled-components/vue-styled-components) and [vue-emotion](https://github.com/egoist/vue-emotion)). The main difference between React and Vue here is that the default method of styling in Vue is through more familiar `style` tags in [single-file components](single-file-components.html). +Si eres un fan de CSS-en-JS, muchas de las librerías populares de CSS-en-JS soportan Vue (por ejemplo, [styled-components-vue](https://github.com/styled-components/vue-styled-components) y [vue-emotion](https://github.com/egoist/vue-emotion)). La principal diferencia entre React y Vue aquí es que el método por defecto de estilado en Vue es a través de etiquetas `style` más familiares en [componentes de un solo archivo](single-file-components.html). -[Single-file components](single-file-components.html) give you full access to CSS in the same file as the rest of your component code. +Los [Componentes de un solo archivo](single-file-components.html) le dan acceso completo a CSS en el mismo archivo que el resto del código de su componente. ``` html ``` -The optional `scoped` attribute automatically scopes this CSS to your component by adding a unique attribute (such as `data-v-21e5b78`) to elements and compiling `.list-container:hover` to something like `.list-container[data-v-21e5b78]:hover`. +El atributo opcional `scoped` incluye automáticamente este CSS en su componente añadiendo un atributo único (como `data-v-21e5b78`) a los elementos y compilando `.list-container:hover` a algo como `.list-container[data-v-21e5b78]:hover`. -Lastly, the styling in Vue's single-file component's is very flexible. Through [vue-loader](https://github.com/vuejs/vue-loader), you can use any preprocessor, post-processor, and even deep integration with [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html) -- all within the `