Nuestro primer proyecto creado con el CLI de Vuejs

En anteriores tutoriales vimos cómo crear los componentes, métodos, variables y demás elementos usando únicamente el CDN de Vuejs. Ahora que ya vimos, en un tutorial anterior, cómo utilizar el CLI de Vuejs para crear un proyecto. En este tutorial aprenderemos a declarar estos mismos elementos desde un proyecto creado con el CLI de Vuejs.

Índice

1. Creando un componente y sus propiedades
2. Definiendo los props
3. Definiendo los methods y computed
4. Definiendo un watch
5. Tu turno

1. Creando un componente y sus propiedades

Antes de comenzar te recomiendo ver el tutorial anterior si es que aún no sabes cómo instalar o utilizar el CLI de Vuejs. entonces, una vez que ya tengas un proyecto creado, procederemos a crear nuestro primer componente.

La creación de un componente en Vuejs se resume a la creación de un archivo .vue dentro de la carpeta components. Es aquí donde agruparemos los distintos componentes que conformarán nuestro proyecto.

Por otro lado, la estructura de un componente, ya lo vimos en el tutorial anterior. Ahora más bien veremos cómo es que se definen las variables y demás elementos de un componente. Veamos el siguiente ejemplo, donde declaramos las propiedades o variables de un componente.

<script>
  export default {
    name: "MyInput",
    components: {},
    data() {
      return {
        message: "Hello world",
      };
    },
  };
</script>

Como podemos ver, partimos exportando un objeto con las distintas propiedades de nuestro componente. Estas propiedades son el nombre name, los componentes que utilizaremos dentro de este componente components y las variables que usaremos en este componente, para el cual usamos un método data() que retorna un objeto con las variables que deseamos utilizar. En este caso, solo tenemos la variable message.

Esa es la forma más básica que puede tener un componente dentro de Vuejs. Sin embargo, con eso podemos hacer muy poco. Lo ideal en un componente es tener props, methods, computed y demás elementos. Así que ahora veamos cómo es que se definen todos estos elementos dentro de un componente.

2. Definiendo los props

Como ya sabemos los props son propiedades que se envían desde un componente padre hacia el componente hijo y hay dos formas básicas para definir los props en un componente. La primera que veremos a continuación es la forma más simple, en la que solamente indicamos el tipo de dato que almacena nuestro prop, y este puede ser un String, Number, etc.

/* De forma directa indicando solo el tipo de variable */
export default {
  name: 'MyInput',
  components: {},
  data() {
    return {
      message: 'Hello world'
    }
  },
  props: {
    name: String,
    age: Number
  },
  ...

La segunda forma de declarar un prop es indicando además del tipo, más propiedades como el valor por defecto default o si es que este es obligatorio required.

/* De forma más especifica, indicando otras propiedades*/
export default {
  name: 'MyInput',
  components: {},
  data() {
    return {
      message: 'Hello world'
    }
  },
  props: {
    name: {
      default: 'AndyGeek',
      type: String,
      required: false
    }
  },
  ...

3. Definiendo los methods y computed

Otro de los elementos importantes en un componente son los métodos. Estos definen el qué hacer con los datos que se obtiene del usuario o desde el backend. Son los intermediarios entre lo que se muestra al usuario o lo que se envía al backend. Veamos cómo es que se definen en vuejs.

<script>
export default {
  name: 'MyInput',
  components: {},
  data() {
    return {
      message: 'Hello world'
    }
  },
  methods: {
    myMethod: function () {
      console.log('Hello')
    }
  },
  ...

El ejemplo anterior muestra un método simple que únicamente muestra un console.log() cuando es ejecutado.

Por otra parte tenemos a las propiedades computadas o computed, los cuales son métodos que tiene un valor de retorno y además se ejecutan automáticamente cada vez que cualquier variable asociada a él cambie. Veamos el siguiente ejemplo.

<script>
export default {
  name: 'MyInput',
  components: {},
  data() {
    return {
      message: 'Hello world',
      number: 0
    }
  },
  methods: {
    myMethod: function () {
      this.number++
    }
  },
  computed: {
    addNumber: function () {
      return this.number * 10
    }
  },
  ...

En el ejemplo anterior tenemos una propiedad computada que muestra a la variable number multiplicada por 10 cada vez que el valor de este aumenta en uno a causa del método myMethods, que posiblemente este siendo accionado con un evento click de algún botón.

4. Definiendo un watch

Para terminar este tutorial veamos a los observadores o watch. Estas son funciones que se ejecutan cuando una variable especifica cambia de valor. Asi por ejemplo, podemos crear una función que muestre un console.log() cada vez que se agregue una letra a un input. Como su nombre lo indica, observan una variable y se ejecutan cuando hay cambios en su valor.

<script>
export default {
  name: 'MyInput',
  components: {},
  data() {
    return {
      message: 'Hello world',
    }
  },
  watch: {
    message: function () {
      console.log('Se cambio')
    }
  }
  ...

En el ejemplo anterior, definimos un observador para la variable message que dispara un console.log() cada vez que este cambie. Es importante saber que el nombre del observador debe ser el mismo que la variable a observar.

5. Tu turno

Acabamos de ver cómo es que se define un componente junto con todas sus propiedades. Para seguir practicando te recomiendo crear tus propios proyectos utilizando el CLI de Vuejs y luego crear tus propios componentes, uno dentro de otro, enviando props y definiendo métodos, propiedades computadas y observadores. Solo con la práctica llegarás a ser un buen desarrollador. 😀