Чистое разделение вида и кода с помощью Vue с использованием шаблонов

Таким образом, это не совсем изменение шаблона, но здесь может работать одно дополнительное свойство. Укажите шаблон в Vue.

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

Я также немного изменил ваш шаблон, потому что для шаблона для любого Vue или компонента требуется один корневой элемент. Я рекомендую вам не использовать самозакрывающиеся теги в Vue, поскольку я видел эту проблему. Vue требует действительных HTML5, а самозакрывающиеся теги недействительны HTML5.

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

Рабочий пример.

Кроме того, очень распространенный способ указания шаблонов таким образом, без использования трюка хакерского скрипта, заключается в использовании элемента шаблона HTML5.

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

Наконец, зная, что вы немного недовольны el:"#app" Вы можете оставить свойство el вне определения Vue и установить Vue на элемент по вашему выбору с помощью метода $ mount. Поэтому, если вы хотите полностью разогнаться, вы можете сделать что-то подобное.

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

Пример.

Я должен упомянуть, что никто этого не делает (компиляция их шаблонов вручную, как правило, используется $ mount), о котором я знаю. Это также зависит от использования версии Vue, которая включает компилятор (который у вас может не возникнуть, если вы используете webpack или какой-либо другой инструмент сборки, например). Вы также можете сделать что-то вроде этого:

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

который в основном позволит вам указать шаблон, компонент и место для его монтирования отдельно.