Vue.js с нуля: переменные, обработка и app.vue

Структура файла app.vue

Файл app.vue содержит три основные секции:

<script>: Здесь записывается JavaScript код, включая логику приложения.
<template>: Здесь находится HTML разметка, отображаемая на странице.
<style>: Здесь записываются стили CSS для компонента.

Порядок секций можно менять; это не влияет на работоспособность кода.

HTML-разметка, стили и переменные

Создадим базовую HTML-разметку в секции <template>:

<h3 id="title"></h3>
<p></p>

Добавим минимальные стили в секции <style>:

h3 {
  font-weight: lighter;
}

p {
  color: #c00; /* менее яркий красный */
}

Для работы с переменными используется функция data(), возвращающая объект со свойствами-переменными:

export default {
  data() {
    return {
      title: 'Заголовок',
      info: 'Текст сообщения'
    };
  }
};

Переменные title и info выводятся в HTML-шаблоне с помощью фигурных скобок: {{ title }} и {{ info }}.

<h3>{{ title }}</h3>
<p>{{ info }}</p>

Изменение значения переменной в data() автоматически обновляет отображение в HTML. В data() можно хранить различные типы данных.

Обработка событий и методы

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

<button type="button" @click="changeInfo">Отправить</button>

Функция changeInfo меняет значение переменной info:

export default {
  // ... data() ...
  methods: {
    changeInfo() {
      this.info = 'Новый текст';
    }
  }
};

Другие события, например, mouseenter, обрабатываются аналогично: @mouseenter="changeTitle". Для организации кода рекомендуется выносить обработку событий в методы, объявленные в свойстве methods. Например:

export default {
  // ... data() ...
  methods: {
    updateData(newInfo = 'New Text') {
      this.info = newInfo;
      this.title = newInfo;
    }
  }
};

<button type="button" @click="updateData('Измененный текст')">Изменить</button>

Метод updateData принимает параметр newInfo со значением по умолчанию New Text.

В этом уроке мы изучили создание и использование переменных в Vue.js, а также обработку пользовательских действий. Vue.js обеспечивает автоматическое обновление HTML при изменении переменных, упрощая разработку интерактивных интерфейсов. Использование методов для обработки событий улучшает структуру и читаемость кода.