www.machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Начало работы с Vue.js для Data Science

Дата публикации Oct 25, 2018

Vue.js - это легкая и простая в использовании инфраструктура JavaScript для создания более сложных интерфейсных веб-сайтов. В этом блоге я поделюсь своим взглядом на изучение Vue.js как человека, работающего над проектами в области наук о данных. Я пытался изучить jQuery для работы с JavaScript раньше, и я обнаружил, что он очень не интуитивно понятен и сложен в использовании. Vue.js - глоток свежего воздуха и совершенно другой опыт по сравнению с jQuery - esp. для тех, кто жил в основном в мире HTML / CSS для фронт-энда.

Vue.js - это облегченная JavaScript-инфраструктура для создания динамических веб-сайтов.

I. Мой рабочий процесс Data Science с веб-разработкой:

  1. Как и многие исследователи данных, я обычно использую язык сценариев, такой какпитонстроить модели. Эти модели обычно обучаются и хранятся где-то на диске, и, как правило, развертываются в производство на Python или другом языке. (Я писал ос помощьюИдтидля науки о данных- который может быть удивительным языком для многих задач науки о данных.)
  2. В моем случае обычным вариантом использования для создания веб-сайта будет получение обучающих данных от пользователей, которые заходят на веб-сайт, входят в систему, отмечают или классифицируют данные для вас.
    Для этого рабочего процесса я использовалколбакак веб-фреймворк вместе сначальная загрузкаа такжедзиндзяинтерфейсный движок для создания небольших сайтов. (Затем они могут быть развернуты черезAWSилиHeroku)
  3. Что делать, если на сайте нужна интерактивность? Что делать, если вам нужны сочетания клавиш? Что если вы хотите, чтобы динамические диаграммы были необходимы для демонстрации различных состояний модели?JavaScriptнеобходим для этих задач. Обычно люди используют такие фреймворки, как Angular, React илиВьючтобы помочь написанию кода.

II. Начало работы с Vue.js:

Vue.JS является легким, имеет более плавную форму обучения, более интуитивно понятен, имеет отличную документацию и становится действительно популярным для одностраничных приложений (SPA). Соглашения SPA позволяют выполнять большую часть работы на стороне клиента, не требуя постоянной перезагрузки страницы.

Огромный крикЧистые ниндзя видео на Youtube, они отлично изучают Vue. Давайте начнем с некоторого кода Vue:

а) Вызов функций и динамический доступ к данным:

Внутри HTML-кода: добавьтеdivсid,vue-appчто позволит экземпляру Vue управлять приложением. HTML взаимодействует с данными Javascript, используя{{а также}}- это позволяет Vue знать, чтобы загружать эти данные динамически. в<script>добавьте ссылки на файл Vue Javascript, размещенный на CDN, и на свой локальный файл JavaScript.

Внутри файла JavaScript:

Экземпляр Vue соединяется с DOM, используяel,dataимеет пары ключ-значение для хранения всех данных, которые могут динамически обновляться - это имя является фиксированным.methodsимеет все функции, которые можно вызывать внутри HTML, используя{{а также}}, Внутриmethods,dataможно получить с помощьюthis, Получитьname, это будетthis.name: Vue автоматически понимает, чтоthisотносится к этому объекту.

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

б) Обработка событий:
Еще одна замечательная вещь в Vue.js - то, как легко он обрабатывает такие события, какclickа такжеkeyup, Допустим, вы хотите, чтобы пользователь редактировал возраст, используя две кнопки.

Внутри файла JavaScript методыaddа такжеsubtractнаписаны:

Приведенный выше код будет увеличивать или уменьшать возраст при нажатии и динамически показывать его пользователю без перезагрузки страницы. Другие события могут быть@keyup,@dblclick, @mousemoveи т.п.
Если вы хотите сделать ярлык для перемещения между различнымиdivsиспользуя скажемn, вы можете использовать@keyup.78чтобы захватить это событие и направить пользователя к вашей функции JavaScript.

в) Использование v-for и v-if для циклов и условных выражений:

Скажем, у пользователя есть еще одно свойствоfavoritesв объекте данных. Имеет массив данных[“Batman”, “Spider-Man”, “Iron-Man”, “Black Panther”], Мы можем использовать<div v-for="(fav, index) in favorites"><h4>{{ fav }} </h4><div>Это позволит HTML-коду отображать список элементов один за другим. По аналогии,v-ifможно использовать для проверки условий и наличия значения вdataобъект.

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

<li v-for=’item in items’ :class=’{“active-item”: currentItem === item.id}’>

currentItemможно манипулировать вdataобъект и когда currentItem совпадает с идентификатором текущего элемента, он выделяется с помощью классаactive-item,

Я очень кратко остановился на концепциях, и эти примеры являются всего лишь трейлером о том, что может сделать Vue.js. На самом деле Vue.js имеет удивительную документацию, к которой вы можете обратиться.Вот,

III. Выводы для науки о данных:

В этом последнем разделе мы поговорим о ключевых выводах для науки о данных применительно к Vue.js.

  1. Вью js отлично подходит для написания клиентского кода для Full Stack Data Science:
    В то время как для разработки моделей полезно знать языки на стороне сервера, также полезно знать основы клиентской среды. Это позволяетнаука о стеках, Модели науки о данных могут стать дышащей и живой частью веб-сайтов благодаря взаимодействию между серверной стороной и клиентским кодом. Vue.js действительно сияет в разработке кода на стороне клиента.
  2. Vue.js позволяет быстро XHR-запросы на отправку данных обратно на сервер:
    Собрав данные от пользователя в браузере, Vue позволяет быстро XHR-запросы на отправку данных обратно на сервер с помощью POST-запроса. Внутри метода экземпляра Vue вы можете отправить данные обратно на сервер, используя:this.$http.post(‘/post_url’, JSON.stringify(this.data))Вам просто нужно добавитьvue-resourceбиблиотека внутри тега HTML-сценария - вы можете сделать это с помощьюCDN ссылка,
  3. Vue.js отлично подходит для людей, уже знакомых с HTML:
    Vue позволяет редактировать веб-страницу с использованием HTML, с которым многие ученые-исследователи уже знакомы. Vue маленький, масштабируемый и интуитивно понятный.

Некоторые из веб-сайтов, уже использующих Vue.js, - это Alibaba, Xiaomi, Gitlab, Reuters и Adobe. Вокруг Vue много настоящего волнения, и, изучив его и использовав в проекте, легко понять, почему.

Отличные ресурсы для изучения Vue:
1)Youtube Ninja: видео-сериал на Youtubeодин из самых лучших в интернете
2)Vue.js документациядействительно чисто и хорошо написано
3)устрашающий-вюGithub Page со ссылками на несколько проектов, ресурсов и сообществ по всему миру

Надеюсь, вам понравится мир Vue и науки о данных!

Постскриптум Я создаю НОВЫЙ КУРС на аналогичные темы под названием
«Обзор методов понимания запросов»
,
Этот курс будет охватывать методы поиска информации, интеллектуальный анализ текста, советы и рекомендации по пониманию запросов, способы повышения точности, отзыв и клики пользователей. Пожалуйста, зарегистрируйтесьВотесли ты заинтересован! Это проявление интереса позволит мне расставить приоритеты и построить курс.

Мой новый курс: обзор методов понимания запросов

Если у вас есть какие-либо вопросы, напишите мне на мойПрофиль LinkedInили отправьте мне письмо на [email protected] Спасибо за чтение!

Оригинальная статья

Footer decor

© www.machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map