VueJs 是一个流行的 JavaScript 框架，它使用模板来创建 Web 应用程序的用户界面。在开发复杂的应用程序时，VueJs 提供了一些方便的功能来管理和组织模板代码。其中一个功能是可以加载外部模板，这样可以将模板代码分离到不同的文件中，使得代码更加模块化、易于维护和重用。
加载外部模板的方法
有两种主要的方法可以在 VueJs 中加载外部模板：
1. 使用单文件组件
单文件组件 (Single File Components, SFC) 是一种 VueJs 的特殊文件格式，其中包含了所有与该组件相关的代码，包括 HTML 模板、JavaScript 代码和 CSS 样式。
在单文件组件中，可以使用 <template> 标签定义 HTML 模板。这样，我们就可以将 HTML 模板放在 .vue 文件中，并使用 webpack 或其他构建工具将其打包成一个 JavaScript 文件，然后在应用程序中引用该文件。
示例代码如下所示：
-- -------------------- ---- -------
---- --------------- ---
----------
---- ---------------------
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -------
-------- -------
--
--
---------
------ -------
------------- -
------- --- ----- -----
-------- -----
-
--------在另一个组件中，可以通过以下方式引用 MyComponent：
-- -------------------- ---- -------
---- ------- ---
----------
---- ------------
------------- ------------- -------------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----- ------
----------- -
------------
--
--
---------
------ -------
---- -
---------- ------
------- - -----
-
--------2. 使用 v-include 指令
另一种加载外部模板的方法是使用 VueJs 的 v-include 指令。该指令允许在模板中包含其他文件的内容。
要使用 v-include 指令，需要通过一个自定义的指令来实现它。下面是一个简单的示例：
-- -------------------- ---- -------
------------------------ -
-- - ---- -------
----- -------- ---- -------- -
-- ------ -------------- --
--- --- - --- -----------------
-- ------
---------------------- - -------- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
-- -------------
------------ - -----------------
-
--
-- -- --- ---------
--------------- -------------- ------
-----------
--
---接下来，在模板中使用 v-include 指令：
<!-- MyComponent.vue --> <template> <div class="my-component" v-include="'my-template.html'"></div> </template>
在上面的示例中，v-include 指令将加载 my-template.html 文件的内容，并将其插入到组件的模板中。
总结
这篇文章介绍了如何在 VueJs 中加载外部模板。使用单文件组件和 v-include 指令是两种常见的方法。通过将模板分离到不同的文件中，我们可以使代码更加模块化、易于维护和重用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27098