使用原始 html 创建 vue 组件

Question

我知道如何用简单的html创建一个vue组件构造函数：

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 组件 clean（DOM 保存在单独的文件中） 和 simple（不使用捆绑工具）？

Answer 1

最后，我似乎别无选择，只能坚持使用 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。有关更多详细信息，请查看： webpack.github.io/docs/list-of-loaders.html#styling

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

然后把你的js文件改成：

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

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

Answer 2

要构造模板字符串，您可以使用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