Vue JS es un framework javascript "progresivo" para uso aplicaciones dinámicas sencillas y/o SPA (Single-Page Application).
Ejemplo. Crearemos una simple página HTML y colocaremos esto en el <head> </head>
<script src="https://unpkg.com/vue"></script>
Con esto ya podremos usar Vue JS sin necesidad de instalarlo. El paso que sigue es crear un div, el id será "app" y el mensaje que visualizaremos se verá reflejado entre las llaves {{aqui}} de la siguiente forma:
<div id="app">
<p>{{ mensaje }}</p>
</div>
Por último agregaremos un script:
<script>
new Vue({
el: '#app',
data: {
mensaje: 'Hola, es un buen día para programar.'
}
})
</script>
Donde "el" es el elemento div, "data" es quien trae los datos, y "mensaje" donde escribimos el mensaje a mostrar. Pare ver esto solo abrimos nuestra página HTML en cualquier navegador. No es necesario compilar nada.
Código completo:
Links:
https://vuejs.org/
https://carlosazaustre.es/que-es-lo-que-me-gusta-de-vue-js/
https://www.genbetadev.com/desarrollo-web/por-que-elegir-vuejs-5-razones-para-considerarlo-nuestro-proximo-framework-de-referencia
Ejemplo. Crearemos una simple página HTML y colocaremos esto en el <head> </head>
<script src="https://unpkg.com/vue"></script>
Con esto ya podremos usar Vue JS sin necesidad de instalarlo. El paso que sigue es crear un div, el id será "app" y el mensaje que visualizaremos se verá reflejado entre las llaves {{aqui}} de la siguiente forma:
<div id="app">
<p>{{ mensaje }}</p>
</div>
Por último agregaremos un script:
<script>
new Vue({
el: '#app',
data: {
mensaje: 'Hola, es un buen día para programar.'
}
})
</script>
Donde "el" es el elemento div, "data" es quien trae los datos, y "mensaje" donde escribimos el mensaje a mostrar. Pare ver esto solo abrimos nuestra página HTML en cualquier navegador. No es necesario compilar nada.
Código completo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>HTML5::JS</title> <script src="js/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <p>{{ mensaje }}</p> </div> <script> new Vue({ el: '#app', data: { mensaje: 'Hola, es un buen día para programar.' } }) </script> </body> </html>
Links:
https://vuejs.org/
https://carlosazaustre.es/que-es-lo-que-me-gusta-de-vue-js/
https://www.genbetadev.com/desarrollo-web/por-que-elegir-vuejs-5-razones-para-considerarlo-nuestro-proximo-framework-de-referencia
Comentarios
Publicar un comentario