VueJs 模板。如何加载外部模板

2024-02-13

我是 Vue.js 的新手,我使用 AngularJS 一段时间了,在 Angular 中我们用来加载模板,例如,

template: '/sometemplate.html',
controller: 'someCtrl'

我们如何在 Vue 中做这样的事情,而不是像这样在 JavaScript 中保留大型 HTML 模板,

new Vue({
  el: '#replace',
  template: '<p>replaced</p>'
})

这对于小模板来说没问题,但是对于大模板来说这实用吗?

有没有办法像 Vue 一样加载外部模板 HTML 或在脚本标签内使用 HTML 模板?

<script type="x-template" id="template">HTML template goes here</html>

您可以通过引用脚本标签模板来使用它id.

{
  template: '#some-id'
}

Though, I highly recommend using vueify https://github.com/vuejs/vueify (if you use browserify) or vue-loader https://github.com/vuejs/vue-loader (if you use webpack) so you can have your components stored in nice little .vue files like this.

另外,Vue 的作者写了一篇关于外部模板 url 主题的好文章:

https://vuejs.org/2015/10/28/why-no-template-url/ https://vuejs.org/2015/10/28/why-no-template-url/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJs 模板。如何加载外部模板 的相关文章

随机推荐

  • java.security.NoSuchAlgorithmException:RSA 签名不可用

    这是例外 Exception in thread main java security NoSuchAlgorithmException RSA Signature not available at java security Signat
  • 奇怪的回声输出

    谁能解释一下 bash shell 的这种行为 它让我发疯 root ns1 bin export test whois h whois lacnic net 187 14 6 108 grep i inetnum awk print 2
  • 共享环境中 IIS7 中应用程序池回收的最佳设置是什么?

    共享环境中 IIS7 中应用程序池回收的最佳设置是什么 作为托管者 您肯定希望回收内存和时间 潜在的请求限制和 CPU 您希望对这些限制采取非常积极的态度 但请确保将它们发布给您的客户 Memory https technet micros
  • UWP WinUI TreeView 以编程方式滚动到项目

    我正在尝试使用新的WinUI工具包TreeView控制 我需要以编程方式滚动到特定项目 我找不到办法做到这一点 目前 没有这样的APITreeView用于滚动到视图中的类 但你可以获得TreeViewList在树视图中ControlTemp
  • 从 Spring 控制器中删除重复项

    我一直在寻找一种方法来减少 Spring MVC 控制器中因细微差异而重复的代码量 但到目前为止搜索 SO 问题只产生了一些问题 没有任何令人满意的答案 我想要删除的重复示例是这样的 其中用户创建页面和角色创建页面有相似之处 Request
  • 如何将自定义类型调用函数泛化为抽象类型?

    我有以下模拟设置 其中包含抽象类型 具体类型作为子类型和函数f它需要两个参数 第一个是Letter abstract type Letter end struct A lt Letter end struct B lt Letter end
  • 使用子记录数据更新父记录的字段(同一表)

    我有一张表 其中存在父 子关系 其中每个孩子的ExternalCategoryCode列数据需要连接到父级中ExternalCategoryCode 以下是一些已损坏的示例数据 其中父记录 Id 96 ExternalCategoryCod
  • 将completionSelector 和completionTarget 与UIImageWriteToSavedPhotosAlbum 结合使用

    我正在尝试找出一种方法让我的 iOS 应用程序将屏幕截图保存到相机胶卷 然后弹出警报告诉用户屏幕截图已成功保存 我能想到的唯一方法是使用某种形式的 if else 循环 正如您将在下面的伪代码注释中看到的那样 但我想不出任何语法来使用UII
  • Android 需要深厚的 Java 知识吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 以对数刻度间距绘制 x 轴,但不以指数形式标记它

    我想绘制两个值x 0 10 20 50 100 and y 1 2 3 10 100 使用pylab 我想将 x 轴的间距保持为对数形式 但我想在 x i e 的值 10 20 50 100 处勾选并打印它们 因为它不是 10e1 或 10
  • 我如何知道哪一行代码导致我的 iOS 应用程序在 Xcode 9 中崩溃

    I am building an app in Xcode 9 Swift 4 and it crashes before it even loads completely I get an error Thread 1 Signal SI
  • NUnit 测试项目无法加载 System.Windows.Forms 的程序集

    我有一个专门用于单元测试的 NUnit 测试项目 其目标框架为 Net Core 2 1 该测试项目引用了另外两个项目 其中一个是窗口窗体基于应用程序 另一个是类库基于数据库交互的应用程序 这两个项目的目标框架都是 Net Framewor
  • 获取包含的库的版本信息?

    我创建了 2 个项目 其中 1 个是 Lib 第 2 个是 Test 我从测试应用程序将上下文传递给 Lib 项目 由于我在 Lib 中有上下文 因此我在 Lib 中使用了以下代码 字符串版本 this mContext getPackag
  • 随机数生成器:它应该用作单例吗?

    我在几个地方使用随机数 并且通常在需要时构建一个随机数生成器 目前 我使用 Marsaglia Xorshift 算法将当前系统时间作为种子 现在我对这个策略有一些疑问 如果我使用多个生成器 生成器之间的数字的独立性 随机性 取决于种子 相
  • 如何使用 Google Translator Api 将转换后的英文文本设置到另一个文本框?

    我有两个文本框 一个用于英语 另一个用于印地语 当我在第一个框中输入英语时 文本应在第二个框中显示为印地语版本 在按键事件上 我已经提到了一个例子如何在您的网站中通过 Google API 将英语翻译成印地语 http arunsonare
  • 单选按钮检查事件处理

    在我的应用程序中 我需要一个单选组 每当选中单选按钮时 就会出现警报 以便我可以使用 jQuery 将其值发布到 ajax post 你能帮我看看我如何在 jQuery 中做到这一点吗 尝试这样的事情 function input type
  • 使用自签名证书是否可以防止中间人攻击?

    我不确定以前是否有人问过类似的问题 我找不到任何问题 但是是否可以保护客户端 服务器免受中间人攻击 我正在编写一个客户端应用程序来与服务器进行通信 通信将基于 SSLv3 我对服务器的自签名证书没问题 但担心其他人以相同的服务器名称生成相同
  • 推送到 git 时出现非快进错误

    我得到了一个non fast forward尝试推送到 WordPress git 存储库时出错 但像错误消息所说的那样拉动会给我一条消息 表明一切都是最新的 这是在拉取 合并和提交之后 这是我的日志 http pastebin com 6
  • linux任务集:多线程进程的线程是否始终在特定核心上运行?

    我使用任务集设置多线程进程在 Linux 主机上运行 如下所示 任务 c 1 2 myprocess 特定线程是否总是在特定 CPU 上运行 例如线程 1 总是在 c1 上运行 或者它会在不同时间在 c1 或 c2 上运行 不 过滤器应用于
  • VueJs 模板。如何加载外部模板

    我是 Vue js 的新手 我使用 AngularJS 一段时间了 在 Angular 中我们用来加载模板 例如 template sometemplate html controller someCtrl 我们如何在 Vue 中做这样的事