Учебник VuePress

# Компонент в markdown

Компонент (с англ. "составная часть") - это визуальный интерактивный элемент, размещаемый на странице.

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

Любые файлы *.vue, найденные в docs.vuepress/components/, автоматически регистрируются как глобальные асинхронные компоненты. Например:

.
└─ .vuepress
   └─ components
      ├─ try
      |  └─ new-component.vue
      ├─ final
      |  └─ custom-component.vue
      ├─ button-counter.vue
      └─ OtherComponent.vue
1
2
3
4
5
6
7
8
9

Внутри любого файла Markdown документа вы можете напрямую использовать компоненты (имена выводятся из имен файлов):

# Post of components

This is another component from folders

<try-new-component />
<final-custom-component />

This is another components

<button-counter />
<OtherComponent />
1
2
3
4
5
6
7
8
9
10
11

ВАЖНО

Убедитесь, что имя пользовательского компонента содержит дефис или находится в СamelCase. В противном случае он будет рассматриваться как встроенный элемент и обернут внутри тега <p>, что приведет к несоответствию, поскольку <p> не позволяет размещать элементы блока внутри него.

# Основа компонента

Компонент - это файл с названием состоящим из двух слов соединенных через дефис (желательно, чтобы имя файла отражало его содержание) и файл должен иметь расширение .vue, например: custom-component.vue

Основное содержание компонента разбито на три блока:

<!-- Content Visualization -->
<template>
   <div>
   </div>
</template>

<!-- program code -->
<script>
export default {
}
</script>

<!-- component styling -->
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • блок <template> отвечает за визуализацию выводимого контента,
  • блок <script> отвечает за выполнение програмного кода написанного на языке JavaScript,
  • блок <style> задает стиль компонента, при указании параметра scoped - стили будут применяться только к данному компоненту не влияя на стили других компонентов.

Если блок пусто его можно вообще не размечать, не прописывая соответствующие тэги.

# Пример компонента

Простой пример динамического компонента button-counter.vue:

<template>
  <div class="number-modifier">
    <button @click="increment()">+</button>
    Кол-во кликов - <strong> {{value}} </strong>
    <button @click="decrement()">-</button>
  </div>
</template>

<script>
export default {
  props: ['start'],
  data() {
    return {
      value: this.start
    }
  },

  methods: {
    increment() { this.value = this.value + 1 },
    decrement() { this.value = this.value - 1 }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Подключение компонента на странице readme.md:

# Try component

<button-counter :start="55" />
1
2
3
4

Визуальное отображение компонента:

Кол-во кликов - 55

# Другой компонент