MyTetra Share
Делитесь знаниями!
Однофайловые компоненты (single-file) в Vue
Время создания: 24.02.2018 17:30
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, npm, node, nodejs, node.js, webpack, vue-cli, single-file, component, components, однофайловые компоненты, компонент, компоненты
Раздел: Информационные технологии - JavaScript - Vue

При использовании в разработке vue-cli с webpack со специальным модулем vue-loader становится возможным использование однофайловых компонентов.

Однофайловые компоненты в процессе сборки компилируются в обычный JavaScript.

Однофайловые компоненты имеют расширение *.vue и следующий синтаксис:


<template>

<p>{{ hello }}</p>

</template>


<script>

export default {

data() {

return {

hello: 'Hello, World!'

}

}

}

</script>


<style>

</style>


Можно увидеть три основные секции:

  1. template -- содержит шаблон компонента, который будет обработан Vue; ограничение: в секции template должен быть только один корневой элемент!
  2. script -- содержит описание компонента на JavaScript; можно использовать любые команды обычного JavaScript ES6 (import, let, ...).
  3. style -- содержит CSS-стили, принадлежащие данному компоненту; стили можно сделать изолированными с помощью атрибута scoped: <style scoped></style>.


Обязательно должна присутствовать только секция template.

Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования