Youtube APP con Vue JS 2 y Bootstrap

Tutoriales

Demo Github

En la actualidad existen muy buenos Frameworks Javascript como Angular JS y React JS, de hecho todos solucionan los problemas de desarrollo de nuestra APP, pero siempre se diferencian, quizás algo que me llamo la atención de Vue JS es que es muy limpio, pero de todas maneras si se hace una aplicacion mas compleja y grande hagamos el código mas extenso, pero aun así creo que Vue JS Mantiene una simpleza y un codigo limpio y obvio muy potente, pienso que si Vue JS sigue mejorando más, puede destronar a los Frameworks como Angular JS y React JS que son usados en aplicaciones robustas, las grandes empresas como Google y Facebook las emplean en sus interfaces.

En este tutorial voy a crear una aplicación en donde podremos ver un video de youtube, con solo colocar el ID del video de Youtube que deseamos ver, vamos a por el tutorial.

Voy a declarar e iniciar Vue JS:

También creo una capa con id = yt en donde se va mostrar mi aplicacion Vue JS, asimismo creo el input text en donde pegar el ID del video de Youtube que quiero reproducir:

También pueden ver que las propiedades del iframe las manipulo con la directiva v-bind de Vue JS y le doy los valores en mi array data.

En las propiedades del iframe estoy pasando dos valores en la propiedad v-bind:src=“url + video” estos 2 valores los defino en mi array data:

Por ultimo en el input text tambien imprimo un ID de un video de Youtube que se usará como valor por default, para ello uso la directiva v-model :

Eso es todo, si tiene dudas les dejo el codigo del repo de Github al inicio del articulo, asimismo un demo para que vean mejor de que trata esta aplicación.

No olvides seguirnos en las redes sociales y suscribirte a nuestro canal de Youtube, eso nos motiva a seguir adelante y compartirte contenido de mucha utilidad en tu aprendizaje.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required