Для работы с веб-страницей vue.js использует шаблоны. Шаблоны в Vue.js представляют валидную разметку с кодом html, которая компилируется в функции рендеринга виртуального DOM. Внутри шаблона может использоваться состояние приложения, то есть свойства объекта Vue, определенные через параметр data.
Возьмем следующую страницу:
<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<p>Имя: {{name}} Возраст {{age}}</p>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {name:'Tom', age:25}
});
</script>
</body>
</html>
Здесь все, что внутри элемента <div id="app">, представляет шаблон Vue. То есть в данном случае шаблоном является код:
<p>Имя: {{name}} Возраст {{age}}</p>
Vue.js управляет именно этой частью веб-страницы. Вне шаблона Vue не работает.
Также шаблон можно задать через параметр template в объекте Vue:
<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {name:'Tom', age:25},
template: '<p>Имя: {{name}} Возраст {{age}}</p>'
});
</script>
</body>
</html>
В данном случае результат будет тот же самый.