julio 2021 – El blog de e-mmanuel

1. Instalar vue cli

npm install -g @vue/cli

2. Crear un proyecto

vue create hello-world

Una vez creado el proyecto entrar al directorio y correr el servidor con el comando

npm run serve

También puedes crear un proyecto seleccionando de manera manual las opciones, selecciona babel y la versión 3 de vue.js

3. Componentes

Crea un archivo dentro del directorio components, es importante que los archivos inicien con una letra en mayúscula y tengan la extensión «.vue», cada componente tiene 3 elementos: template, script y style.

<template>
  <h1>El título de mi componente</h1>
  <p>{{texto}}</p>
</template>

<script>
export default {
    name:'Titulo',
    props : {
        texto:String
    }
}
</script>

<style>

</style>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <titulo texto = "El título desde props"/>
</template>

<script>
import Titulo from './components/Titulo.vue'

export default {
  name: 'App',
  components: {
    Titulo
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Props

Permiten enlazar datos entre componentes

Custom Events

Cuando un componente hijo desea modificar algún dato del elemento padre, se emite un evento que se encuentra previamente configurado en el evento padre.

<template>
  <h1>Cuenta de {{ cuentaHabiente}}</h1>
  {{saldo}}
  <div v-for="(servicios, index) in servicios" :key="index">
      {{servicios}}
  </div>
  <accion-saldo 
        texto="Aumentar Saldo"
        @accion="aumentar()"
        
        />
  <accion-saldo 
        texto="Disminuir Saldo"
         @accion="disminuir()"
         :desactivar="desactivar"
    />   
</template>

<script>
import AccionSaldo from "./AccionSaldo.vue"

export default {
    components: {AccionSaldo},
    data() {
        return {
            saldo: 50,
            tipo:"Visa",
            estado: true,
            desactivar:false,
            servicios: ['transferencias','abonos','pagos']
        }
    },
    props:{
        cuentaHabiente:String
    },
    methods:{
        aumentar(){
            this.saldo = this.saldo + 10
        },
        disminuir(){
            
            if(this.saldo > 0 ){
                this.saldo = this.saldo-10
            }
            else{
                this.desactivar=true
            }
        }
    }
}
</script>

<style>

</style>

<template>
    <button @click="accion" :disabled="desactivar">{{texto}}</button>
</template>

<script>
export default {
    props:{
        texto:String,
        desactivar : Boolean
    },
    methods:{
        accion(){
            this.$emit('accion')
        }
    }
}
</script>

<style>

</style>

Compilar el proyecto

npm run build

Ciclo de vida de vue

Plugins útiles en visual studio code

Vetur

Visual VSCode Snippets

Mes: julio 2021

Luz

Vue.js guía rápida