javascript - VueJS的X-Templates可以将模板独立到单个文件吗？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - VueJS的X-Templates可以将模板独立到单个文件吗？

PHP中文网 2017-04-11 12:22:19

[JavaScript讨论组]

477

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

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

PHP中文网

认证0级讲师

全部回复(5)

大家讲道理2017-04-11 12:24:19 5楼

方法一： .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
        })
    });
});

赞 +0

添加回复

迷茫2017-04-11 12:24:19 4楼

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

赞 +0

添加回复

ringa_lee2017-04-11 12:24:19 3楼

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

赞 +0

添加回复

阿神2017-04-11 12:24:19 2楼

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

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

赞 +0

添加回复

PHP中文网2017-04-11 12:24:19 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>