Getting started with Vue3
Just started to learn Vue, we do not recommend using the vue-cli command line tool to create projects, the easier way is to directly import the vue.global.js file on the page to test and learn.
Applications in Vue3 are created by using the createApp function, and the syntax is as follows:
const app = Vue.createApp({ /* 选项 */ })
The options passed to createApp are used to configure the root component. This component is used as the starting point for rendering when the application is mounted using mount().
A simple example:
Vue.createApp(HelloVueApp).mount('#hello-vue')
The parameter of createApp is the root component (HelloVueApp), which is the starting point for rendering when the application is mounted.
An application needs to be mounted into a DOM element. The above code uses mount('#hello-vue') to mount the Vue application HelloVueApp to <div id="hello-vue"></div>.
Next, let's learn from the code of Hello Vue!!
Vue 3.0 instance
<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 view the online example In the above example, we first import the Vue JS file into the HTML page:
<script src="https://unpkg.com/vue@next"></script>
There is a div element in the HTML page:
<div id="hello-vue" class="demo">
{
{ message }}
</div>
mount('#hello-vue') mounts the Vue application HelloVueApp into <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 will then wrap through 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("<br>")
document.write(vm.count) // => 4
document.write("<br>")
// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// 反之亦然
vm.$data.count = 6
document.write(vm.count) // => 6
The above instance attributes 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.
method
We can add methods to a component using the methods option, which contains an object of the required methods.
In the following example, we have added the methods option, which includes the increment() method:
example
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})
const vm = app.mount('#app')
document.write(vm.count) // => 4
document.write("<br>")
vm.increment()
document.write(vm.count) // => 5