Идя Meta: Как я использовал Vue.js, чтобы построить маленькую викторину о Vue.js

Автор оригинала: Olga Filipova.

Этот пост о Vue.js, разработка программного обеспечения и образования. Вы получите некоторые философские размышления о том, как быстро мир меняется и как образование должно приспосаться к нему. Вы также получите практическое введение в Vue.js. После того, как вы закончите прочитать этот пост, вы сможете сразу использовать Vue.js и строить реактивные интерфейсы прямо сейчас. Готовый? Идти!

Оглавление

Кто я? Почему мне все равно? Почему vue.js? Потому что это все о реактивности Потому что это о простых в использовании директивы Потому что речь идет о многоразовых компонентах Потому что это о простоте Пост скриптум

Кто я?

Меня зовут Ольга Филипова, и я инженер-программист, опубликовал автор, жену, мать и любовник образования. Я родился в Украине, который во время моего рождения, по-прежнему принадлежал Советскому Союзу (если честно, я счастлив, что это больше нет).

В возрасте 20 лет я переехал в Солнечную Португалию, где я провел 13 счастливых лет. Я изучал компьютерную науку в Университете Коимбры, одной из старых университетов в Европе, что одновременно сохраняет свои старые традиции и движется вперед с новейшими тенденциями и технологиями. После окончания я работал в стартапе под названием Feedzai в течение 6 лет.

Теперь я живу в Берлине и работаю в качестве инженера SEVING Software на Сфера встречи Отказ Я также соучредитель амбициозного образовательного проекта, основанного на Украине, называемый Edera Отказ

Как большая часть Edera Team Я глубоко заботу о разработке и образовании программного обеспечения.

Почему мне все равно?

У меня есть две большие страсти в моей жизни: разработка программного обеспечения и образование.

Давайте начнем с Образование Отказ Я один из тех людей, которые твердо верят, что лучшие инвестиции, которые вы можете сделать, исходит от обучения. Я также считаю, что весь процесс образования и обучения значительно меняется. С новыми технологиями наш образ жизни много изменился. Все, что нас окружает, должно быть адаптировано к новому процессу мышления. Люди теперь думают быстро, делают быстро, действуйте быстро. Вещи меняются быстро. Мы не можем позволить себе преподавать компьютерную науку в течение 5 лет больше, потому что через 5 лет все, что вы узнали, станет устаревшим. Конечно, есть некоторые солидные принципы, которые образуют основу и должны потребоваться некоторое время для изучения. Таким образом, система образования теперь должна следовать некоторым гибридным подходам. И это должно быть весело.

Вот почему мы создали Edera – доказать, что обучение на самом деле весело. Мы хотели доказать, что вы можете узнать, даже если вы думаете, что вы просто играете в игру. Мы хотели изменить всю систему. В течение 3 лет работы в промышленности в области образования мы разработали онлайн-курсы, внедрили смешанное обучение в украинских школах и создали интерактивные онлайн-книги с интегрированными викторами. Мы работали с различными организациями и организациями и построили сильное понимание когнитивных процессов, которые срабатывают при использовании определенных методов преподавания.

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

Это приводит нас ко второму, что мне все равно о: Разработка программного обеспечения Отказ

Я работаю в качестве интерфейса программного обеспечения почти 8 лет. За последние 8 лет я видел огромный прогресс в веб-разработке. Возможности, в которых предусмотрены существующие рамки и инструменты, являются страшными. Простота построения адаптивных прогрессивных приложений удивительно. С этим сказанным, сложность выбора правильных инструментов в разных случаях увеличивается на час. Сообщество с открытым исходным кодом растет и постоянно работает над новыми инструментами, проектами, библиотеками, карканами и многое другому. Это почти невозможно сделать выбор. Где я должен развернуть? AWS ? Heroku ? Firebase ? Просто Гит и cronjob + скрипт? Как насчет решений CI? И база данных? Эластичный поиск ? Graphql ? А как насчет шаблона? Простой HTML не звучит так хипстер, должен ли я использовать Джейд ? Руль ? Jsx ? Должен ли я даже говорить о Модульные бундалы и Менеджеры пакетов ?

Вернувшись в те дни, когда я писал свой главный диссертацию, я включал раздел под названием «Состояние искусства», где для каждой выбранной технологии я представил таблицу сравнения существующих инструментов для конкретной цели. У меня только был 3 вещи Для сравнения в разделе «Сравнитель баз данных». Если бы мне пришлось снова написать этот раздел для моего мастера диссертации сегодня, я бы предпочел просто отказаться от степени!

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

Почему vue.js?

Когда я работал на Feedzai В Португалии очень сложная новая функция появилась один раз. Нам пришлось построить довольно сложное доказательство концептуального прототипа в очень короткое время. Мы использовали Backbone.js в интернет-конце, что оказалось ненадежной. Нам не нужна ни одной структуры MVC; Все, что нам нужно было построить просмотр слоя с большим количеством подобных элементов и предметов в нем. Вот как мы обнаружили Vue.js Отказ Оказалось, что оказалось довольно хорошая кривая обучения и была полностью адекватной для наших потребностей.

Его система многоразовых компонентов помогла нам избежать повторяющегося кода, позволила нам работать параллельно на разных частях системы, а затем легко приклеить их вместе. Я любил использовать vue.js тогда и продолжил использовать его в небольшом проекте потом. Вот почему я перечислил Vue.js в качестве одной из рамок, с которыми я знаком с моим профилем LinkedIn. Может быть, поэтому Packt Publishing связался со мной и спросил, будет ли я заинтересован в написании книги о Vue.js. Я колебался, потому что я не думал, что я был Vue.js Guru.

Фото от Vueconf2017, молния говорить “Как я написал книгу о vue.js”

Однако я также понял, что никто не по-настоящему гуру во всем, и я, вероятно, должен попробовать. Оказалось удивительным опытом – вот книга, если вы заинтересованы: Изучение Vue.js 2 Отказ В настоящее время я пишу вторую книгу под названием Web Development с Bootstrap и Vue.js Отказ Я наслаждаюсь процессом написания по нескольким причинам:

• Во-первых, подход состоит в том, чтобы разработать приложение с нуля до его развертывания. Приложение, которое мы строили в то время, когда книга была написана, это то, что я всегда хотел построить, но никогда не успел (это таймер Pomodoro с встроенным офисным тренировками)
• Во-вторых, он интегрируется с FireBase Back-End и получается, отлично и легко в использовании
• В-третьих, и самое главное, Vue.js прост, весело и здорово использовать! Документация отличная, сообщество потрясающее, кривая обучения гладкая, а процесс веб-разработки становится таким приятным!

Итак, опять же, почему Vue.js?

