Spanish Subtitles for Vue.js 2 Quickstart Tutorial 2017



Subtitles / Closed Captions - Spanish

hola mi nombre es <font color="#E5E5E5">Dustin partir de la codificación de la </font>

calma manera inteligente y hoy en este <font color="#CCCCCC">video </font> Me gustaría <font color="#E5E5E5">darle</font><font color="#CCCCCC"> un corto </font> introducción en el <font color="#E5E5E5">front-end vista js2 </font> marco y la vista es un muy nuevo marco que gana un montón de tracción en este momento y en esta introducción

Yo te guiaré a través de los primeros pasos lo que necesita <font color="#CCCCCC">saber para empezar con una </font> marco y poner en marcha un proyecto de virus así que estad atentos <font color="#CCCCCC">bien primero es siempre una </font> buena idea echar <font color="#E5E5E5">un vistazo al proyecto </font> página web y la vista <font color="#CCCCCC">jas sitio web pueden ser </font>

encontrado en la EPU oscuro y <font color="#CCCCCC">se puede ver </font> aquí, así que ¿qué es exactamente vu vista como un brazo progresiva que tiene un marco guión que se centra en la construcción de interfaces de usuario por lo que sólo funciona en <font color="#E5E5E5">la capa de vista de </font> su aplicación y no tiene

supuestos de middleware y la <font color="#CCCCCC">espalda y </font> tecnologías que está utilizando lo que en realidad se puede trabajar en conjunto con todo el <font color="#E5E5E5">espalda y tecnologías que son comunes </font> disponibles <font color="#CCCCCC">para el desarrollo web en el </font> momento y se puede integrar fácilmente en

los <font color="#E5E5E5">proyectos existentes de golf y </font> que hace <font color="#E5E5E5">que sea muy fácil de integrar </font> Vista en sus proyectos existentes otra principal ventaja de una vista Jas es que es <font color="#E5E5E5">de buen calidad así como se puede </font><font color="#CCCCCC">leerlo </font> aquí es sólo 17 kilobytes y el tamaño y

eso significa que la biblioteca central y que hace que la aplicación de manera rápida ardiente la sobrecarga que va a agregar mediante la inclusión Ver <font color="#CCCCCC">las sillas </font><font color="#E5E5E5">en su proyecto es muy </font> pequeña y que se asegura de <font color="#CCCCCC">que su </font> aplicación es performant <font color="#CCCCCC">bien </font><font color="#E5E5E5">si </font>

<font color="#CCCCCC">quieren integrar de vista draya en su </font> proyecto hay <font color="#E5E5E5">diferentes maneras de </font> obra así que vamos a hacer clic aquí para obtener la guía una visión general de <font color="#E5E5E5">las diferentes opciones y </font> <font color="#E5E5E5">puede hacer clic en la instalación aquí en </font>

el menú de la izquierda y aquí se puede <font color="#CCCCCC">ver </font> <font color="#CCCCCC">hay diferentes opciones </font><font color="#E5E5E5">de modo de </font> <font color="#E5E5E5">ejemplo, usted puede incluir directamente por </font> el uso de una etiqueta de script en <font color="#CCCCCC">su página HTML </font> eso es <font color="#E5E5E5">básicamente todo lo que </font><font color="#CCCCCC">se necesita </font><font color="#E5E5E5">para </font> ponerse <font color="#CCCCCC">en marcha </font><font color="#E5E5E5">con vistas y que pueda </font>

<font color="#E5E5E5">integrarlo directamente mediante un script </font> etiquetar y utilizar el recurso de un contenido la red de suministro, por ejemplo, que ejecuta empaqueta una de la entrega de contenido redes que hace <font color="#CCCCCC">Weibull espectador j / s </font> y esa es la <font color="#CCCCCC">opción más fácil otra </font>

opción es <font color="#CCCCCC">utilizar el </font><font color="#E5E5E5">gestor de paquetes NPM </font> para instalar <font color="#CCCCCC">la vista por o simplemente tecleando </font> <font color="#E5E5E5">NPM instalar opinión de que se lo descargando </font> la biblioteca y <font color="#E5E5E5">agregarlo a las notas </font> carpeta de módulos de su proyecto y hay es <font color="#CCCCCC">otra versión y que es </font><font color="#E5E5E5">el otro </font>

Versión esa voluntad la que seremos utilizando en este video <font color="#CCCCCC">y eso es una vista </font> <font color="#CCCCCC">Jas CLI es una interfaz de línea de comandos y </font> con una interfaz de línea de comandos que está conseguir otro comandante que es el comando de vista y mediante el uso de ese comando

usted puede iniciar un nuevo proyecto que es basado en una plantilla y ya está incluyendo la vista de biblioteca para que no lo hace <font color="#CCCCCC">que</font><font color="#E5E5E5"> descargarlo en un paso separado </font> <font color="#E5E5E5">Bueno por lo que vamos a cambiar a </font><font color="#CCCCCC">la línea de comandos </font> y empezar a instalar el comando vista

interfaz de línea para que podamos <font color="#CCCCCC">utilizarlo para </font> <font color="#E5E5E5">iniciar nuestro primer proyecto y hacerlo </font> necesitamos <font color="#E5E5E5">decir NPM instalar y lo hago </font> como usuario root menos GA porque queremos <font color="#CCCCCC">para instalar la vista una línea de comandos </font> Interfaz como un comando global, por lo que necesitamos

para dar esa opción g para el mundial y el <font color="#CCCCCC">nombre del paquete es </font> Ver tablero, del CL I por lo que ejecuto mando y la instalación <font color="#E5E5E5">está tomando una </font> segundo bien aquí estamos se puede ver la la instalación se ha completado

con éxito y ahora <font color="#CCCCCC">la nueva vista </font> comando está disponible se puede ver aquí que tiene diferentes opciones y con el fin de generar un nuevo proyecto que <font color="#E5E5E5">estamos utilizando la </font> primera opción aquí en la adopción y nos hazlo de <font color="#E5E5E5">la siguiente manera vamos a guardar </font>

que en el mismo paquete de web, ya <font color="#E5E5E5">que </font><font color="#CCCCCC">desea </font> obtener la plantilla de proyecto que está utilizando el paquete de red de cargador de módulos y bundler y luego en <font color="#E5E5E5">el último parámetro </font> dar el nombre del proyecto y nosotros simplemente <font color="#E5E5E5">lo llaman vista de aplicación 01 y ahora es </font>

iniciar el proyecto se puede <font color="#E5E5E5">ver que es </font> la descarga de la plantilla y entonces es hacer algunas preguntas primero <font color="#CCCCCC">necesitamos </font> dar un <font color="#E5E5E5">nombre de proyecto aquí y que podamos </font> <font color="#E5E5E5">dejarlo en el valor por defecto aquí Ver aplicación </font><font color="#CCCCCC">01 </font> una descripción del proyecto, aunque si el

Aquí el autor por defecto y ahora es preguntar cómo la vista construida se debe hacer <font color="#E5E5E5">estamos eligiendo un tiempo de ejecución y compilar </font> eso es un método recomendado para los años Linda característica por el <font color="#CCCCCC">momento estoy diciendo </font><font color="#E5E5E5">que no y </font> aquí con respecto a la configuración de la prueba fue el karma

y atracador aunque no y de extremo a extremo pruebas no se ven de nuevo sin por lo que es todo lo que se necesita ahora es un nuevo proyecto carpeta se creó vista de aplicación <font color="#E5E5E5">y una </font> se <font color="#CCCCCC">puede ver que aquí el siguiente paso es </font> cambiar en esa carpeta y luego

completar la instalación mediante la instalación Al final de todo <font color="#CCCCCC">em paquetes necesarios para nuestro </font><font color="#E5E5E5">proyecto </font> usando el <font color="#E5E5E5">MNP el comando de instalación Bueno por lo </font> Vamos a hacer para que el interruptor en ese nuevo proyecto directorio y luego ejecutar <font color="#E5E5E5">la NGP instalar </font>

en ese directorio y ahora está trayendo descargar todos los paquetes definidos en el archivo JSON punto paquete que estaba <font color="#E5E5E5">añadido al </font><font color="#CCCCCC">proyecto que el archivo es </font> que contiene todas las dependencias y es la descarga de todas <font color="#CCCCCC">las dependencias y </font>

la instalación de los módulos de nodo en el carpeta módulos de nodo <font color="#CCCCCC">del proyecto </font><font color="#E5E5E5">y </font> esto <font color="#E5E5E5">lleva de nuevo un segundo </font><font color="#CCCCCC">para completar </font> <font color="#E5E5E5">bien aquí </font><font color="#CCCCCC">estamos esté terminado y ahora </font> podemos hacer una primera prueba y podemos empezar en el servidor web de la web de desarrollo

servidor para ejecutar el proyecto y <font color="#CCCCCC">que es </font> nuevo hecho con <font color="#E5E5E5">el </font><font color="#CCCCCC">comando y NPM </font> digamos que la NGP plazo def aquí <font color="#E5E5E5">bien puede </font> ver el navegador se abre automáticamente y se carga en el <font color="#CCCCCC">proyecto aquí en </font> Puerto host local de 8080 y se puede ver la

<font color="#CCCCCC">aplicación que se inicializa con una vista </font> comando ya se está ejecutando y mostrando esta salida aquí <font color="#E5E5E5">en el navegador y </font><font color="#CCCCCC">si </font> volver a la terminal se puede <font color="#CCCCCC">ver </font> que está diciendo bien se compiló con éxito y ahora lo que el servidor es

escuchando a localhost 8080 y es una servidor de recarga en vivo por lo que si estamos la implementación de cualquier cambio ahora el <font color="#CCCCCC">sitio web </font> <font color="#E5E5E5">se carga automáticamente sin ningún </font> pasos manuales se ven por qué no <font color="#E5E5E5">está bien así que vamos a </font> mantener nuestro proyecto que se ejecuta aquí <font color="#E5E5E5">y tengo </font>

<font color="#E5E5E5">abrió otra pestaña aquí en el comando </font> línea y estoy en el mismo proyecto directorio de aquí y ahora vamos a empezar mi editor de código y <font color="#E5E5E5">eso es Adam </font> para que podamos echar un <font color="#E5E5E5">vistazo a la </font> estructura del proyecto inicial <font color="#CCCCCC">es bien aquí </font>

así que vamos a cerrar y ver lo que hay <font color="#E5E5E5">dentro </font> fuera de nuestra carpeta de proyecto y aquí <font color="#E5E5E5">puede </font><font color="#CCCCCC">ver que hemos incluido varios archivos </font> aquí se puede ver el archivo package.json que es <font color="#CCCCCC">el fuego así sin dependencias </font> se enumeran y <font color="#E5E5E5">antes de que nos hemos asegurado </font>

que las dependencias han sido descargado <font color="#E5E5E5">e instalado en </font><font color="#CCCCCC">el nodo </font> carpeta de módulos mediante la ejecución del <font color="#CCCCCC">NPM en </font> comandos de estilo en la carpeta del proyecto y entonces <font color="#E5E5E5">el siguiente archivo que </font><font color="#CCCCCC">es importante es </font> el archivo index.html porque en <font color="#E5E5E5">ese archivo </font>

<font color="#E5E5E5">encuentre el punto de partida de la </font> aplicación y <font color="#E5E5E5">se puede ver que es una llanura </font> sencilla de archivos HTML hectáreas y en el cuerpo <font color="#CCCCCC">sección del archivo HTML que una sección diff </font> se incluye y <font color="#E5E5E5">que un brazo de deflexión </font> tiene un atributo aquí el atributo ID

