Lección 2.2. Cómo usar Vue en Quasar

Hola amiga/o lector, hoy continuamos con una nueva lección, un poco teórica pero imprescindible para comprender cómo usar Vue en Quasar. Si te estás iniciando en Quasar es una buena idea familiarizarse con ES6 y tener un conocimiento bastante bueno sobre cómo funciona Vue. (Aquí una descripción rápida de ES6 y aquí una lista completa de características de ES6) Si tienes experiencia con otro frameworks pero nunca has trabajado con Vue puedes pasarte por la documentación oficial, esto te ayudará a comprender cómo se pueden usar y configurar los componentes de Quasar.

Componentes de Vue de un solo archivo

Las aplicaciones que construirás con Quasar serán con archivos .vue que tendrán varias secciones: template (HTML), script (Javascript) y style (CSS/Stylus/SASS/SCSS/Less) todo en el mismo archivo.

<template>
  <!--Aqui se define el código html del componente Vue -->
</template>

<script>
  <!--Aqui se define el código Javascript del componente Vue -->
  export default {
    // Código js
  }
</script>

<style>
  <!--Aqui se define el código css del componente Vue -->
</style>

Preprocesadores de CSS

En la etiqueta style de los componentes puedes usar el preprocesador que más te guste de CSS. Recuerda que a la hora de crear el proyecto en la primera lección puedes seleccionar el preprocesador de CSS que más te guste.

<style lang="stylus"> 
  .un-div 
    font-size 15px 
</style>

Solamente tienes que cambiar lang=“stylus” por el procesador seleccionado, ejemplo lang=“sass”

Directivas de Quasar

Quasar viene con con algunas directivas Vue predefinidas. Una directiva es un atributo de un elemento HTML que luego va a interpretar VueJS. Estas directivas siempre comienzan con una v- delante. Ejemplo:

<div v-ripple>Click</div>

Para poder usar las directivas de Quasar es necesario importarlas a través del fichero quasar.conf.js y añadir lo siguiente:

framework: {
   directives: ['Ripple']
}

Puedes añadir más directivas, en la misma línea separándolas por comas.

Usando componentes de Quasar

Todos los nombres de los componentes de Quasar comienzan con una Q, por ejemplo Qbtn, QInput. En la primera lección al crear nuestro proyecto hemos seleccionado que la importación de los componentes se haría de forma manual para hacer la compilación más rápida y tener un bundle de menor tamaño. Bien, para poder usar los componentes de Quasar es necesario añadirlos al archivo quasar.conf.js

framework: {
    components: ['QBtn', 'QIcon']
}

Este es un ejemplo de como usar los componentes de Quasar en nuestra plantilla html.

<div>
    <q-btn @click="ejecutaUnaAccion" label="Ejecutar acción" />
    <q-icon name="alarm" />
</div>

Usando los Plugins de Quasar

Los Plugins de Quasar son características que se puedes usar tanto en los archivos de Vue como fuera de ellos. Al igual que los componentes es necesario importarlos a través del archivo quasar.conf.js

framework: {
    plugins: ['Notify', 'BottomSheet']
}

En el siguiente ejemplo podemos ver como podemos usar los Plugins tanto en el código html como el código javascript del componente.

<template>
  <div>
    <q-btn 
      @click="$q.notify('Mensaje de notificación')"
      color="primary"
      label="Mostra mensaje"
    />

   <q-btn 
      @click="mostrarNotificacion"
      color="primary"
      label="Mostrar otra notificación" 
   />
  </div>
</template>
<script>
  export default {
    methods: {
      mostrarNotificacion () {
        this.$q.notify('Otra notificacion')
      }
    }
  }
</script>

En el primer componente q-btn podemos ver como hacer uso del plugins Notify directamente en el código html a través de $q. En el segundo componente hacemos uso del componente Notify a través de un método del componente que estamos creando.

Importando todos los Componentes, Directivas y Pugins de Quasar Puedes referenciar todos los Componentes, Directivas y Plugins de Quasar desde el archivo quasar.conf.js, añadiendo el siguiente código:

framework: 'all'

Esta práctica está bien para hacer algunas pruebas y familiarizarse con el Framework pero no es recomendable en producción porque estarías importando componentes que no utilizarías y hacer que el empaquetado de la app aumente de tamaño y la vuelva ineficiente.

Etiquetas de cierre

Algunos componentes de Quasar no necesitan que incluya contenido HTML dentro de ellos. En estos casos puedes usarlos como etiquetas de cierre automático. Por ejemplo:

<q-icon name="cloud" />

Lo que es equivalente a:

<q-icon name="cloud"></q-icon>

Ambas formas son válidas y pueden usarse.

Propiedades de Vue

Las propiedades son valores que le pasamos a los componentes y que pueden cambiar su aspecto y/o funcionamiento. Vamos a ver al componente QBtn y algunas de sus propiedades para familiarizarnos con esto. Un componente QBtn se podría declarar de la siguiente forma:

<q-btn color="white" text-color="black" label="Esto es un botón" />

Como vemos este componente tiene tres propiedades: color=“white” : Establece el color del botón text-color=“black” : Establece el color del texto del botón label=“Esto es un botón”: Establece el texto del botón. Como hemos podido ver todos las propiedades que se le han pasado a q-btn son de tipo String.

Valores dinámicos

En el ejemplo anterior le pasamos los valores directamente en el código al componente, pero si queremos pasar un valor de forma dinámica entonces cambia, por ejemplo:

<template> 
  <q-btn :color="miVariableColor" /> 
</template> 

<script> 
  export default { 
    data () { 
     return { 
       miVariableColor: ‘red’ 
     } 
    }
  } 
</script>

Puedes ver que hemos puesto dos puntos : a la propiedad color, la que recibe el valor de variable MiVaribleColor.

Eventos en componentes de Quasar

La mayoría de los componentes de Quasar, tienen eventos definidos que se pueden utilizar para ejecutar una acción. Por ejemplo:

<template>
  <q-page class="flex flex-center">
    <q-input @input="hacerAlgo" label="Escribe algo" />
  </q-page>
</template>

<script>
export default {
  name: 'Page',
  
  methods: {
    hacerAlgo () {
      console.log('haciendo algo')
    }
  }
}
</script>

En este ejemplo de código podemos ver el componente q-input con el metodo @input que se ejecuta casa vez que escribimos algo en el campo de texto. En este caso se ejecuta el método hacerAlgo el cual escribe un mensaje en la consola del navegador.

Conclusiones.

Hasta aquí la lección de hoy, si quieres profundizar más en el uso de Vue con Quasar puedes consultar la documentación oficial en el siguiente enlace: Uso de Vue: https://quasar.dev/start/how-to-use-vueComponetes de Quasar: https://quasar.dev/vue-components/ En la siguiente lección comenzamos a trabajar con la interfaz gráfica del proyecto, crearemos nuestro primer layout e integraremos cada página con el menú utilizando vuejs router. Recuerda suscribirte para no perderte ni una sola entrada en el blog. Hasta la próxima.