Начните с Vue.js

Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как получать пользовательский ввод от пользователей и создавать компоненты Vue.js.

Директива v-on

Директива v-on позволяет нам обрабатывать события, запускаемые из различных источников, включая взаимодействие с пользователем.

Мы можем использовать его для обработки пользовательских кликов следующим образом. Сначала в index.html пишем:

Затем в src/index.js мы пишем:

Затем, когда мы нажмем кнопку, мы увидим Clicked вместо Hello.

В приведенном выше коде мы добавляем кнопку и элемент p. Элемент p имеет переменную message, которая берет данные из значения data.message из index.js и интерполирует их в наш HTML.

К нашей кнопке добавлена ​​директива v-on:click. Когда мы нажимаем кнопку, вызывается метод onClick из свойства methods в index.js.

Затем this.message устанавливается в 'Clicked', что является новым значением message. data.message имеет значение по умолчанию для message в index.html, а this.message имеет текущее значение для message.

Все манипуляции с DOM выполнялись Vue. Для этого нам не пришлось писать код.

Директива v-модели

Директива v-model позволяет нам получать входные данные и автоматически использовать их в других местах. Он используется для привязки входных данных между экземпляром Vue и нашим HTML.

Например, в index.html можно записать следующее:

Затем в index.js мы пишем:

Затем мы должны увидеть, что поле input имеет предварительно заполненное значение Hello. Кроме того, у нас есть слово Hello, интерполированное как содержимое нашего элемента p. Затем, когда мы что-то вводим, содержимое тега p автоматически обновляется до введенного нами значения.

Это магия директивы v-model, которая принимает наше входное значение, устанавливает его на this.message, а затем отображает message в элементе шаблона в теге p, чтобы оно интерполировалось в тег p.

Составление частей с компонентами

Чтобы создавать более сложные приложения, мы можем вложить компонент в другой компонент. Это позволяет нам повторно использовать компоненты в разных местах.

Мы можем определить новый компонент с помощью метода Vue.component. Он принимает строку для имени компонента в качестве первого аргумента и объект, который принимает свойства template и props в качестве второго аргумента.

Например, мы можем создать компонент следующим образом.

В index.js мы добавляем:

В приведенном выше коде есть свойство props, которое мы можем использовать для доступа к любому объекту, переданному из другого компонента. template имеет шаблон для рендеринга.

persons содержит данные, которые мы хотим отобразить.

Затем в index.html мы добавляем:

В HTML-файле есть v-for для циклического перебора persons записей, которые есть в data.persons.

У нас также есть v-bind:person, чтобы передать наш person объект из v-for в наш person-name компонент. Вот почему у нас было props: [“person”] в:

Vue.component("person-name", {
  props: ["person"],
  template: "<li>{{ person.name }}</li>"
});

Как только person будет передан компоненту person-name, мы сможем получить доступ к его свойству name в шаблоне.

Тогда получаем:

Mary
Jane
Joe

Отображается на экране нашего браузера.

Связь с пользовательскими элементами

Компоненты Vue.js похожи на пользовательские элементы, но не то же самое. Компоненты Vue.js слабо основаны на настраиваемых элементах, таких как слоты и атрибут is.

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

Компоненты Vue.js могут быть встроены в настраиваемые элементы и регистрироваться в реестре настраиваемых элементов.

Заключение

Мы можем обрабатывать события с помощью директивы v-on. Например, v-on:click позволяет нам обрабатывать ситуации, когда пользователи нажимают что-либо, устанавливая в качестве значения наш собственный метод обработчика событий.

v-model позволяет нам принимать вводимые пользователем данные и использовать значение в других местах.

Мы можем создавать новые компоненты и вкладывать их в шаблон, чтобы мы могли повторно использовать их в других местах. Для этого мы можем вызвать метод Vue.component.