Использование Vue на существующем сайте

Зачем

Допустим, у вас есть сайт: интернет-магазин, блог, корпоративный сайт или что-то ещё. И вдруг на этом сайте понадобился новый функционал.

Естественно, следует сделать это с помощью современных инструментов, а не jQuery 2010 года выпуска, так как ванильный JS и CSS позволяют добиться большего с той же лаконичностью, которую когда-то давно давал jQuery.

Если нужна интерактивность, будь то калькулятор расчёта стоимости, форма обратной связи или корзина в интернет-магазине, то для этого отлично подходит Vue.js. Vue добавит упорядоченности коду (декларативность, отделение логики от представления и пр.).

Как встроить Vue

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

Подключение библиотеки

<sсript src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></sсript>

Написание кода приложения

new Vue({
	el: '#calc',
	data() {
		return {
			a: new Date().getMilliseconds(),
		};
	},
	computed: {
		price: function() {
			return this.a * Math.random().toFixed(2);
		},
	},
	created: function() {
		console.log('Created');
	},
	updated: function() {
		console.log('Updated');
	},
	methods: {
		refresh: function() {
  			this.a = new Date().getMilliseconds();
		},
	},
});

Небольшое изменение существующей вёрстки

Можно использовать уже существующую вёрстку, но следует добавить различные синтаксические конструкции для Vue.

<div id="calc">
  <div>Цена: {{ price }}</div>
  <button @click="refresh">Получить другое число</button>
</div>

Пример можно посмотреть здесь

Вывод

Возможностью так элегантно использовать существующую вёрстку может похвастаться не каждая реактивная библиотека, это мне нравится во Vue.