En este artículo exploraremos las principales secciones de la instancia de VUE como son la Sección Data Computed Methods y Render Declarativo en VUE y sae explicara el uso de cada uno de ellos en la construcción de aplicaciones frontend.

Si quieres aprender a programar en backend java sigue este enlace.

1. Atributo name

El atributo name se configura en la instancia de VUE y permite identificar el componente, esto es especialmente útil en el momento en que se visualiza en el depurador como vue devtools.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada }
}
</script>

2. Función Data

Vamos a iniciar en este estudio de Data Computed Methods y Render Declarativo en VUE por la función Data permite devovler valores a la vista y utilizarlos para su procesamiento, se puede entender como un conjunto de variables que serán utilizadas entre la sección HTML y la sección script y que permitirán escribir la lógica de nuestra aplicación. En el siguiente fragmento de código se muestran algunas variables que se han definido, note también como estas variables deben obligatoriamente construirse como un JSON que será devuelto por la función data y que estas variables pueden ser de diferentes tipos por ejemplo textos o números.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      age: 30
    }
  }
}
</script>

3. Render Declarativo

Teniendo en cuenta que la función data devuelve un JSON con información que podemos utilizar en la sección HTML existe una forma muy sencilla de poder incrustar los valores de estas variables en algún punto de nuestra página web, para ello basta con usar el denominado Render Declarativo que consta de un par de llaves y la interior de estas el nombre de la propiedad del JSON devuelto por data, siguiendo el ejemplo anterior a continuación se muestra la sección HTML en la cual se usa el valor de la propiedad login.

<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <Entrada></Entrada>
  </div>
</template>

4. Métodos Computed

Similar a la sección Data, la sección Computed en VUE permitirá de forma muy similar a las propiedades de data, devolver un valor producto de algún calculo necesario. Supongamos el calculo de la edad, para lo cual a la fecha actual debemos restar la fecha de nacimiento, esto se logra de forma muy sencilla estableciendo una función, que a la larga será una función tipo get, en la sección computed de la instancia de VUE.

El código siguiente muestra tanto la sección javascript como la sección HTML. Algo que también es importante y se puede apreciar en este ejemplo es que cuando usamos variables de data en las sección javascript debemos usar la palabra this, a diferencia de lo que ocurre en la sección HTML en donde no es necesario el uso de esta palabra clave.

Note también que para hacer uso de un método computed basta usarlo como si fuera una propiedad de la data, tal como se vio en la sección anterior.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>
<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <span>Age {{ age }}</span>
    <Entrada></Entrada>
  </div>
</template>

Otro ejemplo de método Computed en VUE permite mostrar algunas de las características de manipulación de texto, en el cual podemos usar el comodín $ y llaves para hacer referencia a una variable y facilitar las concatenaciones de texto.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>

5. Methods personalizados en VUE

La sección Methods en VUE son muy parecidos a las funciones de Computed o Data solamente que usamos estos de forma más extendida para realizar operaciones, recibir datos y procesarlos y dividir en general los algoritmos en trozos más manejables.

En el siguiente código se muestra un ejemplo de un método utilizado para calcular la edad pero en esta ocasión recibiendo un parámetro.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  },
  methods: {
    computedAge(date) {
      let currentDate = new Date();
      let diff = currentDate - date;
      return diff;
    }
  }
}
</script>

6. Artículos de Interés

Introducción y Características VUE
Escribir Archivos VUE JS y Componentes
Depuración de código en VUE