От автора: в этом посте вы познакомитесь с основными компонентами Vue.js для разработчиков, уже знакомых с jQuery. Давайте начнем.
Vue.js, фреймворк для создания веб-приложений, имеет систему реактивности, которая позволяет моделировать и управлять состоянием приложения таким образом, чтобы при изменении данных это отражалось в пользовательском интерфейсе, без необходимости запрашивать DOM. Эта система реактивности делает простым управление состоянием. С учетом всего, что происходит в последнее время с JS-фреймворков, вы, возможно, хотите начать использовать Vue js вместо jQuery. Возможно, вы просто постоянно видите статьи о Vue в своих любимых новостных рассылках, и вам интересно, как вы можете осуществить переход.
В этой статье я опишу некоторые фундаментальные компоненты Vue, которые вам необходимо знать, чтобы начать работать в качестве разработчика jQuery.
Добавление Vue.js в приложение
Первое, что вам нужно сделать, это добавить ссылку на Vue.js в проект. Есть разные способы сделать это, но я опишу использование ссылки на скрипт. Вы можете добавить следующий код на страницу для ссылки на библиотеку Vue:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
После добавления вам нужно инициализировать Vue. Создайте файл HTML со следующим содержимым:
<html> <head> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> </head> <body> <div id="app"> </div> <script> const app = new Vue({ el: '#app' }) </script> </body> </html>
Функция Vue получает объект параметров, который сообщает Vue, как настроить приложение после инициализации. Свойство el указывает элемент DOM, который Vue перехватывает и определяет, как свою территорию. Все, что находится внутри этого элемента, будет контролироваться Vue.
Отображение данных
В каждом приложении нам нужно отображать данные. В jQuery это делается путем вызова $(element).text(data) или $(element).html(data). При этом нам нужно знать, как идентифицировать элемент DOM. Во Vue это можно сделать с помощью текстовой интерполяции. Например, следующим образом:
<div id="app"> {{ message }}
</div>
<script> const app = new Vue({ el: '#app', data: { message: 'Hello jQuery friends' } })
</script>Здесь мы добавили новое свойство при инициализации Vue. Объект data добавляется к системе реактивности Vue, связывая данные и DOM. Как было сказано, система реактивности Vue является одной из его отличительных особенностей, и она делает управление состоянием простым и интуитивно понятным. С помощью этой системы реактивности, когда состояние изменяется, оно автоматически отражается на странице. Поэтому, если вы обновите значение message, оно автоматически отобразится на странице. Добавьте следующий код в свой скрипт:
setTimeout(() => (app.message = "Hello Vue devs"), 3000);
Иногда нам нужно отобразить список элементов, может быть, в table или ol. В jQuery для этого потребуется объединение строк текста, что может привести к ошибкам. Во Vue это намного проще, потому что данные и DOM связаны между собой. Приведенный ниже код показывает, как это делается во Vue для списка людей, отображаемых в элементе списка:
<ol>
<li v-for="person in people"> {{ person.name }} is {{ person.age}} yrs old.
</li>
</ol>const app = new Vue({ el: "#app", data: { people: [ { name: "Alice Wonderland", age: 25 }, { name: "Will Smith", age: 29 } ] }
});Атрибут v-for, которыйф мы использовали, является директивой Vue. У Vue есть много других директив, и все они начинаются с v-; эта применяет к DOM реактивное поведение Vue, изменяя его по мере изменения данных.
Обработка событий
Другим важным аспектом веб-приложений является обработка событий, когда пользователи взаимодействуют с вашим приложением. Директива v-on используется для подключения обработчиков событий в Vue. Ниже приведен пример кода, который прослушивает нажатие кнопки и отображает окно предупреждения:
<div id="app"> <button v-on:click="alert">Show Alert</button> </div>
const app = new Vue({ el: "#app", methods: { alert: function() { alert("Hello World"); } }
});v-on:click говорит Vue, что мы хотим прослушивать событие клика для этой кнопки, с alert в качестве обработчика событий. Функции, о которых должен знать Vue, содержатся в свойстве объекта параметров methods, передаваемого в функцию Vue при инициализации. Вы можете вызывать функцию с параметрами при ее подключении.
<div id="app"> <button v-on:click="alert('Justin')">Show Alert</button>
</div>const app = new Vue({ el: "#app", methods: { alert: function(msg) { alert(`Hello ${msg}`); } }
});
В директиве v-on есть сокращение — @. Так что, если вам нужно переписать фрагмент, который прикрепил обработчик события click к кнопке, тогда:
<button @click="alert('Justin')">Show Alert</button>Работа с формами
Формы — это способ получения информации от пользователей. Они могут содержать текстовое поле, чек-бокс и радио-кнопки. Vue предоставляет директиву v-model, которая создает двустороннюю привязку данных между состоянием приложения и элементами формы. Давайте рассмотрим пример:
<div id="app"> <form> Name: <input v-model="name" placeholder=""> <br /> <br /> Country: <select v-model="country"> <option disabled value="">Select country</option> <option>Nigeria</option> <option>Ghana</option> <option>Rwanda</option> </select> </form> <p>Name: {{ name }}</p> <p>Country: {{ country }}</p>
</div>const app = new Vue({ el: "#app", data: { name: "", country: "" }
});
С меньшим количеством кода и без прямых манипуляций с DOM вы можете увидеть вводимые пользователем данные, а также отобразить их в отдельном абзаце. Благодаря этому мы можем проще принимать данные и отправлять их на сервер для хранения. Давайте рассмотрим пример:
<form @submit.prevent="submitForm"> Name: <input v-model="name" placeholder=""> <br /> <br /> Country: <select v-model="country"> <option disabled value="">Select country</option> <option>Nigeria</option> <option>Ghana</option> <option>Rwanda</option> </select> </form>
const app = new Vue({ el: "#app", data: { name: "", country: "" }, method: { submitForm: function() { fetch("https://httpbin.org/post", { method: "POST", body: JSON.stringify({ name: this.name, country: this.country }) }); } }
});Чтобы собрать данные, мы прослушиваем событие отправки формы, используя @submit.prevent. .prevent является модификатором события, которое в данном случае является сокращением для вызова event.preventDefault() внутри функции обработчика событий. Затем для публикации данных вы можете использовать API Fetch или другую HTTP-библиотеку (например, axios) для публикации данных на сервере.
Скрытие и отображение вещей
Еще одна функция — возможность скрывать и отображать вещи, основываясь на значении логического состояния. Это может быть скрытие определенных частей страницы в зависимости от роли пользователя или переключение отображения раздела страницы одним нажатием кнопки. Во Vue вы можете делать это, используя директивы v-if и v-show . Давайте рассмотрим пример:
<div id="app"> <button @click="show = !show"> Toggle Panel </button> <p v-if="show">Please only call me when I'm needed!</p> </div>
const app = new Vue({ el: "#app", data: { show: true }
});
С помощью приведенного выше кода содержимое тега <p/> отображается, если состояние show истинно. Этого также можно достичь с помощью v-show, но между ними есть небольшая разница. С v-if этот элемент будет полностью размонтирован, а с v-show нет; вместо этого переключается значения свойства CSS display для этого элемента. С v-if также используются v-else и v-else-if, вы можете прочитать больше о них здесь.
Возможно, вы уже заметили, что с помощью Vue вы обновляете то, что видят ваши пользователи, не обращаясь к DOM. Все манипуляции с DOM обрабатываются Vue, вы пишете меньше кода, и ваше приложение также легче поддерживать. Конечно, во Vue гораздо больше всего, чем я рассказал — у него есть собственный CLI для быстрого создания новых проектов, маршрутизатор Vue для обработки маршрутизации в одностраничных приложениях и много других API.
Для получения дополнительной информации о Vue: Хотите узнать о создании отличных пользовательских интерфейсов с помощью Vue? Ознакомьтесь с Kendo UI for Vue, нашей библиотекой компонентов пользовательского интерфейса, которая позволяет быстро создавать высококачественные, быстро реагирующие приложения. Она включает в себя все компоненты, которые вам понадобятся, от таблиц и диаграмм до планировщиков и наборов.
Автор: Peter Mbanugo
Источник: https://www.telerik.com/
Редакция: Команда webformyself.