02.-Vue js 2 tutorial español 👀 [arreglos, objetos y links]
En este tutorial vamos a trabajar con arreglos (no pueden hacer falta), objetos (son como matrices pero mas flexibles) y tambien vamos a aprender a usar links en vuejs.
Codigo
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Vuejs</title> </head> <body> <div id="elemento"> {{contenido}} <ul> <li v-for="lenguaje of lenguajes" ><a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a></li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const con=new Vue({ el:"#elemento", data:{ contenido:"Hola mundo desde programador novato", lenguajes:[ {nombre:"JavaScript",link:'https://www.javascript.com'}, {nombre:"PHP",link:'https://php.net'}, {nombre:"Python",link:'https://www.python.org'} ] } }) </script> </html>
Codigo en Github.com: https://github.com/eucm2g/vuejs
Codigo en Codepen.io: https://codepen.io/programadornovato/pen/KLoqeq
Video
03.-Vue js 2 tutorial español 👀 [v-model,@click,v-on:click]
En este tutorial vamos a colocar 2 inputs y un botón, los inputs van a ser para colocar el nombre y la url del lenguaje de programación y el boton nos va a servir para agregar esos nombres en la lista de lenguajes.<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Vuejs</title> </head> <body> <div id="elemento"> {{contenido}} <input type="text" v-model="nuevoLenguaje" /> <input type="text" v-model="nuevoLink" /> <button @click="agregarLenguaje" >Agregar lenguaje</button> <ul> <li v-for="lenguaje of lenguajes" ><a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a></li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const con=new Vue({ el:"#elemento", data:{ contenido:"Hola mundo desde programador novato", lenguajes:[ {nombre:"JavaScript",link:'https://www.javascript.com'}, {nombre:"PHP",link:'https://php.net'}, {nombre:"Python",link:'https://www.python.org'} ], nuevoLenguaje:'', nuevoLink:'', }, methods: { agregarLenguaje(){ this.lenguajes.push({nombre:this.nuevoLenguaje,link:this.nuevoLink}) } }, }) </script> </html>
Comentarios
Publicar un comentario