{"id":3550,"date":"2017-12-01T17:52:00","date_gmt":"2017-12-01T17:52:00","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/12\/01\/vue-js-potente-framework-como-empezar-facil-rapido\/"},"modified":"2024-03-08T09:54:58","modified_gmt":"2024-03-08T15:54:58","slug":"vue-js-potente-framework-como-empezar-facil-rapido","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/vue-js-potente-framework-como-empezar-facil-rapido\/","title":{"rendered":"Vue.js, potente framework \u00bfC\u00f3mo empezar?\n \u00a1F\u00e1cil y r\u00e1pido!"},"content":{"rendered":"<p>Vue.js es un framework para crear interfaces de usuario, muy parecido a Polymer y a la vez a React, pero tambi\u00e9n tiene cosas de Angular. Es un framework relativamente peque\u00f1o al que puedes ir adaptando a tus necesidades y hacerlo mucho m\u00e1s robusto a trav\u00e9s de librer\u00edas y herramientas modernas como webpack.<\/p>\n<p>Es uno de los frameworks mejor documentados y con la menor curva de aprendizaje, as\u00ed que si no tienes experiencia utilizando alg\u00fan framework parecido, este es el primero que recomiendo que aprendas.<\/p>\n<h2 id=\"interpolacin\">Interpolaci\u00f3n<\/h2>\n<p>Para empezar a utilizar Vue.js juega con este ejemplo donde creamos nuestra primera implementaci\u00f3n con Vue.<\/p>\n<p><iframe style=\"width: 100%; margin-bottom: 25px;\" title=\"Vue: Introducci\u00f3n interpolaci\u00f3n\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/zEarBG\/?height=300&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/zEarBG\/\">Vue: Introducci\u00f3n interpolaci\u00f3n<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Si nos damos cuenta la propiedad <code>mensaje<\/code>of the object <code>data<\/code>ha sido pintada, pero no solo se pint\u00f3 <code>data.mensaje<\/code>en la p\u00e1gina, sino que tanto el <strong>DOM<\/strong>como <code>data<\/code>est\u00e1n enlazados y se comportan de manera reactiva, \u00bfC\u00f3mo lo sabes?, en el c\u00f3digo guardamos una instancia de Vue en una variable llamada <code>app<\/code>, esta variable est\u00e1 definida globalmente, por lo que si damos click derecho sobre la p\u00e1gina que nos genera codepen, es la parte derecha con fondo blanco y dice <strong>Hola soy Vue.js<\/strong>, luego <strong>Inspeccionar elemento<\/strong>y nos vamos a la <strong>pesta\u00f1a consola(console)<\/strong>, podremos obtener la referencia a esa instancia y modificar sus datos.<\/p>\n<p>Int\u00e9ntalo de esta manera:<\/p>\n<pre><code>app.mensaje = 'Nuevo mensaje';\n<\/code><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-347\" src=\"\/wp-content\/uploads\/2017\/12\/cambiando-mensaje-vue.jpg\" alt=\"\" width=\"434\" height=\"113\"><\/p>\n<p>Deber\u00e1s ver en la p\u00e1gina como el texto se actualiza autom\u00e1ticamente reaccionando al cambio. Por el momento recuerda que los elementos del <code>data<\/code>reaccionan al cambio en el DOM y\/o directamente cambiando el valor en el c\u00f3digo.<\/p>\n<p>Lo que hicimos con <code>{{}}<\/code>se le llama interpolaci\u00f3n, es decir, realiza la operaci\u00f3n necesaria para obtener el resultado de <code>mensaje<\/code>. En este caso nos regresa un resultado en forma de una cadena, podemos utilizarlo tambi\u00e9n en atributos.<\/p>\n<h2 id=\"interpolacinenatributosydirectivas\">Interpolaci\u00f3n en atributos y directivas<\/h2>\n<p><iframe style=\"width: 100%; margin-bottom: 25px;\" title=\"Vue: Interpolaci\u00f3n en atributos\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/KXejJe\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/KXejJe\/\">Vue: Interpolaci\u00f3n en atributos<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Ahora la interpolaci\u00f3n se hizo a trav\u00e9s de un atributo raro <code>v-bind<\/code>, a este tipo de atributos se les llama directivas, una directiva son atributos creados por Vue y tienen el prefijo <code>v-<\/code>, estas directivas aumentan el funcionamiento de un determinado elemento, en este ejemplo pudimos aumentar el funcionamiento del atributo <code>title<\/code>en el elemento <code>span<\/code>para que muestre la propiedad <code>mensaje<\/code>de manera reactiva cuando pasamos el cursor del mouse. En otras palabras, se crea un enlace de comunicaci\u00f3n el cual permite actualizar la informaci\u00f3n.<\/p>\n<h2 id=\"directivacondicionalvif\">Directiva condicional v-if<\/h2>\n<p>Ahora veamos una directiva muy \u00fatil v-if , que nos permite pintar o no un elemento bas\u00e1ndose en una condici\u00f3n de nuestra aplicaci\u00f3n.<\/p>\n<p><iframe style=\"width: 100%; margin-bottom: 25px;\" title=\"Vue: Introducci\u00f3n directiva v-if\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/ZXjzwJ\/?height=265&amp;theme-id=0&amp;default-tab=html,result&amp;embed-version=2\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/ZXjzwJ\/\">Vue: Introducci\u00f3n directiva v-if<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Esta interpolaci\u00f3n recibe un valor falso, es decir, un valor que se convierte en un boleano <code>false<\/code>, aqu\u00ed te dejo una lista de estos valores. Importante, todos los valores que no est\u00e9n en la lista se convierten en valores verdaderos cuando se ejecutan en una condici\u00f3n.<\/p>\n<ul>\n<li>false<\/li>\n<li>null<\/li>\n<li>undefined<\/li>\n<li>0<\/li>\n<li>cadena vac\u00eda \u201c\u201d<\/li>\n<li>El numero NaN (Not a Number)<\/li>\n<\/ul>\n<h2 id=\"directivarepetidoravfor\">Directiva repetidora v-for<\/h2>\n<p>Esta directiva, muy parecida al <code>for<\/code>de Javascript te permite iterar sobre los elementos de un <code>array<\/code>o un <code>object<\/code>.<\/p>\n<p><iframe style=\"width: 100%; margin-bottom: 25px;\" title=\"Vue: Introducci\u00f3n directiva v-for\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/RLBjVw\/?height=265&amp;theme-id=0&amp;default-tab=html,result&amp;embed-version=2\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/RLBjVw\/\">Vue: Introducci\u00f3n directiva v-for<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Al igual que el primer ejemplo, puedes acceder a la variable global <code>app<\/code>y cambiar el valor de <code>buenosHabitos<\/code>para que la lista con <code>v-for<\/code>reaccione a los nuevos datos.<\/p>\n<pre><code>app.buenosHabitos = ['Ir a nadar', 'Dormir temprano'];\n<\/code><\/pre>\n<h2 id=\"interaccinconelusuariousandovonyvmodel\">Interacci\u00f3n con el usuario usando v-on y v-model<\/h2>\n<p>La directiva <code>v-on<\/code>permite agregar escuchadores de eventos a elementos HTML, y definir que m\u00e9todo de nuestra instancia de Vue ejecutar cuando se dispara el evento. A nuestra instancia le podemos agregar m\u00e9todos en su propiedad <code>methods<\/code>como se ve en el ejemplo:<\/p>\n<p><iframe title=\"Vue: Introducci\u00f3n v-on y v-model \" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/mBjpeR\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/mBjpeR\/\">Vue: Introducci\u00f3n v-on y v-model <\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Tambi\u00e9n en el ejemplo usamos la directiva <code>v-model<\/code>, la cual nos permite actualizar los datos en dos direcciones, es decir, desde el input y hacia \u00e9l, si cambiamos su valor, se refleja como se actualiza el texto que aparece despu\u00e9s del bot\u00f3n, y tambi\u00e9n si oprimimos el bot\u00f3n, vemos como el cambio se refleja en el input y en el texto al rev\u00e9s.<\/p>\n<p>Espero y te sirva este post, comenta si as\u00ed lo fue y que tipo de temas te gustar\u00eda que se explicaran en futuros art\u00edculos.<\/p>","protected":false},"excerpt":{"rendered":"<p>        Vue.js es un framework para crear interfaces de usuario, muy parecido a Polymer y a la vez a React, pero tambi\u00e9n tiene cosas de Angular. Puede hacerlo mucho mas robusto a trav\u00e9s de librer\u00edas y herramientas modernas como webpack.<\/p>","protected":false},"author":2,"featured_media":3757,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,38],"tags":[54,68,84],"class_list":["post-3550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-vue","tag-javascript","tag-intermedio","tag-vue"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3550"}],"version-history":[{"count":1,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3550\/revisions"}],"predecessor-version":[{"id":3631,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3550\/revisions\/3631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3757"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}