Quasar - Learning Basic Vue

What is Quasar?

• It's a framework that sites on top of Vue.js
• Vue.js app with single codebase
• web - SPA, PWA, SSR
• Mobile App using cordova - iOS, Android
• Desktop App using electron - Mac, Windows, Linux
• Huge library of components ( button, tabs)
• Utilities (abilities to unique id, local storage etc)
• Hot reloading on all devices (during development)
• Platform detection
• Great documentation and support

What is vue.js?

• Powerful Front-end
• Can be used to add functionality to existing web pages (widgets)
• or can be used to power an entire SPA (single page application)
• A vue.js SPA is made up of Vue component files
• template ( for HTML)
• Script (for data, methods, computed properties etc)
• Style

What is Vuex ?

• Vuex is a state management pattern + library for Vue.js applications
• Store all of our data in one centralized place
• Components of our app can access the data from the Store using getters
• Components of our app can change the data in the Store by triggering actions and mutations that are contained in the Store
• Reactive - when the data in the Store changes, all components using that data will be updated

Auto-import Components & Directives

In the latest version of Quasar, after you run quasar create awesome-todo, there is now an option to "Auto import components & directives". If you choose Yes to this, then you won't need to manually specify Components and Directives in the quasar.conf.js file, as you'll see me doings throughout the course.

I would recommend that you choose Yes to this option and ignore any cases in the course where I manually add a Component or Directive to the quasar.conf.js file.

However, please note that you still need to add Quasar Plugins to the quasar.conf.js file whenever you use these (I.E Dialog, Notify, Loading etc).

Lifecycle Hooks

beforeCreate() fire just before your vue component is created
created() vue component is created, all you data is loaded, markup, style is loaded.
beforeMount() just before your vue component applied to the browser
mounted() when first component is loaded

Vue component view is updated

beforeUpdate() just before validate is applied to the vue
updated() point where vue is validated

Vue component is destroyed

beforeDestroy() fired just before the component is destroyed
destroyed() when your component is destroyed

Example of Basic Vue

<template>
  <q-page style="padding:10px;">

    <button
      style="position:absolute;right:10px;"
      @click="counter++"
    >
      {{ counter }}
    </button>
    <input 
    :style="errorStyle"
    v-model="message" 
    @keyup.esc="handleKeyup" 
    @keyup.enter="alertMessage"
    v-autofocus
    ref="messageInput" />
    <button @click="clearMessage">Clear</button>

    <div>{{ message.length }}</div>
    <h5 
      v-if="message.length"
      class="border-grey" >{{ message }}</h5>
    <h6 v-else>No Message entered</h6>
    <hr>
    <p>Uppercase message: {{ messageUppercase }}</p>
    <p>Lowercase message: {{ message| messageLowercase }}</p>
  </q-page>
</template>

<script>
export default {
  data() {
    return {
      message: 'I love you',
      counter: 0
    }
  },
  computed: {
    messageUppercase() {
      console.log('messageUppercase was fired')
      return this.message.toUpperCase() + this.counter
    },
    errorStyle() {
      if (this.message.length > 22) {
        return {
          'color' : 'red',
          'background' : 'pink'
        }
      }
    }
  },
  methods: {
    clearMessage() {
      this.message = ''
    },
    handleKeyup(e) {
      if (e.keyCode == 192) {
        this.clearMessage()
      }
      else if (e.keyCode == 13) {
        this.alertMessage()
      }
    },
    alertMessage() {
      alert(this.message)
    },
  },
  filters: {
    messageLowercase(value) {
      return value.toLowerCase();
    }
  },
  directives: {
    autofocus: {
      inserted(el){
        el.focus()
      }
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    this.$refs.messageInput.className = 'bg-green text-white'
  },
  beforeUpdate(){
    console.log('beforeUpdate')
  },
  updated(){
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<style scoped>
  .border-grey{
    border: 1px solid grey;
  }
  input, button {
    font-size:23px;
  }
  .error {
    color: red;
    background: pink;
  }
</style>