y el atributo ID ID se le asigna una cadena en nuestro caso <font color="#E5E5E5">es que la cadena de aplicación </font> y <font color="#CCCCCC">z males brazo el marcador de posición para que </font> el marco vista sabe dónde insertar el contenido que <font color="#CCCCCC">se genera por la </font> vista de aplicación cuello bien abierta del próximo let

la carpeta de origen, porque lo que es una colocar en nuestra estructura de proyecto en el que el <font color="#CCCCCC">aplicación ver jes se implementa y </font> vamos a abrir dentro de esa carpeta del archivo <font color="#CCCCCC">jas principales puntos y ese es el lugar donde </font> la <font color="#CCCCCC">aplicación de visor se inicializa </font>

<font color="#E5E5E5">y se puede ver aquí estamos importando </font> dos cosas aquí primero tenemos que <font color="#E5E5E5">importar </font> una visión desde el punto de vista y <font color="#CCCCCC">que </font><font color="#E5E5E5">este es </font><font color="#CCCCCC">el </font> la clase principal de la aplicación y se puede ver aquí se usa <font color="#E5E5E5">para crear un nuevo </font> en vez de

marco y junto con una vista que está importando una segunda cosa, y que es aplicación desde el <font color="#CCCCCC">archivo de aplicación y que es una </font> componente estamos llevando a cabo aquí en nuestro proyecto, que está disponible <font color="#E5E5E5">aquí </font><font color="#CCCCCC">en </font> <font color="#E5E5E5">Ver Epcot vamos a echar un vistazo en un lado </font>

<font color="#CCCCCC">de que la aplicación de un segundo, pero </font> primero vamos a centrarnos en la parte aquí y la instancia nuevo marco vista es creado por <font color="#CCCCCC">el constructor llamándolos </font> mediante el uso de la nueva palabra clave y el constructor recibe un parámetro y

<font color="#E5E5E5">ese es el objetivo aquí con este </font> propiedades de reconfiguración y la primera <font color="#E5E5E5">propiedad aquí se puede ver que se llama </font><font color="#CCCCCC">al </font> <font color="#E5E5E5">para el elemento y que </font><font color="#CCCCCC">se le asigna la </font> cadena aquí y que está diciendo o principalmente una definición de que la salida <font color="#CCCCCC">de la vista </font>

<font color="#CCCCCC">aplicación debe ser insertado en el </font> elemento que <font color="#CCCCCC">es el ID de la aplicación y vimos </font> antes en el archivo index.html que asignado la aplicación serie a <font color="#CCCCCC">la propiedad z rd </font> y ahora nos estamos conectando nuestro punto de vista aplicación con ese elemento div por lo que la

salida que <font color="#CCCCCC">se genera el código HTML </font> salida que se <font color="#E5E5E5">genera </font><font color="#CCCCCC">por nuestro punto de vista </font> aplicación está reemplazando que div elemento dentro de nuestro archivo de índice HTML para aquí está la plantilla de nuestra aplicación y que la plantilla <font color="#CCCCCC">E es muy sencillo </font>

ya que sólo es <font color="#E5E5E5">un elemento que contiene </font> y <font color="#CCCCCC">que es el elemento Z AB que es </font> en referencia <font color="#E5E5E5">al componente de aplicación y por </font> el uso de ese elemento aquí en nuestra plantilla estamos definiendo que en la salida HTML que <font color="#CCCCCC">es generada por el componente de aplicación </font>

debe ser colocado aquí <font color="#E5E5E5">dentro de nuestra visión </font> plantilla por lo que es parte de la salida la cual nuestra solicitud vista y genera para poder utilizar en el <font color="#E5E5E5">elemento de aplicación </font> incluyendo aquí y la salida de la <font color="#CCCCCC">aplicación </font> componente

