{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5p7rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.js — это прогрессивный JavaScript-фреймворк, предназначенный для создания пользовательских интерфейсов и одностраничных приложений. Он позволяет разработчикам строить сложные веб-приложения, используя простые и понятные концепции. Vue.js сочетает в себе лучшие практики из других фреймворков, таких как React и Angular, и предлагает высокую степень гибкости, что делает его доступным как для новичков, так и для опытных разработчиков.","type":"unstyled","key":"ck602"},{"data":{"image":{"id":"66cde0b77f4d095213161e5b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5q6bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"87jk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Основные концепции Vue.js","type":"unstyled","key":"6sd4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eqevo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Компоненты","type":"unstyled","key":"bunfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":1,"style":"BOLD"}],"text":" Что такое компоненты?","type":"unstyled","key":"2bp3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты в Vue.js — это независимые и переиспользуемые блоки кода, которые представляют собой отдельные части пользовательского интерфейса. Каждый компонент может иметь свою собственную логику, шаблон и стили. Компоненты позволяют разбивать приложение на более мелкие, управляемые части, что облегчает разработку и поддержку кода.","type":"unstyled","key":"dpbct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e3lmj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компоненты могут быть простыми (например, кнопка или форма) или сложными (например, целая страница или модальное окно). Они могут взаимодействовать друг с другом через свойства (props) и события.","type":"unstyled","key":"9i8m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5se8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Создание и использование компонентов. ","type":"unstyled","key":"a119q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание компонента в Vue.js довольно просто. Компонент можно определить как объект JavaScript или с помощью одного файла компонента (Single File Component).","type":"unstyled","key":"b3fg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9esgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Пример простого компонента:","type":"unstyled","key":"4c95k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b0f50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.component('my-component', {","type":"blockquote","key":"6gspi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" template: '

Hello from My Component!

'","type":"blockquote","key":"efosh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"9u8u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1cmh0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Использование компонента в шаблоне:","type":"unstyled","key":"adv7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5rbv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"6g2qe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"5f9kl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"dhd0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b7lb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Файл компонента (Single File Component):","type":"unstyled","key":"7j6pj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bosp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bklon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"40n4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1pf82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"18m53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9cqai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"48dc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"o08n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Реактивность","type":"unstyled","key":"3o028"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7r5uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":1,"style":"BOLD"}],"text":" Как работает реактивность в Vue.js?","type":"unstyled","key":"aegp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реактивность в Vue.js основана на системе отслеживания изменений данных. Когда данные изменяются, Vue автоматически обновляет интерфейс, чтобы отразить эти изменения. Это достигается с помощью \"наблюдателей\" (watchers), которые следят за состоянием данных и реагируют на их изменения.","type":"unstyled","key":"buupu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ctjgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue использует объекты JavaScript и их свойства для создания реактивных данных. При создании экземпляра Vue все свойства данных становятся реактивными, что позволяет Vue отслеживать их изменения.","type":"unstyled","key":"9im3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"flcb5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":1,"style":"BOLD"}],"text":" Примеры реактивных данных","type":"unstyled","key":"9rcs9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример создания реактивного объекта:","type":"unstyled","key":"4gc50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d0tdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"new Vue({","type":"blockquote","key":"81c32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" el: '#app',","type":"blockquote","key":"bnc4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" data: {","type":"blockquote","key":"4grd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" message: 'Hello Vue!'","type":"blockquote","key":"5k31b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"a648e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"154uj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bl3am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"q919"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При изменении message, например:","type":"unstyled","key":"dg3bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8jo46"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"this.message = 'Hello World!';","type":"blockquote","key":"2c8l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3pr44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интерфейс автоматически обновится, чтобы отобразить новое значение.","type":"unstyled","key":"eie3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"95jbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":1,"style":"BOLD"}],"text":" Шаблоны","type":"unstyled","key":"dci7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8e8pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":1,"style":"BOLD"}],"text":" Синтаксис шаблонов","type":"unstyled","key":"3ud8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблоны в Vue.js используют HTML-синтаксис с добавлением специальных директив и выражений. Это позволяет разработчикам легко связывать данные с пользовательским интерфейсом.","type":"unstyled","key":"8tmrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"67ot7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Пример простого шаблона:","type":"unstyled","key":"5p6g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"92sku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"d36ng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"ag1ki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bjqsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1tm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fl9kf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь {{ message }} — это выражение, которое будет заменено значением переменной message из объекта данных.","type":"unstyled","key":"8kfaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bmcfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":1,"style":"BOLD"}],"text":" Директивы (v-bind, v-model, v-if и др.)","type":"unstyled","key":"t2jh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Директивы — это специальные атрибуты, которые позволяют управлять поведением элементов в шаблонах. Вот некоторые из наиболее часто используемых директив:","type":"unstyled","key":"c7ge6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7eoh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" v-bind: Используется для привязки атрибутов элемента к данным. Например:","type":"unstyled","key":"6dqgr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"embh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"c05pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"cc5ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" v-model: Двусторонняя привязка данных, обычно используется с формами. Например:","type":"unstyled","key":"2c7ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c93gv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"362l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"ac6eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-v-if: Условное отображение элемента. Если условие истинно, элемент будет отображен:","type":"unstyled","key":"6big6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1ra79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

