1. Instalar vue cli
npm install -g @vue/cli2. Crear un proyecto
vue create hello-worldUna vez creado el proyecto entrar al directorio y correr el servidor con el comando
npm run serveTambié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
