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>

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 meses hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 meses hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 meses hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace