Vue.js введение для людей, которые знают достаточно JQuery, чтобы получить

Автор оригинала: FreeCodeCamp Community Member.

Мэттом Ротенберг

У меня были отношения ненависти в любви с JavaScript на годы.

Я познакомился с языком в качестве любимой взбиваемой собаки дизайна и развития, jquery Отказ Видите ли, в то время я начал изучать JavaScript, как «дизайнерские коды, которые работают», работа с JQuery был волшебный опыт. Я мог бы сделать модалы Fadein и Fadeout Отказ С сторонней библиотекой я мог бы добавить прокрутку параллакса в мой портфолио только одним вызовом функций. Почти все, что я мог бы мечтать о капсулировании в Одноместный, ~ 100 КБ файл …

А потом Угловой вышел из. У меня были нет выбор Но повторить все свой портфель с рамками. А потом Реагировать вышел из. У меня были нет выбор Но чтобы повторить весь мой портфолио с библиотекой. А потом Vue.js вышел из. У меня были нет выбор Но повторить все свой портфель с библиотекой … Вы видите, где это происходит.

Все шутит в сторону, мне очень понравилось завязать свои джавасписки через строительные вещи здесь и там с этими различными рамками и библиотеками. Я прочитал бесчисленные статьи и учебные пособия в процессе, но никто не застрял со мной больше, чем кусочек Шу Уесуги, « Reags.js Введение для людей, которые знают достаточно jQuery, чтобы получить ».

Шу принимает читателей – кто предполагается иметь какой-то уровень владения принципами JavaScript и jQuery – в путешествии по миру реагирования, поскольку они строят клону компонента Twitter «Compose Tweet».

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

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

Что мы строите

Большинство из нас Tweet (некоторые более распространены, чем другие). Таким образом, мы, вероятно, знакомы с компонентом пользовательского интерфейса на скриншоте ниже.

Поверьте, или нет, этот компонент UI – отличный пример того, как Vue (и реагирует, согласно Shu) может улучшить вашу жизнь как разработчик JavaScript/JQuery. Элементы этого компонента, который мы сосредоточимся на строительстве сегодня:

EA> Где пользователи могут ввести свой твит
<Прицвета ON> Это включено/отключено как функция того, как долго Tweet
Счетчик, который указывает, сколько символов (из 140) остаются, и меняет цвет, чтобы предупредить пользователя этого предела
Значок камеры, который при нажатии, позволяет пользователям прикреплять фотографии к их Tweet
Список фотографий, которые были прикреплены
Кнопка (на каждую фотографию), чтобы удалить ее из Tweet

Если вы застряли

Если в любой момент вы попадаете на то, что сбивают с толку или плохо объяснили, не стесняйтесь твитнуть мне на @mattrothenberg Отказ Имейте в виду, как вы читаете эту статью: это не так, то это определенно меня.

Давайте начнем.

Как мы строим это

Сегодня мы будем использовать Кодепен Чтобы построить наш компонент «Составить Tweet». Для непосвященного, Codepen – это онлайн-редактор HTML/CSS/JavaScript, который похож на Jsbin или Jsfiddle Отказ Для каждого шага я встроен кодепен с соответствующим кодом.

Шаг 1: Леса проекта

Первое, что нам нужно сделать, прежде чем писать любой JavaScript, это написать разметку для нашего компонента «Compose Tweet». Сегодня мы будем использовать Тахионы Для почти всех наших стилистических потребностей (так что нам не нужно писать посторонние CSS, и может сосредоточиться на разметке и JavaScript).

Я бегаю с предположением, что вы красивые CSS Savvy, поэтому я не буду тратить время, прогуливаясь к вам через подход тахионов к стилю (TL; DR так стиль, много классов, очень функционально).

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

Со всем на месте, давайте начнем на какой-то функции.

Шаг 2: Реализация первой функции – кнопка Tweet должна быть изначально отключена

Описание функции : Отключите кнопку Blue Tweet, пока пользователь не будет введен хотя бы один символ в Textarea Отказ

