Vue JS Options API short and structured overview

Vue JS is a JavaScript framework used to build interactive UIs and SPAs using a component-based approach.

Options API (Core Concept)

The Options API is a traditional way to write Vue components where you organize code using different options like data, methods, etc.

        
        export default {
  data() {},
  methods: {},
  computed: {},
  mounted() {}
}

data()

Stores reactive state (variables).

        
        data() {
  return {
    count: 0
  }
}

methods

Functions used for actions/events.

        
        methods: {
  increment() {
    this.count++
  }
}

computed

Used for derived/calculated values (cached).

        
        computed: {
  doubleCount() {
    return this.count * 2
  }
}

watch

Watches changes in data and runs logic.

        
        watch: {
  count(newVal) {
    console.log(newVal)
  }
}

Vue Lifecycle Hooks (Options API) 

Creation Phase

  • beforeCreate() :- Component is initializing (data & methods not available yet)
  • created() :- Component created (data, methods available, DOM not yet mounted)


Mounting Phase

  • beforeMount() :- Before DOM is rendered
  • mounted() :- DOM is ready (you can access HTML elements)


Updating Phase

  • beforeUpdate() :- Before DOM updates after data change
  • updated() :- DOM updated after data change


Unmounting Phase

  • beforeUnmount() :- Before component is removed
  • unmounted() :- Component removed from DOM


Simple Execution Flow (Order)

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted

        
        export default {
  data() {
    return {
      count: 0
    }
  },

  //  Creation
  beforeCreate() {
    console.log("beforeCreate: Component initializing");
  },
  created() {
    console.log("created: Data & methods ready");
  },

  // Mounting
  beforeMount() {
    console.log("beforeMount: Before DOM render");
  },
  mounted() {
    console.log("mounted: DOM is ready");
  },

  //  Updating
  beforeUpdate() {
    console.log("beforeUpdate: Before DOM update");
  },
  updated() {
    console.log("updated: DOM updated");
  },

  //  Unmounting
  beforeUnmount() {
    console.log("beforeUnmount: Before component removed");
  },
  unmounted() {
    console.log("unmounted: Component removed");
  },

  methods: {
    increment() {
      this.count++;
    }
  }
};

props

Used to pass data from parent to child.

        
        props: ['title']

emits

Used to send data from child to parent.

        
        emits: ['clickEvent']

components

Register child components.

        
        components: {
  MyComponent
}

Core Vue Directives

Data Binding


v-bind → Bind attribute dynamically

short hand-  :href="link"

v-model → Two-way data binding (forms)

 v-model="name"

Condition Rendering

  • v-if → Render if condition is true
  • v-else → Else block
  • v-else-if → Else-if condition
  • v-show → Toggle visibility (CSS display)


List Rendering

v-for → Loop through data

v-for="item in items"

Event Handling

v-on → Handle events

 v-on:click="handleClick"  or in short @click="handleClick"

Rendering Control

  • v-once → Render only once (no updates after)
  • v-pre → Skip compilation (raw HTML shown)
  • v-cloak → Hide uncompiled template until ready


Slot & Component

v-slot → Used for slots (Vue 2.6+/Vue 3)

HTML Rendering

v-html → Render raw HTML (! XSS risk)

Dynamic Directive Arguments

  • v-bind:[attr] → Dynamic attribute name
  • v-on:[event] → Dynamic event name


Shorthand Syntax (Very Important)

  • v-bind → :
  • v-on → @
  • v-slot → #

Leave a comment

Feature Posts