Welcome to Vue.js.
Vue.js в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами.
Виртуальный DOM — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM.
<template><div id="app">{{ message }}</div></template>
var app = new Vue({el: '#app',data: {message: 'Привет, Vue!'}})
<template><div id="app">...</div></template><script src="./my-component.js"></script>><style src="./my-component.css"><style>
При усложнение логики в шаблонах или при его повторном переиспользовании имеет смысл вынести эту логику в JS. Для этого используют вычисляемые свойства.
Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind: необходимо лишь вычислить итоговую строку при помощи выражения.
Vue оборачивает у наблюдаемого массива методы внесения изменений, чтобы они вызывали обновления представления. Оборачиваются следующие методы:
Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента.
Таблица с возможностью добавления, обновления и удаления элементов (простой CRUD)
Для распространённых задач форматирования текста во Vue используются фильтры. Они находят своё применение в двух местах: в mustache-интерполяциях и в выражениях v-bind.