• Легко начать. Нет необходимости устанавливать весь NPM на вашем компьютере. Просто скачайте vue.js, вставьте в

  Потому что это о простых в использовании директивы

  Vue.js поставляется с большим количеством простых для понимания и простых в использовании директивы. V-bind, вероятно, один из самых важных. Это позволяет привязать почти все - атрибуты, классы, свойства и т. Д. Например, привязываем успех классов в правильный вариант и опасность класса для неправильного опциона. Для этого я введем еще один элемент реактивных данных, называемых корректировка Отказ Я связываю его с цифровым входом в вопросе о вопросе тесности:

  Correct option
  
  

  Тогда я определяю свои классы так же просто следующим образом:

  .success {
    border: 1px solid green;
  }
  .danger {
    border: 1px solid red;
  }
  

  Теперь, используя директиву V-bind: класс Я свяжу эти классы к соответствующим кнопкам подключения соответственно выбранным значением.

  На самом деле, а не писать V-bind: класс Вы можете просто написать : класс Отказ

   {{option1}}
  

  Если вы сделаете то же самое для варианта 2, вы получите что-то подобное:

  

  Это на самом деле не кажется правильным, потому что мы, вероятно, только хотели бы, чтобы варианты были выделены после того, как они были выбраны. Ну, просто добавьте новый атрибут, скажем, allownegalue И свяжите его с групповым значением радиопередачи. Затем слегка измените состояние для классов, добавив условие для allownegalue , который определяется.

  Это было хорошо с двумя вариантами, но что, если у нас было 20 разных вариантов? Можете ли вы представить себе рендеринг всех этих материалов для каждого из вариантов? Вот почему есть другая приятная директива под названием V-для Отказ Эта директива позволяет нам избежать писать повторяющийся код. Давайте передам наши варианты в массив и используем этот массив в пределах V-для Директива:

  new Vue({
    el: '#app',
    data: {
      question: '',
      options: [{text: ''}, {text: ''}],
      correctOption: 0,
      picked: ''
    }
  })
  

  V-для Атрибут довольно прост в использовании. Если у вас есть список предметов, вы просто используете его в своем шаблоне, как это:

  
    
  {{ item }}
  
  

  Товар не обязательно строка. Это может быть число, массив или объект. В нашем случае вариантов у нас есть список объектов. И мы можем легко показать это так:

   {{option.text}}
  

  Если вам нужно получить доступ к индексу списка, вы можете использовать V-для следующим образом:

  {{ item }} {{index}}
  

  Таким образом, в нашем случае отображать варианты, которые будут заполнены, мы сделаем что-то подобное:

  
    Option {{index}}
    
  
  

  Мы бросили правильный/неверный стиль сейчас, но мы вернемся к ним в сек!

  Потому что речь идет о многоразовых компонентах

  Зная V-для Атрибут дает нам много мощности. Теперь мы можем сделать несколько вариантов и даже несколько вопросов. Мы можем повторно использовать вопросы на разных страницах - одна страница для инструктора курса и еще один для студента. Данные реактивны, поэтому мы изменили его в одном месте, а другой будет обновлен и может быть повторно использован в каком-то другом месте, что так здорово. Но ... всегда есть «но», верно? Разве это не утомительно и расстраивает, чтобы всегда писать HTML-код для оказания наших вопросов? Даже с V-для Атрибут Это может стать беспорядок, чтобы всегда переписать HTML во всех местах, которые нам нужны.

  Большая и отличная вещь о VUE заключается в том, что он предлагает хороший и простой способ определить и использовать компоненты. Например, мы можем легко извлечь наш вопрос в компонент:

  var question = {
    template: `
      
  
        
  {{question}}
        
           {{option.text}}
        
      
    `,
    props: ['question', 'options']
  };
  

  А затем использовать его в нашем основном VUE-приложении:

  new Vue({
    el: '#app',
    data: {
      question: '',
      options: [{text: ''}, {text: ''}],
      correctOption: 0,
      picked: ''
    },
    components: {
      question
    }
  })
  

  А затем вместо того, чтобы использовать фактическую разметку, просто вызываю Вопрос:| Тег и передайте необходимые свойства ( Вопрос и Варианты ) к нему:

  
    
  Questions
      
    
  
    <...>
  
  

  Это оно!

  Потому что это о простоте

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

  jsfiddle

  Если вы предпочитаете более сложный способ создания сложных приложений (например, с использованием погрузчиков WebPack, имеющие блок и тесты в End2end), просто используйте Vue-Cli С шаблоном WebPack для инициализации вашего приложения и начните сразу использование одно файловых компонентов!

  # install vue-cli
  $ npm install --global vue-cli
  # create a new project
  $ vue init webpack my-awesome-project
  # install dependencies
  $ cd my-awesome-project
  $ npm install
  $ npm run dev
  

  Я действительно надеюсь, что вы правильно ответили на первый вопрос о викторе:

  

  Пост скриптум

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

  Платформа позволит пользователям доступа к этим курсам не только для онлайн-образования, но и для смешанного и оффлайн обучения. Я бы построил эту платформу с Vue.js и новейшие тенденции в разработке веб-приложений прогрессирования. Если вы читаете это и готов помочь со советом или опытом или даже инвестициями, бросьте мне сообщение!