页面基础框架以及Vue.js引用（VUE学习1）

最新推荐文章于 2024-01-03 10:44:40 发布

零梦ing

最新推荐文章于 2024-01-03 10:44:40 发布

阅读量343

点赞数 5

分类专栏： VUE基础文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/b312738566/article/details/135215453

版权

VUE基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、设置页面标题：

<title>My first Vue page</title>

二、将Vue应用程序挂载到这个具有id="app"的div元素上，并使用双花括号语法进行数据绑定，显示Vue应用程序中的message数据

<div id="app">
    {{ message }}
  </div>

三、引入 Vue.js 3 的全局脚本

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

四、创建 Vue 应用程序，并定义数据对象，这里只包含一个名为message的属性

 const app = Vue.createApp({
      data() {
        return {
          message: "Hello World!"
        }
      }
    })

五、将 Vue 应用程序挂载到页面上的 #app 元素

app.mount('#app')

六、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My first Vue page</title>
</head>
<body>

  <div id="app">
    {{ message }}
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "Hello World!"
        }
      }
    })

   app.mount('#app')

  </script>
</body>
</html>

七、运行结果：

零梦ing

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
页面基础框架以及Vue.js引用（VUE学习1）

二、将Vue应用程序挂载到这个具有id="app"的div元素上，并使用双花括号语法进行数据绑定，显示Vue应用程序中的message数据三、引入 Vue.js 3 的全局脚本四、创建 Vue 应用程序，并定义数据对象，这里只包含一个名为message的属性五、将 Vue 应用程序挂载到页面上的 #app 元素六、完整代码七、运行结果：
复制链接

扫一扫