前端培训丁鹿学堂之vue3：最简单的vue应用创建最简单的vue应用我们可以像使用jquery一样使用vue。 1 引

最简单的vue应用

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

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

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

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

    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <span>你好，{{name}}</span>
        </div>
    </div>

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

    <script>
        // 模拟从后台获取的数据
        window.username = '张三'
        Vue.createApp({
            data(){
                return {
                    title:'hello，vue',
                    name:window.username
                }
            },
        }).mount('#app')
    </script>

最简单的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>