【问题标题】:Can I import x-template script into HTML file?我可以将 x-template 脚本导入 HTML 文件吗?
【发布时间】:2021-03-06 01:39:01
【问题描述】:

默认情况下,x-template(对于 Vue 组件)是这样的

<script type="text/x-template" id="checkbox-template">
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</script>

现在我想将一个外部 js 文件链接到它,比如

<script type="text/x-template" id="checkbox-template" src="target.js" />

有可能吗?如果是这样,target.js 的语法是什么?

【问题讨论】:

    标签: javascript html vue.js vue-component


    【解决方案1】:

    不,x-template 必须是本地的。根据MDN,当type 属性不是module 或JavaScript MIME 类型时,&lt;script&gt; 元素的src 属性将被忽略:

    嵌入的内容被视为不会被浏览器处理的数据块。开发人员必须使用不是 JavaScript MIME 类型的有效 MIME 类型来表示数据块。 src 属性将被忽略。

    一些框架通过其他方式(即templateUrl 等)支持外部模板,但 Vue 不支持。这是 Evan You(Vue 创建者)explanation 的原因:

    事实上,如果事情只是在同一个文件中,它会简单得多。两个文件之间来回跳转的上下文切换,实际上让开发体验变差了很多

    HTTP 请求的数量可能仍然是影响应用初始加载性能的最关键因素。现在假设您对应用程序中的每个组件都使用 templateURL - 浏览器需要执行数十个 HTTP 请求才能显示任何内容

    当然,您可以创建自己的加载器来 AJAX 内容,就像您手动加载任何外部文件一样,不管内容如何,​​作为字符串。或者您可以使用使用类似加载器的 Vue CLI。

    【讨论】:

    • 哦,谢谢?
    猜你喜欢
    • 2012-06-07
    • 2014-10-03
    • 1970-01-01
    • 2010-09-30
    • 1970-01-01
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    • 2020-12-05
    相关资源
    最近更新 更多