Vue.js. Создаем динамический интерфейс

Цель публикации — разобраться, какова структура компонентов Vue. js, что такое реактивные свойства и как они работают.

Компоненты — это фрагменты кода, представляющие собой независимые модули, которые могут быть повторно использованы в различных частях приложения.

Компоненты являются важной частью разработки пользовательского интерфейса. Они позволяют разработчикам создавать приложения эффективнее, уменьшая время и затраты на разработку за счет переиспользования кода, что уменьшает время на написание, отладку и выявление ошибок.

Компоненты могут быть созданы для любых элементов интерфейса, таких как кнопки, поля ввода, меню и т. д. Каждый компонент может содержать свои собственные CSS-стили, JavaScript и HTML-разметку. Это позволяет разработчикам легко настраивать и изменять каждый компонент в соответствии с требованиями проекта.

Структурно компоненты состоят из трех блоков: template, script и style.

<template> <p>Привет, {{name}}</p> </template> <script> export default { name: ‘NewComponent’, data() {return {name: «Vue»}}, }; </script> <style> p{color: #fff} </style>

Основываясь на описанной структуре, для примера создам компонент, который приветствует пользователя по имени, в том числе позволяет нажатием кнопки поприветствовать Vue в ответ. Но прежде отмечу, что одним из плюсов Vue. js является возможность при разработке отталкиваться как от шаблона приложения, так и от работы с данными. А поскольку в моем примере шаблон носит условный характер, буду следовать второму пути.

Для начала приведу код компонента полностью, затем рассмотрю детально.

Component.vue <template> <div> <p>Привет, {{ customName }}!</p> <button v-on:click="answer()">Приветствую</button> </div> </template> <script> export default { props: ["customName"], data() { return { defaultName: "пользователь", } }, created () { if (!this.customName) { return this.customName = this.defaultName } }, methods: { answer() { this.customName = "Vue" } }, }; </script> <style> div{ background-color: #0000001f; } p{ color: #fff; } </style>

Создание компонента начинается с определения входных свойств, которые должны быть переданы извне. В моем случае – это имя пользователя customName, которое ожидается в качестве значения в атрибуте props. Также в качестве внутренней переменной объявляю и устанавливаю значение по умолчанию defaultName, на случай, если никаких свойств в props передано не будет.

props: ["customName"], data() { return { defaultName: "пользователь", } },

Исходя из этого, мне следует определить, было ли фактически передано значение customName и, если нет – подменить ожидаемое дефолтным. Это возможно сделать с помощью специального метода created(), который автоматически вызывается после создания экземпляра компонента. Created относится к одному из хуков жизненного цикла компонентов, о которых подробнее можно узнать в официальной документации (https://vuejs. org/guide/essentials/lifecycle. html).

created () { if (!this.customName) { return this.customName = this.defaultName } },

Также я хочу, чтобы мой компонент при нажатии на кнопку, выводил ответное приветствие ко Vue, для чего напишу соответствующий метод answer():

methods: { answer() { this.customName = "Vue" } },

Наконец, остается лишь указать где в шаблоне полученные данные будут отображаться и как вызываться функция. Соответствующую разметку прописываю в блоке template:

<template> <div> <p>Привет, {{ customName }}!</p> <button v-on:click="answer()">Приветствую</button> </div> </template>

Как говорил ранее, главная особенность компонентов – это их переиспользуемость. Это означает, что я могу импортировать полученный компонент в родительский и вызывать его многократно. Привожу ниже код родительского компонента Parent. vue:

Parent.vue <template> <div> <my-component /> <my-component customName="Sergey"/> <my-component v-bind:customName="newName" /> </div> </template> <script> import Component from "./Component.vue"; export default { components: { my-component: Component, }, data() { return { newName: "Vasya" } }, } </script>

Здесь вызывается три экземпляра дочернего компонента Component. vue, причем каждый экземпляр является самостоятельным и не зависит от других. Это, в свою очередь, позволяет вызывать их с собственными атрибутами. Например, первый вызывается без передачи атрибутов, что должно привести к замене имени пользователя дефолтным значением. Во второй экземпляр я передаю строку с именем пользователя, а в третий – переменную newName с заранее заданным значением. Таким образом, на странице отобразятся все три экземпляра с разным приветствием, а при нажатии на каждую из кнопок произойдет независимый от остальных ответ.

Если компоненты помогают упорядочить блоки интерфейсов, то их динамичность целиком зависит от реактивных свойств.

Реактивность в Vue. js — это механизм, который автоматически обновляет представление компонентов при изменении данных, от которых они зависят. Реактивные свойства реализованы с помощью автоматического метода Vue. observable() . При вызове в него передается объект, который нужно сделать реактивным. В результате получается новый объект, который содержит все свойства и методы оригинального объекта, но с возможностью отслеживания изменений. Когда свойство реактивного объекта изменяется, Vue. js автоматически обновляет все зависимые свойства, в том числе обновляет пользовательский интерфейс.

Для работы с реактивными свойствами Vue. js предоставляет ряд атрибутов, методов и директив, такие как watch, computed, v-model и другие. Метод watch, например, позволяет отслеживать изменения конкретного свойства данных и выполнять определенные действия при их изменении. Computed свойства позволяют вычислять значения на основе данных и обновляться только при изменении зависимых свойств. Директива v-model позволяет связать данные с элементом формы, таким как input, select или textarea. При изменении значения элемента, данные автоматически обновляются, а при изменении данных — обновляется значение элемента формы.

Ниже приведен пример использования директивы v-model, которая связывает новый элемент input, в написанном ранее компоненте, с переменной enteredName. В результате, при вводе имени в поле input автоматически последует изменение приветствия, что является наглядным примером реактивности Vue. js.

Component.vue <template> <div> <label>Имя пользователя:</label> <input v-model="enteredName"> <p>Привет, <span v-if="enteredName">{{ enteredName }}</span> <span v-else>{{ customName }}</span>! </p> <button v-on:click="answer()">Поприветствовать</button> </div> </template> <script> export default { props: ["customName"], data() { return { defaultName: "пользователь", enteredName: "", } }, created () { if (!this.customName) { return this.customName = this.defaultName } }, methods: { answer() { this.enteredName = "" this.customName = "Vue" } }, }; </script>

Подводя итог отмечу, что благодаря своей реактивности и компонентной структуре Vue. js предоставляет практически безграничные возможности создания интерактивных интерфейсов, тем самым помогая решать самый широкий спектр корпоративных задач с помощью легких адаптируемых веб-приложений. Грамотное использование компонентов помогает существенно сократить время разработки, а также упростить дальнейшее сопровождение кода. Тогда как реактивные свойства обеспечивают динамику и отзывчивость, что, в конечном итоге, создает удобство и позитивный опыт использования приложения для конечных пользователей.