Работа с Vue
Чтобы узнать об архитектуре Vue, мы начнем с импорта Vue в наш html файл. Самый простой простой способ - импортировать
Vue через официальный CDN. Мы можем сделать это, создав файл index.html и добавив <script> тег для загрузки Vue CDN в разделе <head> шаблона HTML,
как показано в следующем блоке кода:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js project with CDN</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
</html>Браузер загрузит пакет Vue, используя CDN, указанный в
теге скрипта при загрузке страницы. После завершения вы можете использовать Vue
функций и начать писать код Vue.
Но сначала давайте посмотрим на экземпляр Vue.
Понимание экземпляра Vue
Как правило, каждое приложение Vue состоит только из одного корневого экземпляра Vue.
который можно создать с помощью метода Vue.createApp:
const vm = Vue.createApp({
// options
})Конструктор класса Vue принимает объект параметров для конфигурации и поведения компонентов. Мы называем этот подход Options API, и вы можете
использовать его для всех соответствующих компонентах Vue. Однако все они являются и считаются вложенными экземплярами Vue со своими собственными параметрами и свойствами.
vm — это термин, обычно используемый для обозначения модели представления, которая является абстракцией представления, который описывает состояние данных в модели. Связывание экземпляра Vue с vm поможет вам отслеживать ваш экземпляр Vue в блоке кода.
Чтобы движок Vue отображал экземпляр приложения, в нашем index.html
файле, мы объявляем элемент <div> внутри тега <body>, используя уникальный идентификатор или атрибут данных в качестве основной точки входа для приложения:
<body>
<div id="vue-app"></div>
<script>
const vm = Vue.createApp({
//Options
})
</script>
</body>Чтобы отобразить приложение Vue в браузере, нам нужно вызвать vm.mount()
для монтирования корневого компонента к целевому HTML-элементу с использованием уникального
селектора. В этом примере это идентификатор со значением vue-app:
<body>
<div id="vue-app"></div>
<script>
const vm = Vue.createApp({
//Options
})
vm.mount('#vue-app')
</script>
</body>Теперь вы привязываете элемент div с id="vue-app" к новому Vue.
Далее давайте определим текст со значением «Начните использовать Vue.js сегодня!» и
добавьте его как свойство возвращаемого значения для метода данных в
варианты применения:
const vm = Vue.createApp({
data() {
return {
text: 'Начните использовать Vue.js сегодня!'
}
}
})В предыдущем примере кода data— это функция, которая возвращает объект содержащий локальное состояние (или локальные переменные) компонента. Мы
мы обсудим это подробнее далее.
Чтобы отобразить содержимое текста в DOM, мы используем синтаксис шаблона Vue,
представлен двойными фигурными скобками ({{}}), обернутыми вокруг реактивного
содержания. В этом случае мы используем {{ text }}, как показано в следующем коде:
<div id="vue-app">{{ text }}</div>Движок Vue заменит свойство данных, помеченное text, и фигурные скобки, надписью «Начните использовать Vue.js сегодня!».
В теге <head> мы также можем использовать DOM API для создания экземпляра Vue приложения и привязать его к нашему целевому элементу (с помощью селектора ID
- #vue-app):
<head>
<title>Vue.js CDN</title>
<script src="https://unpkg.com/vue@3"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
Vue.createApp({
data(){
return {
text: "Start using Vue.js today!"
}
}
}).mount('#vue-app')
})
</script>
</head>
<body>
<div id="vue-app">{{text}}</div>
</body></body>Результат одинаков для обоих подходов. Однако мы решительно не рекомендуем использовать DOMContentLoaded.
Хотя работа с CDN очень портативна, мы рекомендуем использовать package менеджеры в качестве метода установки Vue. Начиная с Vue 3 и выше, Vue
проекты используют Vite (или Vite.js) для инициализации и обработки кода. Вы можете получить более подробную информацию здесь: https://vuejs.org/guide/quick-start.html#creating-a-vueapplication.
Использование Vite очень полезно для управления другими сторонними библиотеками и созданием оптимизированного кода для production. Далее мы рассмотрим пример, работы с Vite.