Abr@X@bra.ru
Часть 1: Создание пользовательских компонентов с помощью Vue.js
Часть 1: Создание пользовательских компонентов с помощью Vue.js

Часть 1: Создание пользовательских компонентов с помощью Vue.js

16.09.2017
228

Добро пожаловать в серию постов по созданию пользовательских компонентов в Vue.js 2.0. Vue.js предоставляет прекрасную возможность для создания богатых пользовательских компонентов. Vue-awesome, тому отличное подтверждение, с богатым списком созданных сообществом виджетов и элементов управления.

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

Что мы будем делать?

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

Шаблон

В этой серии постов, я буду использовать свою личную сборку, Abraxabra – boilerplate для профессиональной верстки сайтов. Вот подробное руководство как работать с данным boilerplate.  Вы же можете воспользоваться vue-cli или любым другим boilerplate на свое усмотрение. Ссылка на репозиторий с готовой структурой для дальнейшей работы.

Структура

Main.js

import Vue from 'vue';
import router from '../vue/router';

import Filters from '../vue/components/Filters.vue'


new Vue({
    el: '#content',
    components: {
        'app-filters': Filters
    },
    router
});

Filters.vue

<template>
    <div>
        <h1>Hello</h1>
    </div>
</template>

<script>
    export default {
        components: {}
    }
</script>

<style lang="sass">

</style>

Часть - 2 (скоро)

Часть - 3 (скоро)

Делайте то, что вы любите и любите то, что вы делаете!

Подпишись на автора, чтобы не пропустить следующий пост.





Vue.js
Читайте также:
Vue.js наступает на пятки React и Angular

Vue.js наступает на пятки React и Angular

Какая магия Vue.js заставляет его завоевывать сердца разработчиков? Давай выясним!
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать