一个页面 Vue 实例只能有一个吗？

最新推荐文章于 2021-07-30 09:51:51 发布

lefex

最新推荐文章于 2021-07-30 09:51:51 发布

阅读量9.4k

点赞数 7

本文链接：https://blog.csdn.net/lefex/article/details/104958424

版权

Vue是一个构造函数，通常建议在一个页面中创建一个Vue实例，通过el属性指定Vue渲染的HTML模板。尽管如此，实际上可以在同一页面中创建多个Vue实例，每个实例作用于不同的模板。组件是可复用的Vue实例。本文通过示例探讨了在同一页面上创建多个Vue实例的可能性和工作原理。

摘要由CSDN通过智能技术生成

使用 Vue 写项目时，最重要的是 Vue 实例，它提供了学习 Vue 的方向，逐步掌握与 Vue 实例相关的「特性」是我们的终极目标。

首先，在一个 html 文件中加载 vue.js，在学习 Vue 从如何贡献代码开始这节内容中我们提到过，可以通过 script 标签直接加载 vue.js 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<body>

用浏览器打开这个页面，在 console 中输入 Vue ，你会发现 Vue 其本质是一个函数：

其实 Vue 是一个构造函数，可以被看作是一个“类”，通过 new 创建它的实例。那究竟在一个页面中能创建多少个实例呢？

通常在一个页面中只创建一个 Vue 实例：

<body>
    <div id="app">Hello {
   { msg }}</div>
    <script>
        const vm = new Vue({
            el: '#app'

最低0.47元/天解锁文章

lefex

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
3
评论
一个页面 Vue 实例只能有一个吗？

使用 Vue 写项目时，最重要的是 Vue 实例，它提供了学习 Vue 的方向，逐步掌握与 Vue 实例相关的「特性」是我们的终极目标。首先，在一个 h...
复制链接

扫一扫