‎play.js — JavaScript IDE su App Store

Начальный вариант кода

Мы начнём работу с очень простого HTML- и JavaScript-кода, расположенного в двух файлах.

Файл index.html:

‎inspect browser

‎learn node.js offline [pro]

‎node-pad

Onclickoutside —  клики вне элемента

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

Я использовал этот хук в своей тудушке, в компоненте ToDoItem.vue:

Usestorage и createglobalstate —  реактивное локальное хранилище

Update 2: Я пришел к выводу, что VueUse и Vuex несовместимые библиотеки, основанные на разных принципах, поэтому использование первой во второй — это своеобразный антипаттерн. Гораздо продуктивнее использовать VueUse и новую систему реактивности для создания простых и удобных хранилищ. Об этом я собираюсь написать в следующей статье. А пока примеры использования были изменены на более актуальные.

Следующая функция, о которой я расскажу,  —  это useStorage. Эта функция позволяет сохранять данные в Window.localStorage. Её удобно использовать вместе с createGlobalState, которая в свою очередь используется для создания глобального хранилища.

// @/store/index.ts

import { createGlobalState, useStorage } from '@vueuse/core'
import Note from '@/models/NoteModel'

// state
export const useGlobalNotes = createGlobalState(
  () => useStorage('my-notes', [] as Note[]),
)

// actions

const notes = useGlobalNotes() // for local use

export const addNote = function (note) {
  notes.value.push(note)
}

export const deleteGlobalNote = function (noteId: number) {
  notes.value = notes.value.filter(note => note.id != noteId)
}

Первым параметром функция useStorage принимает ключ, под которым она будет сохранять ваши данные в localStorage, а вторым их начальное значение. createGlobalState создает функцию-обертку для передачи состояния хранилища компонентам.

Вызвав эту функцию (в нашем случае это useGlobalNotes()) в компоненте или здесь же , мы получим реактивный список заметок (notes). Массив notes можно использовать как обычно, не забывая, что так как это прокси-объект, а сам список хранится в notes.value. В шаблонах разметки в компонентах .value добавлять не надо, используется просто notes.

Для сравнения также полезно ознакомиться с примером использования useStorage от авторов. Разница в том, что в setup работать с реактивным хранилищем нужно не напрямую, а через его свойство value. В html-шаблоне же, все как обычно.

Vue-cli

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

Итак, для начала установим vue-cli в качестве глобального пакета:

$ npm install -g vue-cli

Затем проинициализируем проект с выбранным шаблоном; для нашего примера более чем достаточно использовать webpack-simple.

$ vue init webpack-simple vue-spa

Далее перейдём в папку vue-spa и запустим

npm install

в терминале. После установки всех пакетов, мы можем запустить наше приложение в режиме разработки.

$ npm run dev

Эта команда автоматически запустит наш проект на локальном dev-сервере webpack. В браузере появится наше простейшее приложение Vue. Конечно оно выглядит совсем не так, как бы нам хотелось, и годится лишь в качестве отправной точки для начала чего-то большего. Чтобы продолжить работу, предлагаю сначала ознакомиться со структурой нашего шаблона.

Бэкенд

В этом руководстве мы в основном сосредоточимся на фронтенде на

Vue

. Размышлять о написании REST бэкенда мы не будем. Для примера будет использоваться сервис

Важный термин: выражение

Выражения позволяют использовать значения, хранящиеся в экземпляре Vue, а так же JavaScript-конструкции, применение которых позволяет создавать какие-то новые значения.

Задача

Нам нужен механизм, который позволяет взять значение, имеющееся в JavaScript-коде, например то, что записано сейчас в переменную

product

, и поместить его в код веб-страницы, в тег

h1

Решить эту задачу нам поможет фреймворк Vue.js. Вот официальное русскоязычное руководство по нему.

Первым шагом нашей работы с Vue будет подключение фреймворка к странице. Для этого внесём изменения в файл index.html, добавив в него, прямо над кодом подключения файла main.js, следующее:

Знакомство с реактивностью

Причина, по которой Vue сразу же после загрузки страницы выводит в теге

значение, соответствующее свойству

product

, заключается в том, что Vue — это реактивный фреймворк. Другими словами, данные экземпляра Vue связаны со всеми местами веб-страницы, в которых есть ссылки на эти данные. В результате Vue может не только вывести данные в некоем месте страницы, но и обновить соответствующий HTML-код в том случае, если данные, на которые он ссылается, будут изменены.

Для того чтобы это доказать, давайте откроем консоль инструментов разработчика браузера и изменим значение, записанное в свойство product объекта app. Когда мы это сделаем, например, введя в консоли app.product = ‘Coat’, изменится и текст, выводимый на странице.

Изменение значения свойства product приводит к изменению текста, выводимого на веб-странице

Видите, как легко это делается?

Инструменты

Начать работу с Vue очень просто. С использованием правильных инструментов это ещё проще. Рекомендую взглянуть на проект

, который содержит список инструментов, компонентов, библиотек и плагинов на все случаи жизни.

Использование javascript-выражений в html-коде

Если нам нужно, чтобы значение свойства

product

вывелось бы там, где выводится текст заголовка первого уровня, имя этого свойства можно поместить в двойные фигурные скобки в соответствующем теге:

Как есть средства отладки javascript-скриптов для айфонов / айпадов?

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

Каждый файл *.vue состоит из блоков трёх типов: <template>, <script> и опционально <style>. В результате, мы можем разделить проект на связанные компоненты. Внутри компонента его шаблон, логика и стили неотъемлемо связаны, и их совмещение фактически делает компонент более целостным и легко поддерживаемым. Теперь мы готовы приступить к созданию блога на Vue.

Пишем приложение

Давайте посмотрим, что собственно мы собираемся реализовать. У нас будет заголовок с названием нашего блога в верхней части страницы. С левой стороны у нас будет фиксированная боковая панель, в которой мы будем отображать заголовки наших записей, это будет что-то вроде оглавления. Остальная часть страницы будет занята динамическим блоком, в котором будет отображаться сам текст записи.

Практикум

Добавьте к уже имеющимся в экземпляре Vue данным ключ

description

, содержащий текст

A pair of warm, fuzzy socks

. Затем выведите значение этого ключа в элементе

, который должен находиться ниже элемента

→ Вот заготовка, которую вы можете использовать для решения этой задачи.

→ Вот решение задачи.

Предварительные требования

Предполагается, что тот, кто решит освоить этот курс, обладает знаниями в области базовых веб-технологий: HTML, CSS и JavaScript.

В этом курсе мы займёмся разработкой страницы, представляющей собой карточку товара.

Страница, разработкой которой мы будем заниматься

Примеры выражений

Как уже было сказано, в двойных фигурных скобках можно использовать различные JavaScript-конструкции. Вот несколько примеров:

Размещение данных в экземпляре vue

В экземпляре Vue имеется место для хранения данных. Эти данные описывают с помощью свойства

data

объекта с опциями:

data: {
    product: "Socks"
}

К данным, хранящимся в экземпляре Vue, можно обратиться из элемента веб-страницы, к которому подключён экземпляр Vue.

Шаблон webpack-simple

Внутри шаблон webpack-simple имеет следующую структуру:

Файл index.html содержит простую разметку HTML с единственным элементом “app” в body. Он будет заменён на DOM, сгенерированный vue. По этой причине тэг body не рекомендуется использовать в качестве корневого элемента.

В папке src лежит файл main.js, который содержит точку входа webpack. Компоненты Vue импортируются там же. Ещё там описан корневой экземпляр Vue, который пока что имеет два свойства. Свойство ‘el’ обеспечивает экземпляру Vue связь с указанным DOM элементом.

Ещё одно — функция отрисовки, генерирующая DOM из App.vue. В общем, это все, что нам нужно знать о структуре шаблона webpack-simple, не так много, не так ли? Основная часть нашего приложения будет запрограммирована в App.vue. Расширение .vue определяет файл как однофайловый компонент vue. Это одна из особенностей Vue с которой мы сейчас познакомимся поближе.

Шаг 1

Прежде всего, удалим все лишние строки из App.vue. И перепишем шаблон в соответствии с нашими требованиями.

Шаг 2

Установим Axios

$ npm install --save-dev axios

Шаг 3

Для этого воспользуемся официальной Vue библиотекой vue-router. Как уже понятно из названия, библиотека позволяет настраивать роутинг для нашего приложения.

Установим библиотеку:

$ npm install --save-dev vue-router

Для настройки роутинга вернёмся к файлу main.js. Здесь мы определим настройки роутинга и добавим их в наш экземпляр Vue.

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Post from './components/Post.vue'
import Hello from './components/Hello.vue'
Vue.use(Router)

const router = new Router({
 routes: [
   {
     path: '/',
     name:'home',
     component: Hello,
   },
   {
     path: '/post/:id',
     name:'post',
     component: Post,
     props: true,
   },
 ]
})

new Vue({
 el: '#app',
 render: h => h(App),
 router
})

В настройках роутинга мы указали, какой компонент вызывает отрисовку по соответствующему пути. Поскольку только компонент Post.vue будет отвечать за отрисовку каждого поста, нам не потребуется определять путь к каждому посту, достаточно определить динамический путь.

path: '/post/:id'

Этот путь содержит динамический сегмент :id который указывает на конкретный пост. При этом у нас есть доступ к этому сегменту в компоненте Post через

this.$route.params.id

. Однако использование $route в нашем компоненте закрепит жесткую связь с роутом, что в свою очередь ограничивает гибкость компонента, поскольку он может использоваться только на определенных URL-адресах. Вместо этого мы можем использовать опцию

props

и установить её в

true

. После этого $route.params станет связан с опцией props компонента Post.

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

Шаг 4

Перейдём к файлу Post.vue, в котором добавим простой шаблон:

Экземпляр vue

Вот схема кода, с помощью которого создают экземпляр Vue:

var app = new Vue({options})

Экземпляр Vue — это корневая сущность приложения. Его создают, передавая конструктору

Vue

объект с опциями. Этот объект содержит различные свойства и методы, которые дают экземпляру Vue возможность хранить данные и выполнять какие-то действия.

Итоги

Поговорим о том, что мы сегодня изучили:

Подведём итоги

Мы написали простое одностраничное приложение с использованием Vue за четыре шага. Мы узнали, как легко начать свой проект с vue-cli. Мы рассмотрели концепцию однофайловых компонентов Vue, которые делают ваш проект более гибким и масштабируемым. Мы узнали, как извлекать данные из внешнего API с помощью Axios.

Заключение

Я рассказал всего про 4 функции из большого арсенала инструментов VueUse для разработки на Vue 3. Для более глубокого изучения советую посетить сайт этой замечательной библиотеки. Документация все еще далека от совершенства, но она регулярно обновляется как и сама библиотека.

Полный код моего полигона, где я испытывал эту библиотеку, можно посмотреть здесь. О начале работы над этим проектом я уже рассказывал в этой статье.