Подскажите пожалуйста, как с помощью интерполяции можно связать html разметку и вставить туда значения определенных переменных объявленных в vue?
Очень просто, этот способ так же называется Mustache синтаксис, называется так из за использования двойных скобок, это один из самый распостранненых способов связывания данных в Vue.js, вот пример:
<div id="application">
User 1: {{ message }}
<span v-once>User 2: {{ message }}
<span v-once>User 3: {{ answer }}
В этом примере мы создаем блок с id application, затем внутри него три span в которые будут выводится разные сообщения, первый блок span обычный, и содержимое этого блока при желании можно поменять через консоль, через объект data поменяв значение свойства, а те теги span где указано v-once создаются только раз, и не изменяется, то есть если изменить значение переменной message прописав в консоли панели разработчика data.message =”Hello Hello”, значение изменится только в первом блоке, второй блок не изменится.
var data = {
message:"Hello.",
answer:"Hi!"
}
var vm = new Vue({
el:'#application',
data: data
})
В js коде просто в объекте Vue связываем его с определенным блоком на странице с помощью id, и передаем в data заранее созданный объект со своими свойствами которые далее мы выводим на экран как раз с помощью интерполяции.