No <font color="#CCCCCC">sólo necesitamos importar hasta aquí </font> También es <font color="#E5E5E5">necesario declarar hasta aquí dentro de una </font> objeto estamos asignando a la componentes de propiedad en la vista objeto de configuración para que la vista aplicación sabe que <font color="#E5E5E5">queremos hacer </font>

uso de componentes de aplicaciones dentro de nuestra plantilla <font color="#CCCCCC">Bueno por lo que vamos a cambiar a la </font> <font color="#CCCCCC">implementación del componente de aplicación y </font> la aplicación está disponible en la aplicación Ver sapo por lo que aquí se <font color="#CCCCCC">puede ver nuestros juegos </font> Al <font color="#CCCCCC">final de la ejecución completa como en </font>

cada vista <font color="#E5E5E5">J como componente único archivo </font> implementaciones como archivo se divide en tres secciones en la parte superior se puede <font color="#CCCCCC">ver aquí </font> es <font color="#E5E5E5">la sección de la plantilla de la aplicación </font> componente entonces tenemos una sección de escritura por aquí y <font color="#E5E5E5">por último tenemos aquí la </font>

<font color="#CCCCCC">estilo de la sección que contiene el estilo CSS </font> código <font color="#CCCCCC">para la plantilla de componentes y </font> se puede ver que hace <font color="#E5E5E5">que sea muy fácil </font> mantener la visión general porque todo que pertenece a uno de los componentes está aquí dentro de ese un archivo y lo que vamos a primera

echar un vistazo <font color="#E5E5E5">a la sección de secuencia de comandos que </font> puede ver aquí la sección guión es haciendo un experto en defecto de una y objeto de configuración de componentes para vista y que objeto de configuración es que contiene <font color="#E5E5E5">dos propiedades </font><font color="#CCCCCC">Nombre asignar </font>

un nombre al componente en nuestro caso <font color="#CCCCCC">es </font> aplicación y otra vez una propiedad de componentes teniendo un objeto que contiene la totalidad de la componentes posteriores que se utilizan aquí en el componente aplicación y tenemos una componente incluido <font color="#CCCCCC">en este documento que es el </font>

hola componente aparece en la lista aquí porque Si echamos un <font color="#CCCCCC">vistazo </font><font color="#E5E5E5">a la plantilla que </font> puede ver el componente hola se incluye <font color="#E5E5E5">en la plantilla mediante el uso de la LM hola </font> y aquí y ahora se puede ver <font color="#CCCCCC">la </font> plantilla no es tan largo con una sola

<font color="#E5E5E5">sección diff aquí y la sección diff </font> consta de dos <font color="#CCCCCC">elementos </font><font color="#E5E5E5">de una imagen </font> elemento de este elemento de imagen está incluida el archivo del logotipo PNG y la salida y <font color="#E5E5E5">que está incluida la salida que es </font> generado por <font color="#E5E5E5">el componente sub hola y </font>

Si <font color="#CCCCCC">ahora comparamos esa plantilla a la </font> salida que era una <font color="#CCCCCC">Weibull aquí en el </font> navegador se puede ver <font color="#CCCCCC">su </font><font color="#E5E5E5">etiqueta aquí </font> ese es el <font color="#E5E5E5">archivo del logotipo y todos los demás </font> salida que <font color="#CCCCCC">se genera aquí la </font> <font color="#CCCCCC">Mensaje de bienvenida las alas esenciales las </font>

enlaces de los ecosistemas y así sucesivamente viene de <font color="#E5E5E5">el contenido o la salida que </font><font color="#CCCCCC">es </font> producido por <font color="#E5E5E5">componente hola Z y es </font> incluye <font color="#CCCCCC">aquí en la plantilla así que vamos a </font> echar un vistazo <font color="#E5E5E5">a la última parte de la </font> estructura del proyecto inicial y esa es la

