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

Узнайте, как Vue помогает вам создать единый файл, который отвечает за все, что касается одного компонента, централизируя ответственность за внешний вид и поведение.

Компонент Vue можно объявить в файле JavaScript (.js) так:

Vue.component('component-name', {
  /* options */
})

или также:

new Vue({
  /* options */
})

или его можно указать в.vueфайл.

В.vueфайл довольно крутой, потому что он позволяет вам определять

  • Логика JavaScript
  • Шаблон кода HTML
  • CSS стили

все в одном файле, и поэтому он получил имяОднофайловый компонент.

Вот пример:

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

<script>
export default {
data() {
return {
hello: ‘Hello World!’
}
}
}
</script>


<style scoped>
p {
color: blue;
}
</style>

Все это возможно благодаря использованию webpack. Vue CLI делает это очень простым и готовым к поддержке..vueфайлы не могут использоваться без настройки веб-пакета, и поэтому они не очень подходят для приложений, которые просто используют Vue на странице, не являясь полноценным одностраничным приложением (SPA).

Поскольку однофайловые компоненты полагаются на Webpack, мы бесплатно получаем возможность использовать современные веб-функции.

Ваш CSS можно определить с помощью SCSS или Stylus, шаблон можно создать с помощью Pug, и все, что вам нужно сделать, чтобы это произошло, - это объявить Vue, какой препроцессор языка вы собираетесь использовать.

В список поддерживаемых препроцессоров входят

Мы можем использовать современный JavaScript (ES6-7-8) независимо от целевого браузера, используя интеграцию Babel, а также модули ES, поэтому мы можем использоватьimport/exportзаявления.

Мы можем использовать CSS-модули для масштабирования нашего CSS.

Говоря об области видимости CSS, однофайловые компоненты позволяют легко писать CSS, который неутечкак другим компонентам, используя<style scoped>теги.

Если вы опуститеscoped, определяемый вами CSS будет глобальным. Но добавляя это, Vue автоматически добавляет к компоненту определенный класс, уникальный для вашего приложения, поэтому CSS гарантированно не попадет в другие компоненты.

Возможно, ваш JavaScript огромен из-за некоторой логики, о которой вам нужно позаботиться. Что, если вы хотите использовать отдельный файл для своего JavaScript?

Вы можете использоватьsrcатрибут для экстернализации:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

Это также работает для вашего CSS:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Обратите внимание, как я использовал

export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}

в JavaScript компонента для настройки данных.

Вы увидите и другие распространенные способы:

export default {
  data: function() {
    return {
      name: 'Flavio'
    }
  }
}

(приведенное выше эквивалентно тому, что мы делали раньше)

или же:

export default {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

это другое, потому что он использует функцию стрелки. Стрелочные функции работают до тех пор, пока нам не понадобится доступ к компонентному методу, поскольку нам нужно использоватьthisи такое свойство не привязано к компоненту с помощью стрелочных функций. Поэтому обязательно использоватьобычныйфункции, а не стрелочные функции.

Вы также можете увидеть

module.exports = {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

здесь используется синтаксис CommonJS, и он также работает, хотя рекомендуется использовать синтаксис модулей ES, поскольку это стандарт JavaScript.

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue:


Tech Wiki Online!