Рубрики
Без рубрики

Создание приложения с Vue.js

Vue.js отлично и легко понять, но есть несколько вещей, которые вам нужно знать, прежде чем начать работу – читайте, чтобы узнать обо всех основах, которые вам нужно знать!

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

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

Вот Репо

Для лучшей производительности кода я буду использовать:

  • Стилус для CSS
  • Мопс (перед нефритом) для HTML
  • ES6 для кода

Для начальной структуры проекта мы собираемся использовать Vue-Cli.

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

Установка VUE-CLI

Просто запустить NPM Установить -G Vue-CLI Отказ

Создание проекта

Этот проект живет внутри Это репо Отказ

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

? Project name vue-app
? Project description VueJS Playground app
? Author ethaan 
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Структура папки

Выстрел на экране 2017-06-08 в 11.39.16 PM.PNG

Где…

  • построить где варианты сборки для {dev |. Prod} жить
  • config . Содержит вещами, связанные с Webpack и ENV для разработки
  • SRC где все действия произойдут; Это где наше фронт-концевое приложение будет жить
  • Статический Есть какие-либо изображения или статические файлы
  • … другие babel, readme, редактор, index.html и другие файлы

Начиная приложение

Мы собираемся использовать пряжа Потому что мы хипстеры и причудливые люди (но вы можете использовать NPM, если хотите)

пряжа && пряжа dev

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

 DONE  Compiled successfully in 3103ms                                             
> Listening at http://localhost:8080

Написание наших первых vue.js компонент

Во-первых, начните с удаления по умолчанию Hello.vue Компонент бегущая RM SRC/Компоненты/Hello.vue

и убедитесь, что src/app.vue Похоже на следующее:


 

 

О app.vue.vue.

