Vue.js is a progressive JavaScript framework, mainly used for building user interfaces.
When just starting to learn Vue, we don't recommend using the vue-cli command line tool to create projects. A simpler way is to directly import the vue.global.js file on the page for testing and learning.
Applications in Vue3 are created using the createApp function, with the following syntax:
const app = Vue.createApp({ /* root component options */ })
The options passed to createApp are used to configure the root component.
The application instance will only be rendered after the .mount() method is called. The .mount() method accepts a "container" parameter, which can be an actual DOM element or a CSS selector string:
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 for rendering.
An application needs to be mounted to a DOM element. In the above code, we use mount('#hello-vue') to mount the Vue application HelloVueApp to .
Next, we will start learning from the code of **Hello Vue!!**.
## Vue 3.0 Example
{{ message }}
const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } Vue.createApp(HelloVueApp).mount('#hello-vue')
[Try it »](#)
Click the "Try it" button to view the online example
In the above example, we first import Vue's JS file in the HTML page:
There is a div element in the HTML page:
{{ message }}
mount('#hello-vue') mounts the Vue application HelloVueApp to .
{{ }} is used to output object properties and function return values.
{{ message }} corresponds to the value of **message** 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 defining the template directly inside the container of the mounting point.
## Example
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const count = ref(0);
function increment() {
count.value++;
};
return { count, increment };
}
});
app.mount('#app')
[Try it »](#)
When the root component does not have a template option set, Vue will automatically use the container's innerHTML as the template.
**Code Explanation:**
* **Using the `setup` function**: In Vue 3, the component logic is usually defined in the `setup` function. Here we use the `setup` function to define the reactive data `count` and the method `increment`.
* **Using `ref`**: In the `setup` function, we use `ref` to create reactive data `count`.
* **Defining the `increment` method**: Define an `increment` method to increase the value of `count`.
* **Returning reactive data and methods**: Return `count` and `increment` in the `setup` function so they can be accessed and used in the template.
### 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 will then wrap with the reactivity system and store 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(" ")
document.write(vm.count)// => 4
document.write(" ")
// Modifying vm.count will also update $data.count
vm.count=5
document.write(vm.$data.count)// => 5
document.write(" ")
// 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 make sure they are all in the object returned by the data function.
## Methods
We can add methods to a component using the methods option, which contains an object of the required methods.
In the following example, we add the methods option, which contains 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(" ")
vm.increment()
document.write(vm.count)// => 5
[Try it »](#)
YouTip