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

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

使用原始html创建vue组件

2 个答案: