使用原始 html 创建 vue 组件

Question

我知道如何使用简单的方法创建 vue 组件构造函数 html:

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

但是如何用一块 DOM 来创建它：

<div id="phone-list">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                Search: <input v-model="query">
                Sort by:
                <select v-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="age">Newest</option>
                </select>
            </div>
            <div class="col-md-10">
                <p>There is {{p.length}} phones total.</p>
                <ul class="phones">
                    <li v-for="phone in p.data | filterBy query | orderBy orderProp " class="thumbnail">

                        <a :href="'#/phones/' + phone.id" class="thumb"><img :src="phone.imageUrl"></a>
                        <a :href="'#/phones/' + phone.id">{{phone.name}}</a>
                        <p>{{phone.snippet}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

我是否应该在 JS 文件中将 DOM 字符串与 JS 代码混合？我觉得这样做很恶心。

此外，我进行了一些搜索，一种解决方案可能如下所示：

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

但是，此解决方案需要我坚持使用一些捆绑工具，例如 webpack 或 browserify。

有没有办法创建 vue 组件干净（DOM 保存在单独的文件中） 和 简单（不使用捆绑工具）?

Answer 1

要构建模板字符串，您可以使用 grave accent（也称为 back-tick）(`) 将字符串括起来，而不是使用单引号或双引号。

var Foo = Vue.extend({
  template: `<div id="phone-list">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-2">
            Search: <input v-model="query">
            Sort by:
            <select v-model="orderProp">
              <option value="name">Alphabetical</option>
              <option value="age">Newest</option>
            </select>
          </div>
          <div class="col-md-10">
            <p>There is {{p.length}} phones total.</p>
            <ul class="phones">
              <li v-for="phone in p.data | filterBy query | orderBy orderProp " class="thumbnail">

                <a :href="'#/phones/' + phone.id" class="thumb"><img :src="phone.imageUrl"></a>
                <a :href="'#/phones/' + phone.id">{{phone.name}}</a>
                <p>{{phone.snippet}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>`
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

Answer 2

最后，看来只能坚持使用webpack。

这里，跟着这篇文章，您将获得关于webpack的基本知识，包括定义和安装以及配置和使用。Diving into Webpack

安装 webpack 后，您可能想要 webpack 您的 js 文件，如下所示：

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

但是，您最终可能会在 CLI 中遇到如下错误：

<div class="main"> Unexpected Token
...
...

别担心，这是因为 webpack 需要不同的加载器来处理不同类型的文件，例如html、css , less.For 更多详细信息，请查看： webpack.github.io/docs/list-of-loaders.html#造型

所以，安装 html-loader 来处理 html 个文件。

然后把你的js文件改成：

Vue.extend({
    template: require('html!./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

和 webpack 它在您的 CLI 中，现在一切都应该按预期工作了！

使用原始 html 创建 vue 组件

Create vue components with raw html

components

web-component

vue.js