implementación del componente hola la puesta en práctica <font color="#CCCCCC">como una Weibull aquí en </font> los componentes de las subcarpetas y archivos hola Ver punto y / o abrir ese archivo y aquí se puede <font color="#CCCCCC">ver de nuevo tenemos la plantilla </font> la sección disponible, entonces tenemos la tripulación

<font color="#E5E5E5">Sección </font><font color="#CCCCCC">/ script </font><font color="#E5E5E5">y, finalmente, utilizar </font><font color="#CCCCCC">la </font> sección de estilo y como se puede ver si empezar por echar un vistazo a la secuencia de comandos la sección de nuevo se hace una exportación predeterminado la definición de una configuración de componentes objetar el nombre en este caso es hola

porque estamos definiendo demonios componentes y entonces <font color="#CCCCCC">hay algo </font> <font color="#E5E5E5">nueva que es una función de los datos de devolver un </font> objeto con una propiedad incluida y eso es un msg Z <font color="#E5E5E5">representa mensaje </font> propiedad y se le asigna el msg

cadena de bienvenida y se puede ver que es la bienvenida <font color="#E5E5E5">a la vista </font> carriles aplicación que es exactamente <font color="#CCCCCC">la cadena </font> que es enviada aquí <font color="#CCCCCC">como el titular </font> bajo el archivo del logotipo y ahora si lo lleve <font color="#E5E5E5">un vistazo al código de la plantilla, que </font><font color="#CCCCCC">es </font>

se define aquí se puede ver en la propiedad msg como se usa aquí la plantilla en el elemento h1 mediante el uso de la interpolación sintaxis que requiere el uso de abierto y cerrar llaves dobles rizadas y mediante el uso sintaxis Zeta somos capaces <font color="#E5E5E5">de incluir </font>

propiedades desde el <font color="#E5E5E5">objeto que es </font> devuelto por la función de datos de la componente en nuestra plantilla y esa es la <font color="#CCCCCC">por lo que el texto </font><font color="#E5E5E5">de </font><font color="#CCCCCC">la msg </font> la propiedad se imprime aquí y la del resto de la plantilla que se puede ver que es

sobre la impresión de esos enlaces aquí Esta sección está eslabón esencial incluido en un elemento h2 y <font color="#E5E5E5">luego como una lista de todos </font> los enlaces <font color="#E5E5E5">se imprime y tenemos </font> el ecosistema aquí es esa parte con caídas señalando para ver <font color="#CCCCCC">yucks del router </font>

Ver cargador y así sucesivamente vista impresionante del <font color="#CCCCCC">siguiente paso </font><font color="#E5E5E5">me </font><font color="#CCCCCC">gustaría hacer algunos </font><font color="#E5E5E5">cambios </font> a la implementación inicial y justo para <font color="#CCCCCC">darle una idea </font><font color="#E5E5E5">de lo fácil que </font> es <font color="#CCCCCC">utilizar el marco de vista y para dar </font> <font color="#E5E5E5">que una pequeña introducción a algunas de las </font>

Vista estándar <font color="#CCCCCC">JRS directivas y </font><font color="#E5E5E5">comienzo </font> con <font color="#CCCCCC">los cambios de la supresión de algunos </font> del contenido aquí en la plantilla de el componente hola y <font color="#E5E5E5">voy </font><font color="#CCCCCC">a </font> eliminar todo lo que está <font color="#E5E5E5">relacionado con </font> las dos <font color="#CCCCCC">secciones de enlace aquí así que vamos a </font>

eliminar esto de modo que <font color="#E5E5E5">sólo estamos imprimiendo </font> el <font color="#CCCCCC">mensaje de bienvenida y se puede ver </font> Estoy ahorrando el archivo y al instante <font color="#E5E5E5">que se vuelve a cargar en el </font> Me navegador sin necesidad de <font color="#E5E5E5">hacer </font> nada aquí manualmente y ahora podemos ir

