Приятно приветствовать вас к тому, что я надеюсь, что будет серию учебных пособий о том, как создать реальную реальную приложение с использованием 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
Структура папки
Где…
- построить где варианты сборки для
{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 (
Несомненно
Ручная работа
Хорошо, достаточно разговоров; Пришло время построить первый компонент! Давайте попробуем построить один компонент, который использует большинство компонентов API.
Структура компонентов
Все Vue
Компоненты, которые мы собираемся написать, используйте следующую структуру:
HTML JS CSS
Это сделает нашу жизнь проще, поэтому вам не нужно открывать 3 разных файла, чтобы сделать простое изменение; Все живет в том же файле. Потрясающе, верно?
Давайте начнем с создания наших CodementOrcomPonent.vue
внутри SRC
Папка и скопировать/вставлять структуру App.vue
составная часть.
Добавление мопса (нефрита) Поскольку Vue.js потрясающий, просто добавляя Lang = "Джейд"
в Шаблон
тег нравится
сделает наш VUE компонент использовать нефтью. Вы можете прочитать больше в Одно файловые компоненты Отказ
Это оставит нас с КодаментаторКомпонтент
выглядит так:
.code-mentor-component h1 Hello Codementor People
Довольно просто, верно? Но Как мы используем его на App.Vue составная часть? Ответ – Компоненты: {}
Отказ Здесь мы собираемся использовать Компоненты
пространство имен.
Это в основном говорит компонент, какие компоненты использовать, так что идите в App.vue
и импортировать компонент и добавить Компоненты
объект:
Это затем использует компонент КодаментаторКомпонтент
:
div CodeMentorComponent
Если все работает нормально, вы должны увидеть это на экране:
Теперь давайте начнем делать несколько интересных вещей.
Мы начнем с создания простого счетчика внутри КодаментаторКомпонтент
компонент, для которого мы собираемся использовать данные
метод. Короче Это функция, которая возвращает {объект} Отказ Наше должен выглядеть так:
И его можно назвать внутри <Шаблон>
:
P Решенное значение: {{счетчик}}
Все еще довольно просто. Давайте создадим Формбуттон
Компонент внутри SRC/Forms/Button.Vue
Отказ Это должно выглядеть так:
button( @click="$emit('click')" ) {{ buttonText }}
На данный момент наша кнопка компонент будет выглядеть довольно простым, но давайте позже посмотрите на новые, добавленные здесь, $ 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"