diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 3e869cddb6..17a53ec40f 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -11,7 +11,7 @@ ro_gz_size: "17.14" ### Notas de compatibilidad -Vue **no** está soportado en IE8 ni versiones anteriores, porque utiliza características de ECMAScript 5 que son irreproducibles en ellos. Sin embargo soporta todos los [navegadores compatibles con ECMAScript 5](http://caniuse.com/#feat=es5). +Vue **no** da soporte a IE8 ni versiones anteriores, ya que utiliza características de ECMAScript 5 que son irreproducibles en ellos. Sin embargo, soporta todos los [navegadores compatibles con ECMAScript 5](http://caniuse.com/#feat=es5). ### Notas de lanzamiento @@ -19,21 +19,21 @@ Se pueden encontrar notas de lanzamiento detalladas para cada versión en [GitHu ## Versión independiente -Simplemente descargala e incluyela con una etiqueta script. `Vue` se registrará como una variable global. +Sencillamente descárgala e inclúyela con una etiqueta script. `Vue` se registrará como una variable global. -

No utilices la versión minificada durante el desarrollo. ¡Perderás todas las advertencias para los errores comunes!

+

No utilices la versión minificada durante el desarrollo. ¡Te perderás todas las advertencias para los errores más comunes!

-Versión de desarrolloCon todas las advertencias y el modo depuración. +Versión de desarrolloCon todas las advertencias y en modo de depuración. Versión de producciónAdvertencias eliminadas, {{gz_size}}kb min+gzip
### CDN -Recomendación: [unpkg](https://unpkg.com/vue/dist/vue.js), el cual contendrá la última versión apenas haya sido publicada en npm. También puedes explorar el código fuente del paquete npm en [unpkg.com/vue/](https://unpkg.com/vue/). +Recomendación: [unpkg](https://unpkg.com/vue/dist/vue.js), el cual contiene la última versión disponible, apenas se haya publicado en npm. También puedes explorar el código fuente del paquete npm en [unpkg.com/vue/](https://unpkg.com/vue/). -También se encuentra disponible en [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) o [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js), pero estos dos servicios pueden tardar algún tiempo en sincronizar, por lo que la última versión puede no estar disponible todavía. +También se encuentra disponible en [jsdelivr](//cdn.jsdelivr.net/vue/{{vue_version}}/vue.js) o [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js), pero éstos dos servicios pueden tardar algún tiempo en sincronizarse, por lo que la última versión puede no estar disponible todavía. ## NPM @@ -45,15 +45,15 @@ $ npm install vue ``` ### Versión independiente vs. versión _Runtime-only_ -Hay dos versiones disponibles, la independiente y la _runtime-only_. La diferencia es que la primera incluye un **compilador de plantillas** y la última no. +Hay dos versiones disponibles: la independiente y la _runtime-only_. La diferencia entre ellas está en que la primera incluye un **compilador de plantillas** y la última no. -El compilador de plantillas es responsable de compilar plantillas de Vue en funciones de renderizado de JavaScript puro. Si deseas utilizar la opción `template`, entonces necesitas el compilador. +El compilador de plantillas es el responsable de compilar las plantillas de Vue en funciones de renderizado de JavaScript puro. Si deseas utilizar la opción `template`, entonces necesitarás el compilador. -- La versión independiente incluye el compilador y soporta la opción `template`. **También depende de la presencia de APIs del navegador, por lo que no puedes usarlo para renderizado del lado servidor.** +- La versión independiente incluye el compilador y brinda soporte a la opción `template`. **También depende de la presencia de las APIs del navegador, por lo que no puedes usarlo para el renderizado del lado servidor.** -- La versión _runtime-only_ no incluye el compilador de plantillas y no soporta la opción `template`. Solo puedes utilizar la opción `render` cuando estás utilizando esta versión, pero funciona con componentes de un solo archivo, porque las plantillas de los componentes de un solo archivo son pre-compiladas en funciones `render` durante la etapa de construcción. La versión _runtime-only_ es aproximadamente 30% más liviana que la versión independiente, ocupando solo {{ro_gz_size}}kb min+gzip. +- La versión _runtime-only_ no incluye el compilador de plantillas y no brinda soporte a la opción `template`. Solo puedes utilizar la opción `render` cuando estés utilizando esta versión, pero funcionará con componentes de un solo archivo, ya que las plantillas con componentes de un solo archivo son pre-compiladas en funciones `render` durante su etapa de construcción. La versión _runtime-only_ es aproximadamente 30% más liviana que la versión independiente, ocupando tan solo {{ro_gz_size}}kb min+gzip. -Por defecto, el paquete NPM exporta la versión **runtime-only**. Para utilizar la versión independiente, añade el siguiente alias en tu archivo de configuración de Webpack: +De forma predeterminada, el gestor NPM exporta la versión **runtime-only**. Para utilizar la versión independiente, añade el siguiente alias a tu archivo de configuración de Webpack: ``` js resolve: { @@ -71,17 +71,17 @@ Para Browserify, puedes añadir un alias a tu archivo package.json: }, ``` -