con la aplicación, por ejemplo, <font color="#E5E5E5">una lista </font> imprimir y <font color="#E5E5E5">estoy definiendo otro dato </font> propiedad aquí en <font color="#E5E5E5">el objeto </font><font color="#CCCCCC">que es </font> devuelto por <font color="#CCCCCC">los </font><font color="#E5E5E5">datos medidos y estoy </font> nombrando a esa matriz <font color="#E5E5E5">me gustaría tener </font> usuarios y luego definirlo como una matriz y

dentro de esa gama digamos que tenemos objetos incluidos en <font color="#E5E5E5">esa matriz que </font> consta de dos propiedades que vamos a utilizar una primera propiedad de nombre y asignar primero cadena de nombre y un apellido <font color="#CCCCCC">bien eso es </font> es así que vamos a añadir tal vez dos elementos más

aquí <font color="#E5E5E5">está bien asignar un nombre diferente </font> y el último nombre para <font color="#E5E5E5">el segundo objeto de usuario </font> y para el objeto de usuario cert vamos a utilizar John como primer nombre <font color="#E5E5E5">y tal vez como Porter </font> un apellido así que ahora <font color="#E5E5E5">tenemos tres usuarios </font> definido aquí en la matriz de los usuarios y ahora

somos capaces <font color="#CCCCCC">de utilizar o hacer uso de </font> que <font color="#E5E5E5">los usuarios de matriz con el contenido </font> incluido en nuestra plantilla y me <font color="#CCCCCC">gustaría </font> imprimir los usuarios como una lista de por lo bajo el elemento h1 vamos a incluir otro sección diff aquí y esto debe ser una

lista desordenada y yo diciendo elemento de la lista y ahora estoy usando <font color="#E5E5E5">una vista </font><font color="#CCCCCC">Jas </font> directiva estándar que se llama <font color="#E5E5E5">V </font> menos <font color="#E5E5E5">4 y yo estoy diciendo que es igual a alguna </font> el usuario primavera en usuarios y aplicando <font color="#E5E5E5">que la sintaxis aquí la vista </font><font color="#CCCCCC">marco Jas </font>

se <font color="#E5E5E5">iterar sobre esa matriz y </font> incluyendo elemento de una lista <font color="#CCCCCC">por tema </font> objeto <font color="#E5E5E5">definido en nuestra matriz en el </font> <font color="#E5E5E5">La generación eléctrica y ahora podemos usar el </font> la sintaxis de interpolación de nuevo para <font color="#CCCCCC">imprimir </font> los valores imprimir primero en salir al usuario

<font color="#E5E5E5">nombre y luego imprima el usuario </font> apellido <font color="#CCCCCC">bien ahorrémoslo y que pueda </font> ver en la salida <font color="#CCCCCC">se genera y </font><font color="#E5E5E5">yo y </font> volver a los nombres de los usuarios <font color="#CCCCCC">de acuerdo </font> así que la próxima cosa que me gustaría <font color="#CCCCCC">incluir es una </font> elemento de entrada y utilizar los datos de dos vías

la unión a sincronizar el valor de la entrada elemento que una propiedad que <font color="#CCCCCC">es </font> definido en nuestro modelo de datos <font color="#E5E5E5">bien let de </font> primero definir una nueva propiedad aquí <font color="#CCCCCC">en el </font> retorno objeto de la función de datos y Dejar el nombre así que la entrada de la propiedad y

acaba de asignar una cadena vacía <font color="#E5E5E5">bien aquí </font> y dentro de nuestra plantilla aquí bajo el diff sección de la lista de usuarios <font color="#E5E5E5">que soy </font> definir otra sección diff y dentro de esa sección diff estoy incluyendo un elemento de entrada y vamos a utilizar

