Saltar al contenido

Vuejs 2 introducción tutorial (ejemplo Vue, Reactivtiy)-dic 2ndIn este tutorial, vamos a aprender acerca de una introducción básica a …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de una introducción básica a vuejs andits sistema de reactividad.

¿Cuál es Vuejs?

Vuejs es un marco de JavaScript popular que se utiliza para construir interfaces de usuario. La biblioteca principal se centra principalmente en la capa de vista.

podemos construir aplicaciones web modernas de JavaScript utilizando Vuejs.

Primeros pasos

en este tutorial no estamos utilizando Vue CLI para configurar nuestra aplicación.

Abre los siguientes comandos de terminal y correr.

mkdir vue-intro #create a new directory in your pc

cd vue-intro #change your working directory

touch index.html #create an HTML file

una vez que su completado con éxito los pasos anteriores carpeta vue-intro abierto ahora mediante el uso de su editor favoritecode.

Añadir el marcado abajo para su archivo HTML.




Vue intro<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> </head><br /> <body data-rsssl=1></p> <div id="app"> <h1>Intro to Vue</h1> </div> <p></body><br /> </html></code> </p> <p> Vamos a añadir la biblioteca Vue en nuestro archivo index.html mediante el uso de etiquetas de script. </p> <p> <code><!DOCTYPE html><br /> <html><br /> <head><br /> <title>Vue intro<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> </head></p> <p><body data-rsssl=1></p> <div id="app"> <h1>Intro to Vue</h1> </div> <p> <script src="https://cdn.jsdelivr.net<br />pm/vue/dist/vue.js"></script><br /> </body></p> <p></html></code> </p> <h3> Vue ejemplo </h3> <p> Una vez que ha añadido correctamente la secuencia de comandos en nuestro archivo HTML ahora podemos acceder a la función global de Vue. función </p> <p> Vue se utiliza para crear una nueva instancia. </p> <p> Cada vuejs aplicación se inicia con la creación de una instancia </p> <p> Let Vue de crear una instancia de vue al pasar un objeto a la función Vue. </p> <p> Añadir el siguiente código después la etiqueta script biblioteca vue. </p> <p> <code>var app = new Vue({<br /> el:"#app"<br /> })</code> </p> <p> <strong> el: </strong>: Se añadió #app que significa ahora vue ejemplo, construir una relación con nuestra etiqueta HTML div tener ID de aplicación. </p> <h3> de datos y la reactividad </h3> <p> Vue ejemplo también acepta otra propiedad llamada de datos nada hemos añadido dentro de la propiedad de datos se añade al sistema de Vue reactividad. </p> <p> Vamos a añadir la propiedad data en nuestro ejemplo Vue. </p> <p> <code>var app = new Vue({<br /> el:"#app",<br /> data:{<br /> title: "Vuejs"<br /> }<br /> })</code> </p> <p> En el código anterior, hemos añadido una propiedad de datos con objeto que tiene el título: “Vuejs”. </p> <p> <strong> interpolación </strong> </p> <p> para interpolar los datos de Vuejs tenemos que utilizar {{}} dobles corchetes. </p> <p> actualización de la etiqueta div con el siguiente código. </p> <p> <code></p> <div id="app"> <h1>Intro to {{title}}</h1> </div> <p></code> </p> <p> Ahora abrir el archivo HTML en el navegador. </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/c8a49365344011ca5b59629d5cb65bca-6.png"> </p> <p> como ya he dicho ejemplo Vue agrega todas propiedades presente dentro del objeto de datos a su reactividad <strong> sistema </strong> por lo que cada vez que cambia un valor de propiedad vue vuelve a renderizar nuestra aplicación con los datos actualizados. prueba </p> <p> Para el Vue reactividad abrir la consola del navegador e introduzca a continuación código. </p> <p> <code>app.title = "Vue 2.0"</code> </p> <p> <img src="https://openanalytics.es/wp-content/uploads/2020/03/561fd69222f2094b9e49a0847a9ff14c-6.gif"> </p> <p> ¿has visto en la imagen de arriba, si cambiamos valor de la propiedad del título entonces el sistema reactividad vue actualiza la propiedad del título en todas partes lo usamos pero en nuestro caso, hemos utilizado la etiqueta h1? </p> <h4> Código completo </h4> <p> <code><!DOCTYPE html><br /> <html></p> <p><head><br /> <title>Vue intro<itle><br /> <meta name="viewport" content="width=device-width, initial-scale=1"><br /> </head></p> <p><body data-rsssl=1></p> <div id="app"> <h1>Intro to {{title}}</h1> </p></div> <p> <script src="https://cdn.jsdelivr.net<br />pm/vue/dist/vue.js"></script><br /> <script> var app = new Vue({ el: "#app", data: { title: "Vuejs" } }) </script><br /> </body></p> <p></html></code></p> <div class="banner desktop"> <div class="center fluid"> </div> </div> <div class="banner mobile"> <div class="center fluid"> </div> </div> <footer class="entry-footer"> <section class="entry-related"> <h3>Entradas relacionadas</h3> <div class="flex flex-fluid"> <article id="post-2106" class="entry-item column-third"> <a href="https://openanalytics.es/validacion-de-formularios-en-vuejs-usando-veevalidatefeb-3rdin-este-tutorial-vamos-a-aprender-acerca-de-como-validar-las-formas-de/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/validating-input-field-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Validación de formularios en Vuejs usando VeeValidateFeb, 3rdIn este tutorial, vamos a aprender acerca de cómo validar las formas de …</h4> </a> </article> <article id="post-2091" class="entry-item column-third"> <a href="https://openanalytics.es/vue-pestanas-tutorial-dinamicamente-cambiar-componentsnov-29thin-este-tutorial-vamos-a-aprender-acerca-de-como-dinamicamente/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/vue-tabs-example-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Vue pestañas tutorial-dinámicamente cambiar componentsNov, 29thIn este tutorial, vamos a aprender acerca de cómo dinámicamente …</h4> </a> </article> <article id="post-2092" class="entry-item column-third"> <a href="https://openanalytics.es/propiedades-calculadas-vs-metodos-en-vuejsmar-16thin-este-tutorial-vamos-a-aprender-acerca-de-la-diferencia-entre/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/vuejs-computed-property-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">propiedades calculadas vs Métodos en vuejsMar, 16thIn este tutorial, vamos a aprender acerca de la diferencia entre …</h4> </a> </article> <article id="post-2098" class="entry-item column-third"> <a href="https://openanalytics.es/como-crear-vue-enrutador-transitionsmar-12thin-esta-guia-vamos-a-aprender-acerca-de-como-crear/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/vue-router-slide-transition-example-150x150.gif" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Cómo crear Vue enrutador transitionsMar, 12thIn esta guía, vamos a aprender acerca de cómo crear …</h4> </a> </article> <article id="post-2102" class="entry-item column-third"> <a href="https://openanalytics.es/la-creacion-de-directivas-personalizadas-en-vuejsfeb-26thin-esta-guia-vamos-a-aprender-acerca-de-como-crear-a-medida/" rel="bookmark"> <img width="150" height="97" src="https://openanalytics.es/wp-content/uploads/2020/03/custom-directive-emoji-150x97.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">La creación de directivas personalizadas en VueJSFeb, 26thIn esta guía, vamos a aprender acerca de cómo crear a medida …</h4> </a> </article> <article id="post-2103" class="entry-item column-third"> <a href="https://openanalytics.es/vue-router-dinamico-ruta-juego-tutorialdec-7thin-esta-guia-vamos-a-aprender-acerca-de-como-implementar-dinamico/" rel="bookmark"> <img width="150" height="150" src="https://openanalytics.es/wp-content/uploads/2020/03/vue-url-params-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /><h4 class="entry-title">Vue router dinámico ruta juego tutorialDec, 7thIn esta guía, vamos a aprender acerca de cómo implementar … dinámico</h4> </a> </article> </div> </section> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3>Deja un comentario <small><a rel="nofollow" id="cancel-comment-reply-link" href="/vuejs-2-introduccion-tutorial-ejemplo-vue-reactivtiy-dic-2ndin-este-tutorial-vamos-a-aprender-acerca-de-una-introduccion-basica-a/#respond" style="display:none;">Cancelar respuesta</a></small></h3> <form action="https://openanalytics.es/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Tu dirección de correo electrónico no será publicada.</span> Los campos obligatorios están marcados con <span class="required">*</span></p><textarea id="comment" name="comment" cols="45" rows="1" required></textarea><p class="comment-form-author"><label for="author">Nombre <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Correo electrónico <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Publicar comentario" /> <input type='hidden' name='comment_post_ID' value='2047' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> </footer> </div> </div> </main> <footer class="site-footer"> <div class="container"> <div class="credits row"> <p>SEO y Programación.</p> </div> </div> </footer> <!-- Site Overlay --> <div class="site-overlay"></div> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Open Analytics", "alternateName": "SEO y Programación.", "url": "https://openanalytics.es" } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "headline": "  En este tutorial, vamos a aprender acerca de una introducción básica Read more", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://openanalytics.es/vuejs-2-introduccion-tutorial-ejemplo-vue-reactivtiy-dic-2ndin-este-tutorial-vamos-a-aprender-acerca-de-una-introduccion-basica-a/" }, "image": { "@type": "ImageObject", "url": "https://openanalytics.es/wp-content/uploads/2020/03/vuejs-intro-example.png", "height": 1024, "width": 1024 }, "datePublished": "2020-03-13", "dateModified": "2020-03-13", "author": { "@type": "Person", "name": "admin" }, "publisher": { "@type": "Organization", "name": "Open Analytics" } } </script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/navigation.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/social.min.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-content/themes/orbital/assets/js/main.js?ver=20190101'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/comment-reply.min.js?ver=5.2.5'></script> <script type='text/javascript' src='https://openanalytics.es/wp-includes/js/wp-embed.min.js?ver=5.2.5'></script> </body> </html>