No realices un `import Vue from 'vue/dist/vue.js'` - dado que algunas herramientas en bibliotecas de terceros pueden también importar vue y podría causar que la aplicación intente cargar ambas versiones al mismo tiempo, conduciendo a errores.

+

No realices un `import Vue from 'vue/dist/vue.js'` - dado que algunas herramientas en librerías de terceros pueden también importar vue, lo que podría causar que la aplicación intente cargar ambas versiones al mismo tiempo, conduciendo con ello a errores.

### Ambientes CSP -Algunos ambientes, como las aplicaciones de Google Chrome, imponen las Políticas de Seguridad de Contenido (CSP por sus siglas en inglés), las cuales prohiben el uso de `new Function()` para la evaluación de expresiones. La versión independiente depende de esta característica para compilar plantillas, por lo que no es posible utilizarla en estos ambientes. +En algunos ambientes, como las aplicaciones de Google Chrome, imponen las Políticas de Seguridad de Contenido (CSP por sus siglas en inglés), las cuales prohíben el uso de `new Function()` para la evaluación de expresiones. La versión independiente depende de ésta característica para compilar las plantillas, por lo que no es posible utilizarla en estos ambientes. -Por otro lado, la versión _runtime-only_ es completamente compatible con CSP. Cuando utilices la versión _runtime-only_ [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) o [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), tus plantillas serán pre-compiladas en funciones `render` las cuales funcionan perfectamente en ambientes CSP. +Por otro lado, la versión _runtime-only_ es completamente compatible con CSP. Cuando utilices la versión _runtime-only_ [Webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) o [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple), tus plantillas serán precompiladas en funciones `render` las cuales funcionan perfectamente en ambientes CSP. ## CLI -Vue.js provee una [CLI oficial](https://github.com/vuejs/vue-cli) para estructurar rápidamente Aplicaciones de una Sola Página (SPA por sus siglas en inglés). Provee configuraciones _todo-en-uno_ para un flujo de trabajo frontend moderno. Solo toma unos minutos estar preparado para el desarrollo con: recarga en caliente, _lint-on-save_ y versiones listas para producción: +Vue.js provee una [CLI oficial](https://github.com/vuejs/vue-cli) para estructurar rápidamente Aplicaciones de una Sola Página (SPA por sus siglas en inglés), así como provee configuraciones _todo-en-uno_ para un flujo de trabajo frontend moderno. Tomará solo unos minutos estar preparado para desarrollar aplicaciones con: _hot-reload_, _lint-on-save_ y versiones listas para producción: ``` bash # Instala vue-cli @@ -94,11 +94,11 @@ $ npm install $ npm run dev ``` -

La _CLI_ asume un conocimiento previo de Node.js y las herramientas de trabajo asociadas. Si eres principiante con Vue o las herramientas de desarrollo front-end, te recomendamos fervientemente leer la guía sin ninguna herramienta de desarrollo previo a usar la _CLI_.

