Базовый синтаксис Vue3

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

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

Однофайловые компоненты Vue

Однофайловый компонент Vue (SFC) — это файловый формат фреймворка Vue.js, который позволяет разработчикам размещать код HTML, JavaScript и CSS в одном файле, обычно с.vueв качестве расширения файла.

Однофайловый компонент — это переиспользуемая форма организации кода, которая инкапсулирует HTML, CSS и JavaScript, относящиеся к одному компоненту, в файле, используя.vueв качестве суффикса файла.

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

1. Создание экземпляра Vue

Создание экземпляра Vue — это первый шаг к началу использования Vue.js. Обычно вы создаёте экземпляр Vue в HTML-файле и монтируете его к DOM-элементу.

Пример

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Попробуйте »

Описание раздела HTML:

<div id="hello-vue" class="demo">:

  • Это<div>элемент, у которого idhello-vueи классdemo。
  • В приложении Vue этот<div>будет управляться экземпляром Vue, и его содержимое будет обновляться при изменении данных.

{{ message }}:

  • Это синтаксис шаблонов Vue.js, используемый для привязкиmessageданных к странице.
  • Когда данные в экземпляре Vuemessageизменяются, содержимое на странице обновится соответствующим образом.

Описание раздела JavaScript:

Определение экземпляра Vue:

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
  • HelloVueAppпредставляет собой обычный объект JavaScript, содержащий опции компонента Vue.
  • data()метод возвращает объект, содержащийmessageсвойство, и начальное значение этого свойства —'Hello Vue!!'。

Создайте и смонтируйте приложение Vue:

  • Vue.createApp()метод используется для создания экземпляра приложения Vue, а параметр — это объект, содержащий опции компонента (здесь этоHelloVueApp）。
  • .mount('#hello-vue')метод монтирует экземпляр приложения Vue к элементу страницы сid="hello-vue"DOM-элементом.

Процесс выполнения

  • Когда страница загружается, браузер анализирует HTML и JavaScript.
  • Когда выполняется скрипт Vue.js, он создаёт экземпляр приложения Vue и привязывает его к<div id="hello-vue">элементу.
  • Экземпляр приложения Vue, в соответствии сdata()начальными данными в, будетmessageотображать значение ... на странице{{ message }}позицию.
  • КогдаmessageКогда данные изменяются (например, в результате взаимодействия с пользователем или асинхронных операций), страница будет автоматически обновляться, отражая эти изменения.

2. Синтаксис шаблонов

Интерполяция

Vue.js использует двойные фигурные скобки{{ }}для представления текстовой интерполяции:

Пример

<div>{{ message }}</div>

Директивы

Директивы — это специальные атрибуты с префиксомv-, используемые для выражения логики в шаблонах.

v-bind: динамически привязывает один или несколько атрибутов или свойство компонента.

<a v-bind:href="url.html">Link</a>

Сокращённая запись:

<a :href="url.html">Link</a>

v-if / v-else-if / v-else: условный рендеринг.

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for: рендеринг списка.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: двусторонняя привязка данных.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: обработчик событий.

<button v-on:click="doSomething">Click me</button>

Сокращённая запись:

<button @click="doSomething">Click me</button>

3. Обработка событий

В Vue.js можно использовать директиву v-on, чтобы прослушивать события DOM и выполнять некоторый код JavaScript, когда они запускаются.

Пример

<div id="app">
  <button @click="greet">Поприветствовать</button>
</div>

<script>
  createApp({
    methods: {
      greet() {
        alert('Hello!');
      }
    }
  }).mount('#app');
</script>

4. Вычисляемые свойства

Вычисляемые свойства — это свойства, кэшируемые на основе их зависимостей. Вычисляемое свойство пересчитывается только при изменении связанных с ним зависимостей.

Пример

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

5. Компоненты

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

Пример

const app = createApp({});

app.component('my-component', {
  template: '<div>Пользовательский компонент!</div>'
});

Использование компонентов

Пример

<div id="app">
  <my-component></my-component>
</div>

<script>
  const app = createApp({});

  app.component('my-component', {
    template: '<div>Пользовательский компонент!</div>'
  });

  app.mount('#app');
</script>

6. Пропсы и события

Пропсы

Пропсы используются для передачи данных между компонентами.

Пример

<div id="app">
  <blog-post title="Моё путешествие с Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

Events

Дочерние компоненты используют$emitдля генерации событий, а родительские компоненты могут прослушивать эти события.

Пример

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Всего кликов: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">Вы нажали на меня {{ count }} раз.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
Другие расширения