javascript - 使用模板通过 Vue 清晰地分离 View 和代码

Question

我希望这对某些人来说是个小问题，我只是缺少一小段神奇的代码:我正在从 knockout.js 迁移至 vue.js我想知道是否有一种简单的方法可以在 vue.js 中以相同的方式使用模板如 knockout.js .以下代码片段使用 knockout.js并按预期工作:

function viewmodel() {
    this.person = ko.observable(new person());
}
function person() {
    this.first = ko.observable('hello');
    this.last = ko.observable('world');
}
ko.applyBindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/html" id="person-template">
    <p data-bind="text: first"/>
    <p data-bind="text: last"/>
</script>
<div>
    <div data-bind="template: { name: 'person-template', data: person }"/>
</div>

但是，我不知道如何在 vue.js 中实现同样的目标。 .我知道 vue.js 中的组件等等，但我想保持结构不变，而不是将更多特定于 View 的代码放入我的 JavaScript 文件中。 (我已经对 el: '#app' 不满意了，但这是我目前最不关心的)当然这段代码不起作用:

var app = new Vue({
    el: '#app',
    data: {
        person: {
            first: 'hello',
            last: 'world'
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>

<script type="text/x-template" id="person-template">
    <p v-text="first"/>
    <p v-text="last"/>
</script>
<div id="app">
    <div><!-- how? is this even possible? --></div>
</div>

有没有办法只通过更改代码的 HTML 部分来实现此功能？ 最好只更改 <div> -元素。

Answer 1

因此，这不完全是 仅 更改模板，但这里可以使用一个附加属性。在 Vue 中指定模板。

var app = new Vue({
    el: '#app',
    template: "#person-template",
    data: {
        person: {
            first: 'hello',
            last: 'world'
        }
    }
});

我还稍微修改了您的模板，因为任何 Vue 或组件的模板都需要一个根元素。我建议您不要在 Vue 中使用自闭合标签，因为我已经看到这会导致问题。 Vue 需要有效的 HTML5 和 self closing tags are not valid HTML5 .

<script type="text/x-template" id="person-template">
  <div>
    <p v-text="person.first"></p>
    <p v-text="person.last"></p>
  </div>
</script>

工作 example .

此外，以这种方式指定模板的一种非常常见的方法是使用 HTML5 template element，而不使用那种骇人听闻的脚本标签。 .

<template id="person-template">
  <div>
    <p v-text="person.first"></p>
    <p v-text="person.last"></p>
  </div>
</template>

最后，知道您对 el:"#app" 有点不满意，您可以将 el 属性排除在 Vue 定义之外并使用 $mount 将 Vue 安装在您选择的元素上方法。因此，如果您想在关注点分离方面完全疯狂，您可以这样做。

const renderer = Vue.compile(document.querySelector("#person-template").innerHTML)
const example = {
    data: {
        person: {
            first: 'hello',
            last: 'world'
        }
    }
}
const app = new Vue(Object.assign({}, example, renderer))
app.$mount("#app")

Example .

我应该提一下，据我所知，没有人真的这样做(手动编译他们的模板，使用 $mount 很常见)。它还取决于使用包含编译器的 Vue 版本(例如，如果您使用的是 webpack 或其他构建工具，则可能没有)。你也可以这样做:

const app = new Vue(Object.assign({}, example, {template: "#person-template"}))
app.$mount("#app")

这基本上允许您指定模板、组件和安装它的位置 all separately .