前端培训丁鹿学堂之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

相关阅读:
Jetson平台180度鱼眼相机畸变校正调试记录
给图片添加水印——使用ImageSharp
centos7.6修改ds相关配置
docker （二）-yum&二进制部署
“Python+”集成技术高光谱遥感数据处理与机器学习深度应用
分库分表路由组件构建方案V1
Oracle技术分享 oracle 19.14升级19.15
如何用一个插件解决 Serverless 灰度发布难题？
图解 Apache SkyWalking UI 的使用
Docker数据管理、端口映射、容器互联

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