Vue3 Getting Started

Vue.js is a progressive JavaScript framework mainly used for building user interfaces.

When you are just starting to learn Vue, we do not recommend using the vue-cli command-line tool to create projects. A simpler way is to directly include the vue.global.js file in the page to test and learn.

An application in Vue3 is created by using the createApp function, with the syntax format as follows:

const app = Vue.createApp({ /* 根组件选项 */ })

The options passed to createApp are used to configure the root component.

The application instance must be rendered only after the.mount()method is called..mount()The method accepts a "container" parameter, which can be an actual DOM element or a CSS selector string:

<div id="app"></div>
app.mount('#app')

A simple example:

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

The parameter of createApp is the root component (HelloVueApp). When mounting the application, this component is the starting point of rendering.

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

Next, we will start learning from theHello Vue!!code.

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>

Try it »

Click the "Try it" button to view the online example.

In the above example, we first introduce Vue's JS file in the HTML page:

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

There is a div element in the HTML page:

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

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

{{ }}Used to output object properties and function return values.

{{ message }}Corresponds to themessagevalue in the application.

Root Component Template

The root component's template is usually embedded in the component definition, but it can also be specified separately by directly defining the template inside the container at the mount point.

Example

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

app.mount('#app')
</script>

Try it »

When the root component has no template option set, Vue will automatically use the container's innerHTML as the template.

Code explanation:

  • Usingsetupfunction: In Vue 3, the component logic is usuallysetupdefined in the function. Here we use thesetupfunction to define reactive datacountand methods.increment。

  • Usingref: In thesetupfunction, we userefto create reactive data.count。

  • Defineincrementmethod: Define aincrementmethod to increasecountthe value.

  • Return reactive data and methods: In thesetupfunction, returncountandincrement, so that they can be accessed and used in the template.

data Option

data Optionis a function. Vue calls this function during the process of creating a new component instance. It should return an object, and then Vue wraps it with the reactivity system and stores it 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>")
// Modifying the value of vm.count will also update $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// and vice versa
vm.$data.count = 6
document.write(vm.count) // => 6

Try it »

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

Methods

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

In the following example, we added the methods option, which contains theincrement()method:

Example

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` points 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

Try it »
Other Extensions