Contents7

2026-05-16 update: This post is a few years old. It’s written against Vue 2 + the Options API — the data() { return ... } + methods: {} style. The current mainstream in 2026 is Vue 3 + the Composition API (<script setup> with ref / reactive / computed), and lifecycle hooks are functions like onMounted / onUnmounted. The skeleton — the three-block structure and the created-vs-mounted distinction — still holds, but the code itself isn’t something you’d drop into a new project as-is.

I’ve been working with Vue.js for over a year now. This post is the bare-bones basics of Vue.js, with a bit of working experience folded in.

The takeaway

  • A Vue file puts HTML, JavaScript, and CSS in a single file
  • The three-block structure — template / script / style — is enough to get started
  • In the script block, the first thing to learn is data, methods, and the lifecycle
  • For the lifecycle, mainly learn the distinction between created and mounted

Understand the structure of a Vue file

The first thing to understand the structure of a Vue file. A Vue file holds all three languages:

  • HTML
  • JavaScript
  • CSS

It looks like this:

<template>
  <div>
    html記述
  </div>
</template>

<script>
  export default {
    name: "XXX",
    data() {
      return {
        xxx: yyy
      }
    }
  }
</script>

<style lang="css">

</style>

Each language can be split out into its own file, but I’ll skip that here.
The script and style blocks can be swapped for other languages.

I usually go with TypeScript for script and SCSS or Stylus for style.

Write HTML in the template block

This is where you write HTML in the template block.

It’s mostly the same as plain HTML, with a few Vue-specific additions.

I’ll cover the Vue-specific bits in a separate post.

Write data and methods in the script block

This is where the JavaScript side lives. The entry point is to write data and methods in the script block.

I’ll use plain JavaScript for the examples here.

The base shape:

export default {
  data() {
    return {
      xxx: "yyy"
    }
  },

  methods: {
    hogeMethod(str) {
      return str
    },
    hugaMethod() {
      let test = this.xxx;
      test = this.hogeMethod(test);
      return test;
    }
  }
}

data is where you declare and initialise variables that are available inside the Vue file.
It’s used a lot when you want to render processed data into the HTML.

Note: you’re returning an object literal here.

methods is just a place for regular functions.

To reference a variable or function defined in the same file, prefix it with this.
Local variables inside the same function don’t need this..

The relevant part:

hugaMethod() {
  let test = this.xxx;
  test = this.hogeMethod(test);
  return test;
}

Use lifecycle hooks to control timing

The lifecycle is the trickiest part of this post. Read it with this in mind: use lifecycle hooks to control timing.
The official reference is here:

Vue.js docs: lifecycle diagram

The lifetime of a Vue file — from load to teardown — is divided into 8 points, and you can hook JavaScript into each one.

The eight points:

  1. beforeCreate — before instance creation
  2. created — after instance creation
  3. beforeMount — before mount
  4. mounted — after mount
  5. beforeUpdate — before update
  6. updated — after update
  7. beforeDestroy — before teardown
  8. destroyed — after teardown

In code:

export default {
  data() {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}
}

The two you’ll actually use most are created and mounted.
The difference between them is when the DOM is loaded.

  • created runs before the DOM is loaded
  • mounted runs after the DOM is loaded

The rough rule: use created for script-side initialisation and mounted for anything that touches the HTML.

Write CSS in the style block

The CSS lives here — write CSS in the style block.
The syntax is plain CSS, so there’s nothing new to learn.

.display-flex {
  display: flex;
}

Closing

That covers the bare basics of Vue.js.

The main acts — Components and Binding — are in separate posts.

Related posts: