Vue

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

TIP

Any .vue files found in .vuepress/components are automatically registered as global, async components. For example:

Inside any markdown file you can then directly use the components (names are inferred from filenames):

<app-1/>

<template>
  <div>{{message}}</div>
</template>

<script>
  export default {
      data: function () {
      return {
        message: 'Hello Vue!'
      }
    },
  }
</script>

TIP

Hello Vue!

v-bind

We can also bind element attributes like this:

<template>
  <div>
    <span v-bind:title="message">
      Hover your mouse over me for a few seconds
      to see my dynamically bound title!
    </span>
  </div>
</template>

<script>
export default {
    data: function () {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  },
}
</script>

TIP

Hover your mouse over me for a few seconds to see my dynamically bound title!

Here we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.” If you open up your JavaScript console again and enter app2.message = 'some new message', you’ll once again see that the bound HTML - in this case the title attribute - has been updated.

Conditionals and loops

v-if

<template>
  <div>
    <span v-if="seen">Now you see me</span>
  </div>
</template>

<script>
export default {
    data: function () {
    return {
      seen: true
    }
  },
}
</script>

TIP

Now you see me

v-for

The v-for directive can be used for displaying a list of items using the data from an Array:

<template>
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
    data: function () {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  },
}
</script>

TIP

1. Learn JavaScript
2. Learn Vue
3. Build something awesome

Handling User Input

To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:

Reversing Message

<template>
  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

TIP

Hello Vue.js!

Button count

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
    data: function () {
    return {
      count: 0
    }
  },
}
</script>

TIP

Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.

v-model

Vue also provides the v-model directive that makes two-way binding between form input and app state a breeze:

<template>
  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
}
</script>

TIP

I love Karla!

Composing with Components

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: