创建一个简单的Vue3.0应用程序

pan_junbiao

于 2024-08-18 11:52:46 发布

阅读量261

点赞数 4

分类专栏： Vue 我の原创文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/pan_junbiao/article/details/141297173

版权

我の原创同时被 2 个专栏收录

489 篇文章 25 订阅

订阅专栏

Vue

11 篇文章 0 订阅

订阅专栏

1、Vue.createApp() 方法的介绍

每一个 Vue.js 的应用都需要创建一个应用程序的实例对象并挂载到指定 DOM 上。在 Vue3.0 中，创建一个应用程序实例的语法格式如下：

Vue.createApp(App)

createApp() 是一个全局 API，它接收一个根组件选项对象作为参数。选项对象中包括数据、方法、生命周期钩子函数等选项。创建应用程序实例后，可以调用实例的 mount() 方法，将应用程序实例的根组件挂载到指定的 DOM 元素上。这样，该 DOM 元素中的所有数据变化都会被 Vue 监控，从而实现数据的双向绑定。例如，要绑定的 DOM 元素的 id 属性值为 app，创建一个应用程序实例并绑定到该 DOM 元素的代码如下：

Vue.createApp(App).mount('#app')

下面分别对组件选项对象中的几个选项进行介绍：

1.1 数据

在组件选项对象中有一个 data 选项，该选项的是一个函数，Vue 在创建组件实例时会调用该函数。data() 函数可以返回一个数据对象，应用程序实例本身会代理数据对象中的所有数据。

1.2 方法

在创建的应用程序实例中，通过 methods 选项可以定义方法。应用程序实例本身也会代理 methods 选项中的所有方法，因此也可以像访问 data 数据那样来调用方法。

1.3 初始化

Vue 应用程序的初始化操作，可以使用生命周期钩子的 created() 方法，该方法会在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。

2、综合实例

【实例】创建一个简单的Vue3.0应用程序，实例用户信息的初始化与数据绑定。执行结果如下图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="pan_junbiao的博客">
    <title>Vue实例</title>
</head>

<body>
    <div id="app">
        <h3>{{title}}</h3>
        <p>用户ID：{{userInfo.userId}}</p>
        <p>用户名称：{{userInfo.userName}}</p>
        <p>博客信息：{{userInfo.blogName}}</p>
        <p>博客地址：{{userInfo.blogUrl}}</p>
    </div>
</body>

<!-- 第一步骤：引入 Vue 框架 -->
<!-- 下载地址：https://unpkg.com/vue@3.4.38/dist/vue.global.js -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    //第二步骤：使用 Vue.createApp 函数创建一个应用程序实例
    const vueApp = Vue.createApp({
        //数据
        data() {
            return {
                title: "Vue3.0 使用 Vue.createApp() 创建一个应用程序 ",
                userInfo: {} //定义用户对象
            }
        },
        //初始化的入口
        created: function () {
            //调用方法：获取用户信息
            this.getUserInfo();
        },
        //方法
        methods: {
            //获取用户信息
            getUserInfo: function () {
                this.userInfo = {
                    userId: 1,
                    userName: "pan_junbiao的博客",
                    blogName: "您好，欢迎访问 pan_junbiao的博客",
                    blogUrl: "https://blog.csdn.net/pan_junbiao"
                }
            }
        }
        //使用 mount() 方法，装载应用程序实例的根组件
    }).mount('#app'); 
</script>

</html>

pan_junbiao

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
创建一个简单的Vue3.0应用程序

每一个 Vue.js 的应用都需要创建一个应用程序的实例对象并挂载到指定 DOM 上。createApp() 是一个全局 API，它接收一个根组件选项对象作为参数。选项对象中包括数据、方法、生命周期钩子函数等选项。创建应用程序实例后，可以调用实例的 mount() 方法，将应用程序实例的根组件挂载到指定的 DOM 元素上。这样，该 DOM 元素中的所有数据变化都会被 Vue 监控，从而实现数据的双向绑定。
复制链接

扫一扫