Первые вещи сначала, давайте настроим наш экземпляр Vue. Как уже упоминалось выше, Vue завоевал сердца и умы разработчиков своей простотой установки и простоты использования. Мы можем построить экземпляр VUE со следующим кодом.

new Vue({  el: '#twitterVue',  data: {    tweet: ''  },  computed: {    tweetIsEmpty: function() {      return this.tweet.length === 0;    }  }})

Позвольте мне объяснить, что происходит здесь –

Эль Относится к элементу DOM, к которому мы присоединяем наш экземпляр Vue. Это должно быть похоже на создание плагина jQuery, пройдя в данном селекторе, будь то имя класса или идентификатор.
данные является объектом, который описывает модель данных или состояние или состояние. Мы можем получить доступ к атрибутам, указанным в этой модели, как в нашем HTML – через специальный синтаксис в курсовой сковороде {{Tweet}} – и внутри самого экземпляра (подсказка, посмотрите на тело Tweetisemty Функция)
вычисляется Является ли объектом, который описывает, как вы можете догадаться, вычисляемые свойства на основе нашей модели данных. Вместо добавления логики к нашему HTML рекомендуется инкапсулировать это состояние состояния (или любое полученное значение, для этого) через функции, определенные на вычисляется Ключ нашего экземпляра Vue.

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

Мы добавили ID Twittervue на внешнюю Div Так что мы могли бы построить наш экземпляр Vue.

...

2. Мы добавили V-модель Директива к нашему Textarea тем самым создавая Двусторонняя переплета между входом пользователей и моделью данных нашего экземпляра. Теперь в любое время пользовательские типы в Textarea , Tweet Атрибут в модели данных нашего экземпляра автоматически обновляется.

3. Мы добавили : отключено атрибут нашему кнопка Отказ Толстая кишка, предшествующая отключено обозначает, что мы хотели бы Оценить Содержание внутри цитаты как выражение JavaScript. Если бы мы пропустили толстую кишку, содержание будет рассматриваться как строка. Вы также отметите, что мы добавили несколько строк CSS, чтобы дать кнопку отключенного отключения отличного визуального стиля.

...

button[disabled] {  cursor: not-allowed;  opacity: .5;}

4. Мы также добавили компьютерное свойство в нашем случае под названием Tweetisempty Отказ Обратите внимание, что это свойство на самом деле является Функция Это возвращает логическое значение, основанное на длине нашей модели данных Tweet атрибут. Vue делает его мертвым простым для доступа к вашей модели данных как в HTML (как показано выше), так и в самом экземпляре. Благодаря магии двусторонней передачи данных, эта функция оценивается, когда значение Tweet обновляется. Когда функция оценивает на правда Наша кнопка отключена и наоборот.

tweetIsEmpty: function() {  return this.tweet.length === 0;}

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

The value of tweet is: {{tweet}} 
The value of <;strong>tweetIsEmptyis: {{ tweetIsEmpty}}

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

Шаг 3: внедрить вторую функцию – показать количество оставшихся символов

Описание функции : В качестве типов пользователей показывают количество оставшихся символов (из 140) в Tweet. Если пользователь ввел более 140 символов, отключите синюю кнопку Tweet.

До сих пор мы узнали о двусторонних передачах данных и вычисленных свойствах, концепциях, которые находятся в самом ядре VUE. Это наш счастливый день, потому что мы можем использовать эти концепции, чтобы построить нашу следующую функцию: показывать пользователи, сколько символов (из 140) остаются, и отключив кнопку, если этот предел затменяется.

Еще раз, я найду вам через JavaScript, так и изменения HTML, необходимые для реализации этой функции.

В нашем JavaScript мы сделали несколько вещей.

В качестве меры у хозяйства мы перечислили максимальную длину Tweet (140 символов) в качестве константы, Max_tweet_length Отказ

const MAX_TWEET_LENGTH = 140;

2. Мы добавили еще одно компьютерное свойство, Персонажируют , который динамически возвращает разницу между 140 и длиной введенного пользователем Tweet.

charactersRemaining: function() {  return MAX_TWEET_LENGTH - this.tweet.length;}

3. Мы переименованы в старое Tweetisempty недвижимость на TweetisoutofRange и обновил логику функции соответственно. Обратите внимание, как мы используем вычисленные Персонажируют Свойство, чтобы вывести это значение. HOORAY для повторного использования кода!

tweetIsOutOfRange: function() {  return this.charactersRemaining == MAX_TWEET_LENGTH       || this.charactersRemaining < 0; }

На HTML-стороне вещей нам нужно только сделать несколько изменений, благодаря возможному связыванию двусторонних данных Vuue.

  {{ charactersRemaining }}

Для визуальных учащихся там, посмотрите магию:

Шаг 4: Реализуйте третью особенность: условный стиль «Остальные символы» индикатора

Описание функции: При составлении твита, цвет индикатора «Остальные символы» должен измениться на темно-красный, когда остаются только двадцать символов, и остаются светлыми красными, когда остаются десятью или меньше.

Манипулирование стилем или классом элемента может быть громоздким с jQuery, а Vue предлагает гораздо более чистый способ сделать это. Подход Vue чувствует себя более декларативным, в том, что вы описываете Как Вы хотите что-то стиль, чтобы изменить (на основе, например, на данном состоянии), и вы позволяете Vue сделать тяжелый подъем.

В контексте этой функции индикатор наших «Остальные символы» имеет два таких состояния, а соответствующий класс CSS для каждого.

Когда между десятью и двадцатью персонажей остаются, индикатор должен иметь темно-красный класс
Когда остаются менее десяти символов, индикатор должен иметь Светло-красный класс

К настоящему времени ваш Vue мозг должен кричать «Вычисленные свойства!» Итак, давайте обязните этот мозг и проводят эти свойства.

underTwentyMark: function() {  return this.charactersRemaining <= 20     && this.charactersRemaining > 10;  },underTenMark: function() {  return this.charactersRemaining <= 10;}

С нашей логикой на месте давайте посмотрим на один из способов, которыми Vue обрабатывает условный стиль: V-bind: класс Директива. Эта директива ожидает объекта, ключевые ключи которых являются классами CSS, и значения которых являются соответствующими вычисленными свойствами.

{ 'dark-red': underTwentyMark, 'light-red': underTenMark }

Добавляя директиву к промежуток Тег, который включает в себя наши «Оставшиеся персонажи», мы завершили нашу функцию.

  {{ charactersRemaining }}

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

Шаг 5: Реализуйте четвертую функцию: «Прикрепите фото» UX

Описание функции: Разрешить пользователям прикрепить одну фотографию к их Tweet через диалоговое окно Picker Picker. Когда фотография была загружена, покажи это под Textarea и позвольте пользователям удалить вложение, нажав изображение

Справедливое предупреждение: есть много происходит в этом разделе. Красота, несмотря на эту функцию, добавляя значительную функциональность, нам не придется писать этот большой код. Итак, давайте начнем, нарушая дизайн взаимодействия на шаги.

Пользователь нажимает кнопку «Добавить фотографию»
Пользователь видит диалоговое окно Picker файлов и может выбрать один Фото загружать
При выборе фотографии коробка появляется под Textarea с выбранной фотографией внутри
Пользователь нажимает круговой Х кнопка, чтобы удалить фото
Пользователь видит начальное состояние с шага 1

До этого момента мы еще не сделали никакой обработки событий (прослушивание кликов кнопок, изменения ввода и т. Д.). Как вы могли бы ожидать, Vue позволяет легко справиться с такими событиями, предоставляя нам V-на Директива (@ для коротких). Передав метод в качестве значения этой директивы, мы можем эффективно прослушать события DOM и запустить JavaScript, когда они срабатывают.

Перед погружением в нашу функцию работать, некоторые быстрые противопожарные практики.

Обработка событий так же просто, как добавление @ yclick Директива к данной кнопке и добавление соответствующего метода для Методы ключ на нашем экземпляре Vue.

Вернуться к нашей функции Работа … На этом этапе наша разметка и JavaScript изменились следующими способами:

Мы добавили кнопка с @ yclick Директива. Когда пользователь нажимает эту кнопку, Triggerfileupload Метод будет вызван.

Итак, в нашем JavaScript, давайте добавим Методы Ключ к нашему экземпляру Vue с указанным методом внутри, а также атрибут данных для нашей фотографии.

data: { photo: null},computed: {},methods: {  triggerFileUpload: function() {    this.$refs.photoUpload.click(); // LOLWUT?  },}

2. Новеренно сложно Стиль HTML5 входы файла Отказ Один обходной путь включает в себя поставить вход в доме и скрывая его с помощью CSS. Для того, чтобы браузер открывает собственный сборщик файлов, это вход Должен нажал. Как щелкнутся, и как клиент обрабатывает то, что, однако, загрузка пользователей, является другим вопросом.

В нашей разметке мы добавили один такой вход и скрыть это со специальным Скрыть класс. Мы также добавили несколько других атрибутов, которые стоит позвонить:

Ref Атрибут используется для регистрации Ссылка к данному элементу DOM. Учитывая эту ссылку, мы можем получить доступ к элементу DOM в нашем коде JavaScript с Это. $ refs.photoupload Отказ Это означает, что мы можем программно запустить A Нажмите () Событие на этом элементе, тем самым окружающая задачу, описанную выше.
Нажав на вход один; Обработка файла, что загрузка пользователей является другой. К счастью, Vue позволяет нам прикрепить обработчик к событию изменения ввода через @Change Директива. Способ, который мы передаем к этой директиве, будут вызваться после того, как пользователь выбирает файл из сборщика файла. Этот метод, РулевыеФотоуплеа D , довольно просто

handlePhotoUpload: function(e) {  var self = this;  var reader = new FileReader();        reader.onload = function(e) {    // Set that base 64 string to our data model's 'photo' key    self.photo = (e.target.result);  }  // Read upload file as base 64  string  reader.readAsDataURL(e.target.files[0]); }

Сделайте глубокий вдох, потому что мы почти закончили с этой функцией!

Как только пользователь загрузил фотографию, нам нужно отображать коробку под Textarea с выбранной фотографией внутри. Так же, как условный стиль элементов – это ветер с Vue, так что тоже условно рендеринг или отображение элементов. Вы заметите, что в нашем HTML мы добавили следующую разметку под Textarea Отказ

Vue предлагает горстку шаблонов ( V-if , V-шоу, v-else и т. Д.), чтобы помочь вам показать и скрыть контент условно. Когда экспрессия JavaScript прошла к этой директиве, оценивает true, элемент отображается, и наоборот.

В нашем случае мы добавили V-если Заявление, которое оценивает вычисленное свойство photohasbeenuploaded Отказ

photoHasBeenUploaded: function() {  return this.photo !== null;}

Когда эта функция оценивает true – когда ключ фото нашей модели данных не равен нулю – весь Div получает. Воила!

И внутри этого Div Мы оказываем два элемента:

Изображение, которое было прикреплено, передавая содержимое нашей модели данных Фото Ключ к Vue V-bind: SRC директива
Кнопка удаления, которая имеет другой пример @ yclick Обработчик, этот конкретный вызывающий функцию «удаляет» фотографию, установив нашу модель данных Фото ключ к нулю.

removePhoto: function() {  this.photo = null;}

Мы почти на месте.

Шаг 6: Коррекция, пользователь может прикрепить «Фотографии»

Итак, мы можем эффективно справиться с пользователем прикреплением один Фото в твит, но что, если она хотела бы загрузить много фотографий?

К настоящему времени вы должны думать что-то повлиять на эффект: «Я предполагаю, что единственное существенное изменение здесь можно показать несколько изображения в этой коробке, которая выглядит условно под Textarea, учитывая, что мы уже подключались к нашему событию обработчики … “И вы правы! Давайте посмотрим на шаги, которые нам нужно следовать

Нам нужно обновить нашу модель данных, меняя Фото к Фотографии Новый ключ является массив строки Base64 (не единая строка Base64)

data: {  photos: []},

2. Нам нужно обновить нашу компьютерную недвижимость photohasbeenuploaded проверить по отношению к продолжительности нашего нового Фотографии ключ, который сейчас является массивом.

photoHasBeenUploaded: function() {  return this.photos.length > 0;}

3. Нам нужно обновить наш вход @Change обработчик до петля За загруженные файлы и нажмите их на наш Фотографии ключ.

handlePhotoUpload: function(e) {  var self = this;  var files = e.target.files;

  for(let i = 0; i < files.length; i++) {    let reader = new FileReader();

    reader.onloadend = function(evt) {      self.photos.push(evt.target.result);    }

    reader.readAsDataURL(files[i]);  }},

Однако на стороне HTML мы должны отправиться в новую территорию. Итализация данных и контент рендеринга с jQuery может быть громоздким.

var array = [1, 2, 3, 4, 5];var newHTML = [];for (var i = 0; i < array.length; i++) {    console.log('UGHHHHHH');    newHTML.push('' + array[i] + '');}$(".element").html(newHTML.join(""));

К счастью, Vue предлагает абстракцию за эту процедуру в соответствии с V-для Директива. Эта директива ожидает вас на обеспечить выражение в форме (вещь, индекс) в Collectionofthings , где Collectionofthings это исходный массив, вещь Имеется ли псевдоним для элемента массива, и индекс Является, ну, индекс этого элемента.

Прототипический пример может выглядеть так:

Где раньше у нас был единственный Рисунок Элемент для загрузки пользователя, у нас сейчас будет N Рисунок Теги, соответствующие длине Фотографии исходный массив.

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

Одно изменение, которое нам нужно сделать вращающиеся вокруг Removephoto Метод, который, прежде чем, установить единственный Фото Ключ в нашей модели данных в null Отказ Теперь, так как у нас есть N Количество фотографий, мы должны пройти показатель элемента к Removephoto метод и потяните этот элемент из массива.

removePhoto: function(index) {  this.photos.splice(index, 1);}

Шаг 7: Анимация + дополнительный кредит

В UI Twitter компонент «Compose Tweet» открывается в модальном. Для нашего Grand Finale я хотел бы применить все методы Vue, которые мы узнали до сих пор и введены еще один: Переходы Отказ

Слово осторожно, переходы – это огромный Тема в Vue Hand. Мы собираемся изучить и реализовать тонкий ломтик этой функциональности, а именно интеграцию 3-й партийной анимационной библиотеки, Скорость JS , с Vue.

В двух словах Vue предоставляет Переход Компонент, который позволяет добавлять анимацию ввода/выхода для элемента, содержащегося внутри, при условии, что элемент установлен для отображения условно, например, A V-если или V-шоу Директива.

В нашем примере мы приложили два метода, которые соответствуют двум событиям в жизненном цикле перехода: V-на: введите и V-на: уйти Отказ Таким образом, мы добавили эти определения метода к нашему экземпляру Vue, откладываем к скорости JS к FADE наш модаль и выходит.

methods: {  modalEnter: function(el, done) {    Velocity(el, 'fadeIn', { duration: 300, complete: done, display: 'flex' })  },  modalLeave: function(el, done) {    Velocity(el, 'fadeOut', { duration: 300, complete: done })  }}

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

data: {  modalShowing: false}

Теперь, когда мы хотим показать модал, все, что нам нужно сделать, это установить, что логический в правду!

И напишите метод, чтобы соответствовать.

hideModal: function() {  this.modalShowing = false;},showModal: function() {  this.modalShowing = true;},

С некоторыми хитростью CSS мы также прикрепили Нажмите Обработчик событий на фоне, поэтому пользователи могут скрыть модаль. Счет!

Заключение

Ну, я надеюсь, что это было не слишком больно (и что вы узнали вещь или два по пути). Мы только посмотрели на небольшой щеп, то, что важно предложить VUE, хотя, как уже упоминалось выше, эти концепции имеют решающее значение для разблокировки потенциала Vue.

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