+

La _CLI_ asume un conocimiento previo de Node.js y las herramientas de trabajo asociadas. Si eres principiante con Vue o las herramientas de desarrollo frontend, te recomendamos fervientemente leer la guía sin ninguna herramienta de desarrollo previo antes de usar la _CLI_.

-## Versión desarrollo +## Versión de desarrollo -**Importante**: los archivos construidos dentro de la carpeta `/dist` de GitHub son compiladas solo durante lanzamientos. Para utilizar el código fuente más reciente de Vue en GitHub, ¡tendrás que construirlo tú mismo! +**Importante**: los archivos construidos dentro de la carpeta `/dist` de GitHub son compilados solo durante los lanzamientos. Para utilizar el código fuente más reciente de Vue en GitHub, ¡tendrás que construirlo tú mismo! ``` bash git clone https://github.com/vuejs/vue.git node_modules/vue diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index a650f2f2d0..7a0a1febce 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -6,7 +6,7 @@ order: 15 ## Fundamentos -Vue recomienda utilizar plantillas para generar tu HTML in la gran mayoría de los casos. Sin embargo, hay situaciones donde puedes necesitar todo el poder programático de JavaScript. Ahí es donde puedes utilizar **la función render**, una alternativa a las plantillas más parecida a un compilador. +Vue recomienda utilizar plantillas para generar tu HTML en la gran mayoría de los casos. Sin embargo, hay situaciones donde puedes necesitar todo el poder programático de JavaScript. Ahí es donde puedes utilizar **la función render**, una alternativa a las plantillas y más parecida a un compilador. Veamos un ejemplo sencillo donde la función `render` sería práctica. Digamos que quieres generar encabezados con anclas: @@ -65,7 +65,7 @@ Vue.component('anchored-heading', { Esa plantilla no parece estar bien. No solo es repetitiva, sino que estamos duplicando `` en cada nivel de encabezado y tendremos que hacer lo mismo cuando agreguemos el elemento ancla. Además, hemos envuelto todo en un `div` inútil porque los componentes deben contener solo un nodo raíz. -A pesar que las plantillas funcionan muy bien para la mayoría de los componentes, es claro que este no es el caso. Intentemos reescribirlo con una función `render`: +A pesar de que las plantillas funcionan muy bien para la mayoría de los componentes, es claro que éste no es el caso. Intentemos reescribirlo con una función `render`: ``` js Vue.component('anchored-heading', { @@ -84,17 +84,17 @@ Vue.component('anchored-heading', { }) ``` -¡Mucho más simple! Casi. El código es más simple, pero require estar familiarizado con las propiedades de instancia de Vue. En este caso, debes saber que cuando pasas hijos sin un atributo `slot` a un componente, tales como el `Hello world!` dentro de `anchored-heading`, esos hijos son almacenados en la instancia del componente como `$slots.default`. Si todavía no lo hiciste, **es recomendable que leas la [API de las propiedades de instancia](../api/#vm-slots) antes que utilices las funciones de renderizado.** +¡Mucho más simple! Casi. El código es más sencillo, pero requiere estar familiarizado con las propiedades de instancia de Vue. En este caso, debes saber que cuando pasas hijos sin un atributo `slot` a un componente, tales como el `Hello world!` dentro de `anchored-heading`, esos hijos son almacenados en la instancia del componente como `$slots.default`. Si todavía no lo hiciste, **es recomendable que leas la [API de las propiedades de instancia](../api/#vm-slots) antes de que utilices las funciones de renderizado.** ## Parámetros de `createElement` -Lo segundo con lo que tendrás que familiarizarte es con como usar las características de las plantillas en la función `createElement`. Aquí están los parámetros que acepta `createElement`: +Lo segundo con lo que tendrás que familiarizarte es con cómo usar las características de las plantillas en la función `createElement`. Aquí están los parámetros que acepta `createElement`: ``` js // @returns {VNode} createElement( // {String | Object | Function} - // Un nombre de etiqueta HTML, opciones de componente, o función + // Un nombre de etiqueta HTML, opciones de componente o función // que devuelva uno de los dos anteriores. Requerido. 'div', @@ -121,16 +121,16 @@ createElement( ### El objeto de datos en profundidad -Una cosa a tener en cuenta: similar a la manera en que `v-bind:class` y`v-bind:style` tienen un tratamiento especial en las plantillas, tienen sus propios campos de nivel superior en los objetos de datos VNode. +Debes tener en cuenta una cosa: similar a la manera en que `v-bind:class` y`v-bind:style` tienen un tratamiento especial en las plantillas, los mismos tienen sus propios campos de nivel superior en los objetos de datos VNode. ``` js { - // Misma API que `v-bind:class` + // La misma API que `v-bind:class` 'class': { foo: true, bar: false }, - // Misma API que `v-bind:style` + // La misma API que `v-bind:style` style: { color: 'red', fontSize: '14px' @@ -147,9 +147,9 @@ Una cosa a tener en cuenta: similar a la manera en que `v-bind:class` y`v-bind:s domProps: { innerHTML: 'baz' }, - // Los controladores de eventos están anidadas bajo "on", sin - // embargo los modificadores como in v-on:keyup.enter no - // están soportados. Tendrás que verificar manualmente + // Los controladores de eventos están anidados bajo "on", sin + // embargo, los modificadores como en v-on:keyup.enter no + // tienen soporte. Tendrás que verificar manualmente // el código de la tecla en la función. on: { click: this.clickHandler @@ -160,9 +160,9 @@ Una cosa a tener en cuenta: similar a la manera en que `v-bind:class` y`v-bind:s nativeOn: { click: this.nativeClickHandler }, - // Custom directives. Note that the binding's - // oldValue cannot be set, as Vue keeps track - // of it for you. + // Directivas personalizadas. Ten en cuenta que el enlazado + // de oldValue no se puede establecer, ya que Vue mantiene un + // seguimiento del mismo por tí. directives: [ { name: 'my-custom-directive', @@ -174,7 +174,7 @@ Una cosa a tener en cuenta: similar a la manera en que `v-bind:class` y`v-bind:s } } ], - // _Slots_ dentro del ámbito de la forma + // _Slots_ dentro del ámbito en la forma // { name: props => VNode | Array } scopedSlots: { default: props => createElement('span', props.text) @@ -190,7 +190,7 @@ Una cosa a tener en cuenta: similar a la manera en que `v-bind:class` y`v-bind:s ### Ejemplo completo -Con este conocimiento, podemos ahora terminar el componente que iniciamos: +Con este conocimiento, ahora podemos terminar el componente que iniciamos: ``` js var getChildrenTextContent = function (children) { @@ -203,7 +203,7 @@ var getChildrenTextContent = function (children) { Vue.component('anchored-heading', { render: function (createElement) { - // create kebabCase id + // crear kebabCase id var headingId = getChildrenTextContent(this.$slots.default) .toLowerCase() .replace(/\W+/g, '-') @@ -234,7 +234,7 @@ Vue.component('anchored-heading', { #### Los VNodes deben ser únicos -Todos los VNodes en un árbol de componente deben ser únicos. Eso significa que la siguiente función de renderizado es inválida: +Todos los VNodes en un árbol de componentes deben ser únicos. Esto significa que la siguiente función de renderizado no es válida: ``` js render: function (createElement) { @@ -262,7 +262,7 @@ render: function (createElement) { ### `v-if` y `v-for` -Donde algo pueda ser solucionado con JavaScript puro, las funciones de renderizado de Vue no proveen una alternativa propietaria. Por ejemplo, en una plantilla utilizando `v-if` y `v-for`: +Cada vez que algo pueda ser solucionado con JavaScript puro, las funciones de renderizado de Vue no proveen una alternativa propietaria. Por ejemplo, en una plantilla utilizando `v-if` y `v-for`: ``` html