H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】VueJS的X-Templates可以将模板独立到单个文件吗?

各位好,我在学习Vue组件的时候遇到一些问题。
我想将组件做成公共组件,然后通过引用js的方式来进行模板注册。

<div id="watch-example">
        <hello-world></hello-world>
    </div>
    <script type="text/x-template" id="hello-world-template">
        <p>Hello World</p>
    </script>
    <script type="text/javascript">
        Vue.component("hello-world", {
            template: "#hello-world-template"
        });
        var vm = new Vue({
            el: "#watch-example"
        })
    </script>

示例代码如上,我想将Vue.component,单独提取到一个js文件中。
但是他引用的 text/x-template,在js文件中是无法编译的。
请问我通过什么办法,才能把公共组件提取出来呢?

回答:

方法一: .vue单文件组件,这是比较后面的知识,所以前期不用担心模板怎么去独立到一个文件。单文件组件
方法二: 是针对你这种只需要将模板放到一个独立的文件。参考 异步组件

把模板放到一个HTML文件里,这个就比较灵活,放txt文件里也行。

#com.html
<p>Hello World</p>

主文件里通过异步的方式注册组件,我用的是jq的数据请求,做个例子。其实可以用vue-resource,随意。

#main.js
Vue.component('hello-world', function (resolve, reject) {
    // 可以请求一个html文件,既然存放模板还是html文件存放比较好
    $.get("./com.html").then(function (res) {
        resolve({
            template: res
        })
    });
});


回答:

建议学习了解一下 Vue 的单文件组件以及 webpack

回答:

不可以。因为你在html里可以声明type=”text/x-template”, 这样的好处是html不会渲染里面的内容,也就是里面的html不会展示出来。如果封装到js的单独文件,要用字符串模板。其实即使是单文件 .vue最后也是要解析成浏览器识别的js

回答:

需要吧 x-template 内的内容放到你组件的 template 属性中。
例如你问题中的例子,就需要。

 Vue.component("hello-world", {
     template: "<p>Hello World</p>"
 });

回答:

你的需求可以在学习完webpack之后自己写一个webpack的loader来实现这个转换过程。目前好像确实没有现成的解决方案可以完成你的需求。

本文地址:H5W3 » 【Web前端问题】VueJS的X-Templates可以将模板独立到单个文件吗?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址