Introduction

[wtsang11]

http://localhost/TechNotes/wp-admin/post.php?post=1417&action=edit

VSC: http://localhost/lab/python/utilities/study_codes/opencodes.php?f=/Users/wtsang/Lab/vue/danny_vue_cross_platform_apps/

Vue Documentation https://vuejs.org/v2/guide/#Getting-Started

[wtsang11]

install quasar CLI

https://quasar.dev/quasar-cli/installation

sudo npm install -g @quasar/cli

[wtsang11]

Formatting Vue File

Code > Preferences > Keyboard Shortcut , select keybinding: Shift+Option+F Or Install formatter extension Prettier and Vetur In the settings of Vetur, make sure Default formatter is prettier

[wtsang11]

Directives

Ref https://012.vuejs.org/guide/directives.html A directive is an instruction to activate a certain action in a DOM element. Example: v-show="message.length" show the element if length is greater than 0.

Note that v-if will not simply hide the DOM element but delete it. v-else works along with v-if.

Example: v-model="message" binds the element to a data element message.

Example: 3 different ways to do the same:

1. v-bind:class="{ error: message.length > 22}"
2. :class="{ error: message.length > 22 }"
3. :style="errorStyle"

In computed object: 

errorStyle() {
      if (this.message.length > 22) {
        return {
          color: 'red',
          background: 'pink',
        };
      }
    },

In style object:

.error {
  color: red;
  background: pink;
}

[wtsang11]

Debugging CSS

Ref https://developer.chrome.com/docs/devtools/css/overrides/ Inspect of the element in question showed Invalid value in: .border-grey { border: 1 px solid grey; }

Solution: Remove the space between 1 px i.e. 1px

[wtsang11]

Computed Property

It is more efficient to use computed property than calling a method directly because the function is called only when the element in question changes, not whenever the page changes. Example:

Uppercase message: {{ messageUppercase }}

computed: {
    messageUppercase() {
      return this.message.toUpperCase();
    },
 },

[wtsang11]

Filters

A filter is mainly used simply to transform a value of a DOM element. Example:

filters: {
    messageLowercase(value) {
      return value.toLowerCase();
    },
  },

The filter is used by piping a value to it:

Lowercase message: {{ message | messageLowercase }}

[wtsang11]

Lifecycle Hooks

beforeCreate -> created -> beforeMount -> mounted

beforeUpdate -> updated

beforeDestroy

[wtsang11]

ref

A reference to a DOM element. It can be accessed by the vue variable $refs. This provide a handy utility to access the element and perform tasks such as input verification.

Example:

<div ref="messageLength">{{ message.length }}</div>

mounted() {
    if (this.message.length > 22) {
      this.$refs.messageLength.className = 'error';
    }
  }