Привет .
Я Михаил, fullstack-разработчик, занимаюсь интернет-проектами: от сайтов до систем автоматизации.
Отправить мне сообщение

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

Зачем

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

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

Если хочется добавить какой-то интерактивности на сайт, будь то калькулятор расчёта стоимости или корзина в интернет-магазине, то для этого отлично подходит Vue.js. Эта библиотека, конечно, никоим образом не замена jQuery, так как назначение у них разное, и их можно использовать вместе. Но зачем снова брать jQuery, если, во-первых, jQuery уже можно заменить стандартными возможностями JavaScript-движка браузера, а, во-вторых, 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.