Vue, как реагировать, довольно прост в том, как он изначально представлен в нашем HTML. Если вы взгляните на SRC/Main.js , игнорируя комментарии, он просто содержит 8 строк кода (если вы пришли от реагирования мира, вы можете думать об этом как

Reactom.runder (,document.getelementbyiD('root ')); Несомненно

Ручная работа

Хорошо, достаточно разговоров; Пришло время построить первый компонент! Давайте попробуем построить один компонент, который использует большинство компонентов API.

Структура компонентов

Все Vue Компоненты, которые мы собираемся написать, используйте следующую структуру:

HTML
JS
CSS

Это сделает нашу жизнь проще, поэтому вам не нужно открывать 3 разных файла, чтобы сделать простое изменение; Все живет в том же файле. Потрясающе, верно?

Давайте начнем с создания наших CodementOrcomPonent.vue внутри SRC Папка и скопировать/вставлять структуру App.vue составная часть.

Добавление мопса (нефрита) Поскольку Vue.js потрясающий, просто добавляя Lang = "Джейд" в Шаблон тег нравится


сделает наш VUE компонент использовать нефтью. Вы можете прочитать больше в Одно файловые компоненты Отказ

Это оставит нас с КодаментаторКомпонтент выглядит так:


Довольно просто, верно? Но Как мы используем его на App.Vue составная часть? Ответ – Компоненты: {} Отказ Здесь мы собираемся использовать Компоненты пространство имен.

Это в основном говорит компонент, какие компоненты использовать, так что идите в App.vue и импортировать компонент и добавить Компоненты объект:


Это затем использует компонент КодаментаторКомпонтент :


Если все работает нормально, вы должны увидеть это на экране:

Снимок экрана 2017-06-09 в 12.22.33 AM.PNG

Теперь давайте начнем делать несколько интересных вещей.

Мы начнем с создания простого счетчика внутри КодаментаторКомпонтент компонент, для которого мы собираемся использовать данные метод. Короче Это функция, которая возвращает {объект} Отказ Наше должен выглядеть так:


И его можно назвать внутри <Шаблон> :

P Решенное значение: {{счетчик}}

Все еще довольно просто. Давайте создадим Формбуттон Компонент внутри SRC/Forms/Button.Vue Отказ Это должно выглядеть так:


 

На данный момент наша кнопка компонент будет выглядеть довольно простым, но давайте позже посмотрите на новые, добавленные здесь, $ Emit , @ yclick и Слот Отказ

@ yclick это просто сокращение для V-на Директива.

$ Emit В основном вызывает событие, которое вы ранее прикрепили к компоненту, поэтому мы можем начать думать о том, как будет называться этот компонент, может быть, что-то вроде Кнопка (@ Нажмите = "onclick") (Но не беспокойтесь об этом коде еще).

реквизит Этот объект представляет, что предпримет компонент, в данном случае buttontext , который, как ожидается, будет типа Строка Отказ Кроме того, мы используем по умолчанию быть Нажмите Отказ Есть другие варианты, чтобы пройти в реквизиты и способы их позвонить; Вы можете проверить их здесь Отказ

Давай продолжим…

Продолжайте и импортируйте компонент кнопки внутри КодаментаторКомпонтент , вот так:

Импорт Формбуттон из './forms/button'; и не забудьте добавить его в Компоненты объект:

Компоненты: {formbutton}, ,

Далее назовите это на <Шаблон> :

FormButton (ButtonText = “Sum”)

Вот как вы проходите реквизиты, но как насчет вычисленных значений или значений внутри данные объект? Просто, вы можете использовать V-bind Директива:

Во-первых, наш объект данных теперь выглядит так:

  data() {
    return {
      counter: 0,
      sumButtonText: 'sum',
    }
  }

Тогда наше Формбуттон Компонент называется:

Formbutton (v-bind: budlontext = “Sumbuttontext”)

Теперь давайте начнем какую-то реактивную работу. Мы хотим суммировать стоимость счетчик Каждый раз, когда кнопка нажала.

Чтобы сделать это, нам нужно наменять Методы :

  methods: {
    onClick() {
      this.counter = this.counter + 1;
    }
  },

Довольно просто, но подожди, наша кнопка все еще ничего не делает! Для этого нам нужно прикрепить метод в качестве события на компоненте, используя Shothand @ , нравиться:

Formbutton (@ click = “onclick”)

И БАМ, мы получили реактивный счетчик. Super Cool, верно? Мы еще не сделаны; Мы хотим играть с Vue, но что еще мы можем сделать? У нас все еще есть базовые директивы для использования.

Давайте попробуем веселые вещи: давайте Измените цвет счетчика в зависимости от счетчика Отказ Мы назовем это Уровни Так что давайте пойдем и создадим следующий объект на Отказ

const COLORS_BY_LEVEL = {
  normal: 'blue',
  danger: 'red',
  warning: 'yellow',
};

Для этого мы собираемся интегрировать вычисляется Свойство нашему компоненту, и это будет выглядеть так:

  computed: {
    levelColor() {
      const { counter } = this;
      let level = 'normal';
      if (counter > 3 && counter <= 8) level = 'warning';
      else if (counter >= 9) level = 'danger';
      return COLORS_BY_LEVEL[level];
    }
  },

Тогда просто назовите это на промежуток :

P (V-Bind: Style = {цвет: уровень leateColor} ) значение счетчика: {{счетчик}}

Здесь мы используем встроенный стиль, но вы также можете сделать V-Bin: Class = "Klass" и иметь Класс Компьютерный метод, который возвращает имя класса, которое вы хотите.

Вместо вычисляемого свойства мы можем определить ту же функцию, что и вместо этого метода. Что касается конечного результата, два подхода являются точно такими же. Однако разница заключается в том, что вычисленные свойства кэшируются на основе их зависимостей. Вычисленное свойство будет переоценить только тогда, когда некоторые его зависимости изменились. Это означает, что, если {Counter} не изменился, несколько доступов к вычисленному свойству {LevelColor} немедленно вернет ранее вычисленный результат без необходимости снова выполнять функцию.

От Вычисленные свойства и наблюдатели – основной пример Отказ

Это круто, верно? Давайте продолжим играть. Теперь мы добавим вторую Отдых кнопка и называй это так:

Formbutton (@ click = “onclick”)

НО ЧТО? Две кнопки делают точно такое же! Это означает, что мне нужно создать два разных метода для сумма Отдых ? Нет - вы можете позвонить Методы

Мы изменим наши кнопки, чтобы выглядеть так:

  FormButton(@click="onClick({ action: 'sum'})" v-bind:buttonText="sumButtonText")
  FormButton(@click="onClick({ action: 'rest'})" buttonText="rest")

и наше OnClick Метод выглядеть следующим образом:

  methods: {
    onClick({ action }) {
      this.counter = action === 'sum' ? this.counter + 1 : this.counter - 1;
    }
  },

И у нас еще есть больше вещей!

Давайте добавим больше вещей в компонент и используйте V-если Директива Больше здесь Отказ

Мы будем использовать ту же логику для уровней; Давайте покажем пользовательское сообщение (мы можем сделать это более чисто, используя компьютерный метод, а затем просто делать Message_by_level [Lebel] , но давайте использовать некоторые IFS).

Просто добавьте следующее:

  p(v-if="counter <= 3") HEY ALL OK
  p(v-else-if="counter > 3 && counter <= 8") HEY HEY HEY! EASY
  p(v-else) AAAAAAAA

Есть другая директива под названием V-шоу , и вы можете увидеть сравнение здесь Отказ

Теперь у вас есть некоторые IFS внутри компонентов, реактивных и работающих.

Давайте будем использовать последнюю директиву, V-для Больше здесь Отказ

Давайте. Добавьте восклицание (!) Для каждого положительного отчета.

Для этого просто добавьте следующее:

  .exclamations
    h1(v-for="num in counter") !

И не забывайте о стиле (давайте заставим их выглядеть круто)!


 

Стилус-погрузчики пришли уже поддерживаются Vue-CLI; Для более подробной информации посмотрите на Vue-app/build/utils.js Отказ

Vue, вы так просто.

Это это на сегодня! Надеюсь, что это было приятным Не волнуйтесь, больше придет. Мы будем интегрировать GraphQL, Express, маршрутизацию, Vuex (AKA Redux для Vue) и более интересными. «Мы хотим создать {inseriDeahere}», вы говорите – нет проблем! Мы можем сделать все, что вы все хотите. Если вы зудите, чтобы начать строить более крутые вещи, посмотрите на Этааан-Vuexpresso Отказ

Если вам понравился этот пост и хотите больше всего, пост в комментариях, что вы хотели бы увидеть дальше!

div(v-if="peopleWantsMore)
 ul
  li(v-for="posts on ethanVuePosts)
   Post(v-bind:post="post"