el <font color="#E5E5E5">texto tiempo y que no necesita nombre y </font> valoro aquí en vez estoy usando otra <font color="#E5E5E5">vista j como directiva estándar que es </font> Llamé <font color="#CCCCCC">V Modelo Vista modelo de guión y </font><font color="#E5E5E5">estoy </font> la asignación de la <font color="#CCCCCC">barra de entrada de cadena cuales </font> se corresponde <font color="#CCCCCC">con el nombre de nuestra propiedad </font>

hemos definido aquí y <font color="#E5E5E5">vamos a la salida de </font> que la propiedad aquí bajo la entrada elemento y digamos o digamos que nuestra desovar y estoy usando el <font color="#E5E5E5">texto v tablero </font> Directiva y de nuevo <font color="#CCCCCC">estoy asignación de la entrada </font> Val <font color="#CCCCCC">bien, así que vamos a ver aquí es nuestra entrada </font>

elemento y ahora puedo empezar <font color="#E5E5E5">a escribir </font> algo en el <font color="#E5E5E5">desarrollo y </font> puede ver aquí que es la salida de nuestra lapso elemento que <font color="#CCCCCC">está unido a la entrada </font> elemento bien utilizando el <font color="#CCCCCC">texto v menos </font> Directiva, la <font color="#E5E5E5">salida de la entrada z aquí </font>

se refleja directamente aquí como una salida en la <font color="#CCCCCC">misma página </font><font color="#E5E5E5">bien la última cosa que me gustaría </font> <font color="#E5E5E5">gustaría </font><font color="#CCCCCC">demostrar es cómo se puede utilizar </font> en los eventos con los ensayos vista de drogas y va a incluir otra sección diff aquí por lo que el caso de uso <font color="#E5E5E5">me gustaría </font>

poner en práctica es <font color="#CCCCCC">muy fácil sólo nos dejó </font> <font color="#E5E5E5">implementar un botón que </font> se va a incrementar un contador en uno cada vez que el usuario <font color="#E5E5E5">hace clic en el botón </font> así que vamos a definir primero los datos del contador propiedad aquí en nuestros datos objeto <font color="#E5E5E5">Soy </font>

va a llamar a un contador y configurarlo inicialmente a 20 y dentro de ese nuevo detección estoy poniendo en práctica un botón <font color="#CCCCCC">y </font> este botón debe incluir y bella controlador de eventos y estoy usando el Directiva <font color="#E5E5E5">v tablero en seguida </font><font color="#CCCCCC">por la </font>

caso <font color="#CCCCCC">me </font><font color="#E5E5E5">gustaría responder y </font> que es un evento de clic y cada vez que <font color="#CCCCCC">el </font> usuario hace clic <font color="#E5E5E5">en el botón del contador </font> propiedad debe ser incrementado, así que estoy utilizando <font color="#E5E5E5">plus plus aquí y el contenido de </font> el botón de seguro para reflejar el <font color="#CCCCCC">valor de </font>

el mostrador, así <font color="#CCCCCC">que estoy incluyendo un poco </font> bit de información de texto aquí se tiene se hace clic en este botón y ahora voy <font color="#E5E5E5">a </font> <font color="#CCCCCC">utilizar la sintaxis de nuevo para la interpolación </font> incluir el valor del contador <font color="#E5E5E5">x </font><font color="#CCCCCC">ok </font> ahorrémoslo y ver cómo <font color="#CCCCCC">la salida </font>

parece que lo que ahora aquí es un botón <font color="#E5E5E5">y yo </font> puede <font color="#E5E5E5">hacer clic en el botón y cada vez que </font> clic se <font color="#CCCCCC">puede ver es el valor del contador </font> que está impreso en el botón de aquí se incrementa en uno Este fue el mismo <font color="#E5E5E5">de la codificación de forma inteligente </font><font color="#CCCCCC">la calma si lo hace </font>

al igual que mis videos por favor, no <font color="#CCCCCC">olvide </font> suscribirse <font color="#E5E5E5">a mi canal que ver en el </font> bye siguiente vídeo



Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

---------------------
Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)