04.-Vue js 2 tutorial español ? [keyup.enter,computed]??
Introducción
En este tutorial vamos a seguir trabajando con VueJS y en este tutorial vamos a trabajar con mas eventos de Vue com presionar teclas, también vamos a realizar operaciones matemáticas, no se preocupen solo vamos a hacer sumas y restas (nada de integrales ni transformadas de gauss). Y para eso vamos a poner numeros en el codigo para sumarlos restarlos y multiplicarlos y hacer lo que querramos.
Codigo
<!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" @keyup.enter="agregarLenguaje" />
<input type="text" v-model="nuevoLink" @keyup.enter="agregarLenguaje"/>
<button @click="agregarLenguaje" >Agregar lenguaje</button>
<ul>
<li v-for="lenguaje of lenguajes" >
<a :href="lenguaje.link" target="_blank" >{{lenguaje.nombre}}</a> {{ lenguaje.puntos }}
<button @click="lenguaje.puntos++">+</button>
<button @click="lenguaje.puntos--">-</button>
</li>
</ul>
Suma de todos los votos {{sumarTodo}}
</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',puntos:0},
{nombre:"PHP",link:'https://php.net',puntos:0},
{nombre:"Python",link:'https://www.python.org',puntos:10}
],
nuevoLenguaje:'',
nuevoLink:'',
total:0
},
methods: {
agregarLenguaje(){
this.lenguajes.push({nombre:this.nuevoLenguaje,link:this.nuevoLink})
this.nuevoLenguaje='';
this.nuevoLink='';
}
},
computed: {
sumarTodo(){
this.total=0;
for(lenguaje of this.lenguajes){
this.total=this.total+lenguaje.puntos;
}
return this.total;
}
},
})
</script>
</html>
Codigo en github.com: https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/byMpbK
Video
Ave que vuela, a la cazuela.