前端培训丁鹿学堂之vue3（二）：最简单的vue应用

最简单的vue应用

我们可以像使用jquery一样使用vue。

1 引入，我们可以使用cdn的方式从网络上引入vue，引入以后我们就得到了一个对象Vue，他有一系列的方法，也是我们要学习的vue的方法。

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
1

2 定义vue可以作用的容器，给一个div 加id=app

    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <span>你好，{{name}}</span>
        </div>
    </div>
1
2
3
4
5
6

3 创建vue实例，并且把vue的这些应用到我们标记的id为app的div上

    <script>
        // 模拟从后台获取的数据
        window.username = '张三'
        Vue.createApp({
            data(){
                return {
                    title:'hello，vue',
                    name:window.username
                }
            },
        }).mount('#app')
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

最简单的vue就使用起来了。

几个用到的api通俗解释：

Vue.createApp ：它是创建应用到页面的vue的方法。Vue是个大模板，我们通过这个方法创建我们想要的定制的vue内容
data函数是存放vue使用的数据的。我们把vue的数据放到这里统一管理。
mount方法是挂载用的，我们要对页面中哪个区域起作用，就挂载到哪个区域上。
附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <span>你好，{{name}}</span>
        </div>
    </div>
    <script>
        // 模拟从后台获取的数据
        window.username = '张三'
        Vue.createApp({
            data(){
                return {
                    title:'hello，vue',
                    name:window.username
                }
            },
        }).mount('#app')
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

相关阅读:
高频Postman软件测试面试题
Linux 文件系统学习
【CSDN 每日一练 ★☆☆】【数论】用数组写水仙花数
wordpress获取登录权限后获取shell的方法
什么是“根创新”？从公交支付用上国产数据库说起
spring知识巩固
OpenHarmony 4.0 Release 编译异常处理
win10下Mariadb绿色版安装步骤
hiredis C库调用的工具会话类封装。
unity 烘焙的时候出现模型没有光影的情况

原文地址：https://blog.csdn.net/qq_38525381/article/details/125525678