开发入门的代码示例来源于

1
2
git clone https://gitee.com/eggtoopain/vue3-entry-video-related-code
git checkout 01-start

创建应用

每次使用Vue的时候，我们都需要使用创建App，通过Vue内的createApp函数我们可以很方便的创建我们的一个App。

这个函数有一个可选选项，我们可以传入一个对象。然后我们还需要使用mount()方法将我们创建的应用挂载到DOM上，没有挂载到DOM上的应用则不受影响

1
Vue = createApp({}).mount('#app');

接下来我们在一个div元素中，使用id指明我们挂载的app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        Vue.createApp({}).mount('#app')
    </script>
</body>
</html>

然后打开我们这个页面，通过浏览器开发者工具中的控制台，我们就可以看到vuejs已被成功加载

image.png

data()函数

data函数是在vuejs中用于向DOM传值的函数，它的返回值为一个对象，我们可以将我们需要传递的值放入在这个对象内部

1
2
3
4
5
Vue.createApp({
    data() {
        return {}
    }
}).mount('#app')

通过这个方法，我们在我们的HTML标签内使用{{value}}（插值表达式）使用我们在data函数中返回的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    title : '这是一个VueApp'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

打开我们的网页我们就可以看到效果了

image.png

在Vuejs内写好数据，然后反馈到DOM中预留的位置，就是Vue使用的基本思路。