01 2Bvuejs 1

02.-Vue js 2 tutorial español ? [arreglos, objetos y links]

01 2Bvuejs 1

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>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)