This text is visible

","type":"blockquote","key":"37o2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"3lu42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"v-for: Для рендеринга списков элементов на основе массива:","type":"unstyled","key":"dbhs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c1bse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

{{ item.name }}

","type":"blockquote","key":"bun2k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"82cdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти концепции являются основой работы с Vue.js.","type":"unstyled","key":"5q0qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"93bco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":1,"style":"BOLD"}],"text":" Установка и настройка Vue.js","type":"unstyled","key":"folie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5o4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Установка Vue.js через CDN","type":"unstyled","key":"c2aqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4dil8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка Vue.js через CDN (Content Delivery Network) — это самый простой способ начать использовать Vue в вашем проекте. Это подходит для небольших проектов или для быстрого прототипирования.","type":"unstyled","key":"5sco9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1k3r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"Шаги:","type":"unstyled","key":"aamge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6sjv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":3,"style":"ITALIC"}],"text":"1. Создание HTML файла: Создайте новый HTML файл, например index.html.","type":"unstyled","key":"9gftq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3f1kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":104,"offset":3,"style":"ITALIC"}],"text":"2. Подключение Vue.js: Добавьте следующий тег ","type":"blockquote","key":"egm1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"fri07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"abjiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"dd01h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" {{ message }}","type":"blockquote","key":"5sjg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"98nrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dvrf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"e0vgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"8g3i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"b1s13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4q292"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5d6qg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":70,"offset":3,"style":"ITALIC"}],"text":"3. Запуск: Откройте файл в браузере, и вы увидите сообщение \"Hello Vue!\".","type":"unstyled","key":"64t6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"834t2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":1,"style":"BOLD"}],"text":" Установка через npm","type":"unstyled","key":"b8sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"81jl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка Vue.js через npm (Node Package Manager) подходит для более крупных проектов, где требуется управление зависимостями и использование сборщиков, таких как Webpack или Vite.","type":"unstyled","key":"3elk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"328op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":" Шаги:","type":"unstyled","key":"5d65a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a6dav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":126,"offset":3,"style":"ITALIC"}],"text":"1. Установка Node.js: Убедитесь, что у вас установлен Node.js. Вы можете скачать его с [официального сайта](https://nodejs.org/).","type":"unstyled","key":"bcjei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9ache"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":3,"style":"ITALIC"}],"text":"2. Создание нового проекта:","type":"unstyled","key":"d73k3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":0,"style":"ITALIC"}],"text":" Откройте терминал и создайте новую папку для вашего проекта:","type":"unstyled","key":"8q9l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4pk1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" mkdir my-vue-app","type":"blockquote","key":"51qk8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cd my-vue-app","type":"blockquote","key":"ackci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1h2ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"ITALIC"}],"text":"3. Инициализация npm:","type":"unstyled","key":"2qh5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"ITALIC"}],"text":" Инициализируйте новый проект npm:","type":"unstyled","key":"66qb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aq4ai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" npm init -y","type":"blockquote","key":"ckmei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dc76v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":3,"style":"ITALIC"}],"text":"4. Установка Vue:","type":"unstyled","key":"bisd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":" Установите Vue.js с помощью следующей команды:","type":"unstyled","key":"e6n4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bv46m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" npm install vue","type":"blockquote","key":"94j1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"91vr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":3,"style":"ITALIC"}],"text":"5. Создание HTML файла:","type":"unstyled","key":"414ni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"}],"text":" Создайте файл index.html и подключите Vue:","type":"unstyled","key":"4vqrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"phl5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7j105"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"co8i8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"6p4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"c4vk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"mcg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Vue.js npm Example","type":"blockquote","key":"535hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"187mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"93lpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"ali0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" {{ message }}","type":"blockquote","key":"4dhv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"38ol8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"a7ptk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"c74st"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1sisn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"fomk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"am26m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7mjdl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bb083"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":3,"style":"ITALIC"}],"text":"6. Запуск: Откройте файл в браузере, чтобы увидеть результат.","type":"unstyled","key":"bsem2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cbhnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":1,"style":"BOLD"}],"text":" Создание первого проекта с использованием Vue CLI","type":"unstyled","key":"3ksi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dpn29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue CLI (Command Line Interface) — это инструмент для создания и управления проектами на Vue.js. Он позволяет быстро настраивать проекты с помощью шаблонов и плагинов.","type":"unstyled","key":"4dp9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1d6i9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":" Шаги:","type":"unstyled","key":"879d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"70gj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":3,"style":"ITALIC"}],"text":"1. Установка Vue CLI:","type":"unstyled","key":"fleud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":78,"offset":0,"style":"ITALIC"}],"text":" Убедитесь, что у вас установлен Node.js, затем установите Vue CLI глобально:","type":"unstyled","key":"e7q3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8rga7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" npm install -g @vue/cli","type":"blockquote","key":"12ine"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"ae241"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":3,"style":"ITALIC"}],"text":"2. Создание нового проекта:","type":"unstyled","key":"3rl1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":" Используйте команду vue create, чтобы создать новый проект. Например:","type":"unstyled","key":"bbnnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6l68h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" vue create my-vue-project","type":"blockquote","key":"sbhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7mq47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Вам будет предложено выбрать предустановленные настройки или настроить проект вручную.","type":"unstyled","key":"e9bkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6dpcq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":3,"style":"ITALIC"}],"text":"3. Выбор предустановок:","type":"unstyled","key":"c1itp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":107,"offset":0,"style":"ITALIC"}],"text":" Выберите нужные опции (например, Babel, Router, Vuex и т.д.). После выбора CLI создаст структуру проекта.","type":"unstyled","key":"f0ob5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"afdmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":3,"style":"ITALIC"}],"text":"4. Переход в директорию проекта:","type":"unstyled","key":"u9he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1bbus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" cd my-vue-project","type":"blockquote","key":"1sm16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"581hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":3,"style":"ITALIC"}],"text":"5. Запуск сервера разработки:","type":"unstyled","key":"a0a9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"ITALIC"}],"text":" Запустите сервер разработки с помощью команды:","type":"unstyled","key":"5td13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qscc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" npm run serve","type":"blockquote","key":"7opku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"43vvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":3,"style":"ITALIC"}],"text":"6. Открытие проекта в браузере:","type":"unstyled","key":"9qbef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"ITALIC"}],"text":" Перейдите по адресу http://localhost:8080, чтобы увидеть ваше приложение.","type":"unstyled","key":"fsdi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c2oin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Основные функции и возможности Vue.js","type":"unstyled","key":"67q7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f4tkt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.js — это прогрессивный JavaScript-фреймворк, который предоставляет множество инструментов и возможностей для создания интерактивных пользовательских интерфейсов. Две ключевые функции, которые значительно расширяют его возможности, — это управление состоянием с помощью Vuex и маршрутизация с помощью Vue Router.","type":"unstyled","key":"3djp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fa31m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":1,"style":"BOLD"}],"text":" Управление состоянием с Vuex","type":"unstyled","key":"f6pl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bqsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"}],"text":" Что такое Vuex и зачем он нужен?","type":"unstyled","key":"6amja"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fq1j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vuex — это библиотека для управления состоянием в приложениях на Vue.js. Она позволяет централизованно хранить все состояния приложения и управлять ими, что особенно полезно в больших приложениях с множеством компонентов. Vuex помогает избежать проблем, связанных с передачей данных между компонентами, и делает управление состояниемболее предсказуемым.","type":"unstyled","key":"7i7f5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c7vak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Зачем нужен Vuex?","type":"unstyled","key":"fip98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Централизованное хранилище для всех компонентов приложения.","type":"unstyled","key":"fkkjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Упрощение передачи данных между компонентами.","type":"unstyled","key":"d7rv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Легкость в отладке и тестировании состояния приложения.","type":"unstyled","key":"46sde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Поддержка реактивности: изменения в состоянии автоматически отражаются в компонентах.","type":"unstyled","key":"d63an"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"mpcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":1,"style":"BOLD"}],"text":" Основные концепции Vuex","type":"unstyled","key":"9h2o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bkfib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. State (Состояние):","type":"unstyled","key":"6jbdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Это объект, который содержит все данные приложения. Компоненты могут получать данные из состояния и автоматически обновляться при изменении этих данных.","type":"unstyled","key":"d07qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3nev0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const store = new Vuex.Store({","type":"blockquote","key":"6o5j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" state: {","type":"blockquote","key":"92vio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" count: 0","type":"blockquote","key":"43al6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"1glej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"41itl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"4qq6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"evnfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Getters (Геттеры):","type":"unstyled","key":"bvodd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Это функции, которые позволяют получить производные данные из состояния. Они работают как вычисляемые свойства для состояния.","type":"unstyled","key":"faje0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"a34qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const store = new Vuex.Store({","type":"blockquote","key":"18s44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" state: {","type":"blockquote","key":"2krqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" count: 0","type":"blockquote","key":"ebap7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"6qeb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" getters: {","type":"blockquote","key":"78e4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" doubleCount: state => state.count * 2","type":"blockquote","key":"7020k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"7pu12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"b6m32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"70hbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"87qa4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Mutations (Мутации):","type":"unstyled","key":"7o3u1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Это единственный способ изменения состояния в Vuex. Мутации должны быть синхронными функциями, которые принимают состояние и нагрузку (payload) в качестве аргументов.","type":"unstyled","key":"fj2m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"acgpe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"8dekk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const store = new Vuex.Store({","type":"blockquote","key":"8mk9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" state: {","type":"blockquote","key":"a0v2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" count: 0","type":"blockquote","key":"es5ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" },","type":"blockquote","key":"cnl6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" mutations: {","type":"blockquote","key":"brsqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" increment(state) {","type":"blockquote","key":"5cl5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" state.count++;","type":"blockquote","key":"81lp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"osdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"ele6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"7f077"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"eiesh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ttul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Actions (Действия):","type":"unstyled","key":"f0k8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - Это функции, которые могут выполнять асинхронные операции и затем вызывать мутации. Они также могут содержать бизнес-логику.","type":"unstyled","key":"clugo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3su1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const store = new Vuex.Store({","type":"blockquote","key":"2mi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" actions: {","type":"blockquote","key":"6b3it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" incrementAsync({ commit }) {","type":"blockquote","key":"dm5nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" setTimeout(() => {","type":"blockquote","key":"eaqh6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" commit('increment');","type":"blockquote","key":"d8u2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }, 1000);","type":"blockquote","key":"8vugv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"b80sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"dr0l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"69a2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b13od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4v7k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":1,"style":"BOLD"}],"text":" Маршрутизация с Vue Router","type":"unstyled","key":"2efqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7kmnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":1,"style":"ITALIC"}],"text":" Основы работы с Vue Router","type":"unstyled","key":"d525j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cdgph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue Router — это библиотека для управления маршрутизацией в приложениях на Vue.js. Она позволяет создавать одностраничные приложения (SPA), где пользователи могут перемещаться между различными представлениями без перезагрузки страницы.","type":"unstyled","key":"55idk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f4hs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Зачем нужен Vue Router?","type":"unstyled","key":"8989o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Упрощает навигацию по приложению.","type":"unstyled","key":"9kin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Позволяет использовать динамические маршруты.","type":"unstyled","key":"14nat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Поддерживает вложенные маршруты и маршруты с параметрами.","type":"unstyled","key":"3attc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- Интеграция с компонентами для создания SPA.","type":"unstyled","key":"1gpr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ekapj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":1,"style":"BOLD"}],"text":" Настройка маршрутов и навигация","type":"unstyled","key":"79cj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"amoiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":3,"style":"ITALIC"}],"text":"1. Установка Vue Router:","type":"unstyled","key":"5hr7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"ITALIC"}],"text":" Чтобы использовать Vue Router, сначала установите его:","type":"unstyled","key":"10j81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a64dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" npm install vue-router","type":"blockquote","key":"1m7a1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"a8t2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":3,"style":"ITALIC"}],"text":"2. Создание маршрутов:","type":"unstyled","key":"97k1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"}],"text":" Определите маршруты в вашем приложении:","type":"unstyled","key":"1v1p9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1rlfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" import Vue from 'vue';","type":"blockquote","key":"55tij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" import Router from 'vue-router';","type":"blockquote","key":"90r0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" import Home from './components/Home.vue';","type":"blockquote","key":"c8sid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" import About from './components/About.vue';","type":"blockquote","key":"2kud0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"3tdkl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Vue.use(Router);","type":"blockquote","key":"3sh45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"odeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const routes = [","type":"blockquote","key":"e9j5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" { path: '/', component: Home },","type":"blockquote","key":"4gq00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" { path: '/about', component: About }","type":"blockquote","key":"s1qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ];","type":"blockquote","key":"84jko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"cfp8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const router = new Router({","type":"blockquote","key":"29dk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" routes","type":"blockquote","key":"dsle0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"dqu2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ```","type":"unstyled","key":"eb291"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b08gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":3,"style":"ITALIC"}],"text":"3. Использование маршрутизатора в приложении:","type":"unstyled","key":"37hmb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"}],"text":" Добавьте маршрутизатор в экземпляр Vue:","type":"unstyled","key":"c5bho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bbdqv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" new Vue({","type":"blockquote","key":"9kqcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" el: '#app',","type":"blockquote","key":"878tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" router,","type":"blockquote","key":"6q4kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" render: h => h(App)","type":"blockquote","key":"bsn2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"5p6em"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bpj9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":3,"style":"ITALIC"}],"text":"4. Навигация:","type":"unstyled","key":"bkgdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":" Для навигации между маршрутами используйте компонент ``:","type":"unstyled","key":"fblc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"42psl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Home","type":"blockquote","key":"508hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" About","type":"blockquote","key":"dc0jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6jqtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":3,"style":"ITALIC"}],"text":"5. Отображение компонентов:","type":"unstyled","key":"bl6jb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"ITALIC"}],"text":" Используйте `` для отображения текущего компонента маршрута:","type":"unstyled","key":"8pftl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eu6lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bfoff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Home","type":"blockquote","key":"ddej0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" About","type":"blockquote","key":"d2mr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"dmikq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"a5u72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"mp07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":1,"style":"BOLD"}],"text":" Работа с API","type":"unstyled","key":"ff0ma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1cu15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с API (Application Programming Interface) — это важный аспект разработки современных веб-приложений. В этом контексте библиотека Axios является популярным инструментом для выполнения HTTP-запросов. Давайте подробнее рассмотрим, как работать с API, используя Axios, а также как обрабатывать ответы и ошибки.","type":"unstyled","key":"7f833"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7q2l2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":4,"style":"BOLD"}],"text":" 1. Запросы к API с использованием Axios","type":"unstyled","key":"8da5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b576t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка Axios","type":"unstyled","key":"4rnj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"59gsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала необходимо установить Axios. Если вы используете npm, выполните команду:","type":"unstyled","key":"8hks8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"80em9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install axios","type":"blockquote","key":"errhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e4olm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Основные запросы","type":"unstyled","key":"24bt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dsco4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Axios поддерживает несколько типов HTTP-запросов: GET, POST, PUT, DELETE и другие.","type":"unstyled","key":"963i9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6eko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":1,"style":"BOLD"}],"text":" Пример GET-запроса","type":"unstyled","key":"5n2ce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a3uoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import axios from 'axios';","type":"blockquote","key":"9gis9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"f8ump"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const fetchData = async () => {","type":"blockquote","key":"c8g2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" try {","type":"blockquote","key":"8ap3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const response = await axios.get('https://api.example.com/data');","type":"blockquote","key":"lokc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.log(response.data); // Обработка данных","type":"blockquote","key":"5786g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } catch (error) {","type":"blockquote","key":"7qa1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Ошибка при получении данных:', error);","type":"blockquote","key":"a7uls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"66aqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"4ko2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"593sb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetchData();","type":"blockquote","key":"efdf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"k00v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d2mjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":1,"style":"BOLD"}],"text":" Пример POST-запроса","type":"unstyled","key":"70lbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"depnb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const postData = async () => {","type":"blockquote","key":"1788f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" try {","type":"blockquote","key":"47tnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const response = await axios.post('https://api.example.com/data', {","type":"blockquote","key":"11cjs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" name: 'John Doe',","type":"blockquote","key":"1d1hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" age: 30","type":"blockquote","key":"ed2bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" });","type":"blockquote","key":"30if2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.log(response.data); // Обработка ответа","type":"blockquote","key":"cuju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } catch (error) {","type":"blockquote","key":"6u7fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Ошибка при отправке данных:', error);","type":"blockquote","key":"34qbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"aobn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"50elp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4vu3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"postData();","type":"blockquote","key":"aqsij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ejlk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5iadb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":4,"style":"BOLD"}],"text":" 2. Обработка ответов и ошибок","type":"unstyled","key":"f3n45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"88t5j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обработка ответов и ошибок — ключевой момент при работе с API.","type":"unstyled","key":"eqh03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ar4rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":1,"style":"BOLD"}],"text":" Обработка успешного ответа","type":"unstyled","key":"98vfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"744c2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ответ от API обычно приходит в формате JSON. Вы можете получить доступ к данным через свойство data объекта ответа:","type":"unstyled","key":"c52sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4phmn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const response = await axios.get('https://api.example.com/data');","type":"blockquote","key":"b37it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.log(response.data); // Доступ к данным","type":"blockquote","key":"3jg8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2lipi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cio7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":1,"style":"BOLD"}],"text":" Обработка ошибок","type":"unstyled","key":"6jadc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3qq17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Axios автоматически отклоняет промис, если запрос завершился ошибкой (например, если сервер вернул статус 4xx или 5xx). Вы можете использовать блок try-catch для обработки ошибок:","type":"unstyled","key":"etkof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fc4b1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"try {","type":"blockquote","key":"1q1q3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" const response = await axios.get('https://api.example.com/data');","type":"blockquote","key":"6i7sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"} catch (error) {","type":"blockquote","key":"f6oh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" if (error.response) {","type":"blockquote","key":"2shct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // Запрос был выполнен, и сервер ответил кодом состояния, который выходит за пределы 2xx","type":"blockquote","key":"8oii4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Ошибка ответа:', error.response.data);","type":"blockquote","key":"4gn7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Статус:', error.response.status);","type":"blockquote","key":"2s4a9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } else if (error.request) {","type":"blockquote","key":"a4r65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // Запрос был выполнен, но ответ не был получен","type":"blockquote","key":"142r4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Ошибка запроса:', error.request);","type":"blockquote","key":"c8i3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" } else {","type":"blockquote","key":"9qedd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // Что-то произошло при настройке запроса, вызвавшую ошибку","type":"blockquote","key":"djogv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" console.error('Ошибка:', error.message);","type":"blockquote","key":"3smso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" }","type":"blockquote","key":"fg4io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"71nhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fj8uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"unstyled","key":"ps15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bdd9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue.js — это мощный и гибкий JavaScript-фреймворк, который завоевал популярность среди разработчиков благодаря своим многочисленным преимуществам:","type":"unstyled","key":"8jnph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ak93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":3,"style":"BOLD"}],"text":"1. Простота в освоении: Vue.js имеет интуитивно понятный синтаксис и хорошо структурированную документацию, что делает его доступным для новичков и опытных разработчиков.","type":"unstyled","key":"80mq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aed82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":3,"style":"BOLD"}],"text":"2. Реактивность: Одной из ключевых особенностей Vue является реактивная система данных, которая автоматически обновляет интерфейс при изменении состояния, что значительно упрощает управление состоянием приложения.","type":"unstyled","key":"9et3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6bi80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":3,"style":"BOLD"}],"text":"3. Компонентный подход: Vue позволяет разбивать приложение на переиспользуемые компоненты, что улучшает организацию кода и упрощает его поддержку.","type":"unstyled","key":"am8ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7k066"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":3,"style":"BOLD"}],"text":"4. Гибкость: Vue.js можно использовать как для создания простых одностраничных приложений, так и для разработки сложных корпоративных решений. Он легко интегрируется с другими библиотеками и фреймворками.","type":"unstyled","key":"669p3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"kibn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":3,"style":"BOLD"}],"text":"5. Сообщество и экосистема: Сильное сообщество разработчиков и обширная экосистема плагинов и инструментов (таких как Vue Router и Vuex) делают разработку более эффективной и удобной.","type":"unstyled","key":"chfb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"853mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":3,"style":"BOLD"}],"text":"6. Производительность: Vue.js обеспечивает высокую производительность благодаря виртуальному DOM, который минимизирует количество обновлений реального DOM, что особенно важно для сложных приложений.","type":"unstyled","key":"9cgsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1cu73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"1koWYP1zh2kvRHjJnbk9"}],"entityMap":{}},"mentions":[]}