❮ Vue3 Custom Directive Vue3 Mixins ❯

Getting Started with Vue3

When you're just starting to learn Vue, we don't recommend using the vue-cli command-line tool to create projects. A simpler approach is to directly include the vue.global.js file in your page for testing and learning.

Applications in Vue3 are created using the createApp function, with the following syntax:

const app = Vue.createApp({ /* options */ })

The options passed to createApp are used to configure the root component. When the application is mounted using mount(), this component serves as the starting point for rendering.

A simple example:

Vue.createApp(HelloVueApp).mount('#hello-vue')

The parameter for createApp is the root component (HelloVueApp), which is the starting point for rendering when the application is mounted.

An application needs to be mounted to a DOM element. The above code uses mount('#hello-vue') to mount the Vue application HelloVueApp to <div id="hello-vue"></div>.

Next, we'll start learning from the code for Hello Vue!!.

Vue 3.0 Example

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Click the "Try it" button to see the live example.

<script src="https://unpkg.com/vue@next"></script>

The HTML page contains a div element:

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue') mounts the Vue application HelloVueApp to <div id="hello-vue"></div>.

{{ }} is used to output object properties and function return values.

{{ message }} corresponds to the value of message in the application.

Data Option

The data option is a function. Vue calls this function during the process of creating a new component instance. It should return an object, which Vue then wraps with its reactivity system and stores in the component instance as $data.

Example

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// Changing the value of vm.count also updates $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// Conversely, changing $data.count also updates vm.count
vm.$data.count = 6
document.write(vm.count) // => 6

The above instance properties are only added when the instance is first created, so you need to ensure they are all included in the object returned by the data function.

Methods

We can add methods to our component using the methods option, which contains an object of the required methods.

The following example adds the methods option, which includes the increment() method:

Example

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` refers to the component instance
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

❮ Vue3 Custom Directive Vue3 Mixins ❯