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中的组件以及所有这些组件，但我希望保持结构不变，而不是将更多特定于视图的代码放入我的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中指定模板。

Client:
 Version:      17.05.0-ce
 API version:  1.29
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:10:54 2017
 OS/Arch:      linux/amd64

Server:
 Version:      17.05.0-ce
 API version:  1.29 (minimum version 1.12)
 Go version:   go1.7.5
 Git commit:   89658be
 Built:        Thu May  4 22:10:54 2017
 OS/Arch:      linux/amd64
 Experimental: false

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

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

工作example。

此外，以这种方式指定模板的一种非常常见的方法是使用HTML5 template element而不使用hacky脚本标记。

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

最后，知道您对<template id="person-template"> <div> <p v-text="person.first"></p> <p v-text="person.last"></p> </div> </template>您可以稍微不满意将el:"#app"属性保留在Vue定义之外，并使用您选择的元素安装Vue $mount方法。因此，如果你想彻底解决问题，可以做类似的事情。

el

Example

我应该提到没有人真正这样做（手动编译他们的模板，使用$ mount很常见），我很清楚。它还取决于使用包含编译器的Vue版本（例如，如果您使用webpack或其他一些构建工具，则可能没有）。你也可以这样做：

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")

基本上允许您指定模板，组件以及安装它的位置all separately。

使用模板

1 个答案: