Counter
Este componente tiene la funcionalidad de servir como contador, tiene 2 botones, uno para incrementar el numero y otro para decrementarlo
<button v-on:click="increase"> +1 </button>
<button @click="decrease"> -1 </button>
Tiene 2 propiedades reactivas el title
y el start
props: {
title: String,
start: {
type: Number,
default: 100,
// required: true
validator( value ) {
return value >= 0
}
}
},
Tambien cuenta con una funcion validator que sirve para que el valor que se coloque a la prop start sea mayor a 0
Este componente cuenta con 3 metodos
methods: {
getSquare() {
console.log('getSquareValue')
return this.counter * this.counter
},
// increase
increase() {
// this.counter = this.counter + 1
this.counter++
},
// decrease
decrease() {
// this.counter = this.counter - 1
this.counter--
}
},
getSquare
-> Sirve para obtener el counter
al cuadrado
increase
-> Sirve para incrementar el valor de counter
en 1
decrease
-> Sirve para decrementar el valor de counter
en 1
computed: {
squareCounter() {
console.log('computed squareCounter')
return this.counter * this.counter
},
customTitle() {
return this.title ? this.title : 'Counter'
// return this.title || 'Counter'
}
}
Las propiedades computades sirven para almacenar una función en cache y no se tenga que estar ejecutando cada vez que se llama y estan diseñadas para hacer tareas simples
customTitle
-> Verifica la propiedad title y si no tiene valor pone por defecto 'Counter'
squareCounter
-> Calcula el valor de counter
al cuadrado pero si y alo ha calculado antes no lo vuelve a ejecutar
<Counter title="Hola Mundo" />
Tendra por titulo Hola Mundo
<Counter />
Tendra por titulo Counter
<Counter start="10"/> ❌
Dara error porque espera un Number
Para asignarle un numero para empezar correctamente es usar el v-bind
<Counter v-bind:start="10"/> ✔️
// or
<Counter :start="10"/> ✔️
Y por la parte de Css esta el css de principiante de Fernando Herrera 🤣, aunque bueno no es como que yo tenga un alto nivel de css
button {
background-color: #64bb87;
border-radius: 5px;
border: 1px solid #fff;
color: #fff;
cursor: pointer;
margin: 0 5px;
padding: 5px 15px;
transition: 0.3s ease-in-out;
}
button:hover {
background-color: #1abc9c;
transition: 0.3s ease-in-out;
}