Ejemplo. Crearemos una simple página HTML y colocaremos esto en el <head> </head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></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"> <h1>{{ titulo }}</h1> <h5>{{ mensaje }}</h5> </div>
Por último agregaremos un script:
<script> new Vue({ el: '#app', data: { titulo: 'Bienvenido a Vue JS.', mensaje: 'Vamos a consumir un API', } }) </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>Vue JS</title> <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ titulo }}</h1> <h5>{{ mensaje }}</h5> </div> <script> new Vue({ el: '#app', data: { titulo: 'Bienvenido a Vue JS.', mensaje: 'Vamos a consumir un API', } }) </script> </body> </html>
Enlaces:
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 Guía de Vue JS
https://elabismodenull.wordpress.com/2017/04/21/vuejs-the-progressive-javascript-framework/
https://cli.vuejs.org/
Comentarios
Publicar un comentario