Counter - Tylung/vue-apuntes GitHub Wiki

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;
}