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

2023-12-31 15:34:44

一、设置页面标题：

<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>

七、运行结果：

文章来源:https://blog.csdn.net/b312738566/article/details/135215453
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。