Изучаването на Vue.js за седем дни ще едно голямо предизвикателство за вас, но е напълно възможно. Отначало, може и да сте скептично настроени, но само след 2-3 дни ще сте на друго мнение.
Може би си мислите, че само фулстак дивелопърите са надарени със специална сила, която им позволява да вникнат във всеки един код. Е, сега ще ви докажем, че грешите. Както се казва: „Всичко е трудно, докато не знаеш как да го направиш.“
Преди да започнем е, много важно да разберете, че разликата между супер учещите и всички останали е, основно в начина, по който и двата типа хора учат. Колкото и клиширано да звучи, определянето на правилният начин на мислене, играе голяма роля за постигането на целта ви за по-малко време и усилия.
Тук пристъпваме към техническите и важни неща, свързани с Vue.js, като ще има няколко важни неща, които да се имат на предвид. Като начало, може да погледнете официалната документация на Veu.js или да изгледате някой видео урок, защото това ще ви спести много време за запознаване с основните понятия.
Както и да е, нека да преминем към точния план за действие, който препоръчваме, за да научите Vue.js за по-малко от седем дни. Все пак, имайте на предвид, че това е само ръководство, което ще ви даде списък с ключови фактори за успех, докато изучавате Vue.js, а не гаранция за успех.
Резултатът може да варира в зависимост от различни фактори като вашето ниво в програмирането, а в този случай, главно с JavaScript, HTML и CSS. Има два важни етапа, върху които трябва да се съсредоточите, ако искате да научите нещо по-бързо.
Първи етап – планиране и стратегия
Планът и стратегията, към които ще се придържате, ще играят голяма роля за това колко бързо можете да схванете всички свързани с Vue.js концепции и елементи.
- Създайте си учебен план.
Избирането на курс и преминаването директно в него е, една от често срещаните грешки, които допускаме, когато започваме да учим, нещо ново. Ако искате да избегнете този момент, сядайте и започнете с изграждането на учебен план. Това ще ви помогне да разберете и подредите всички неща, които се опитвате да научите. По-просто казано, учебният план е, персонализирано ръководство, основано на вашите собствени нужди.
Добре, до тук всичко това звучи добре, но как наистина да си създам учебен план? Не се притеснявайте, нека да преминем към него веднага.
За да изградите учебен план и, за да научите Vue.js, трябва да имате предвид три основни неща, за да можете да увеличите скоростта на обучението си.
Какво те кара да учиш?
Първото нещо, което трябва да направите, за да изградите учебен план е, да бъдете напълно честни относно това, което ви кара да научите. Това вътрешна или външна сила ли е?
Ако това е вътрешна сила, това означава, че имате истинска страст към интерфейса и вероятно сте напълно фокусирани върху овладяването на всеки детайл от рамката на Vue.js.
Външна мотивация означава, че я изучавате, защото компанията се нуждае от вас, за да я научите за входящ проект или защото това е тенденция или пък е модерна рамка и на вас ви се иска да се качите на този влак. И все пак не сте достатъчно заинтересовани да го научите.
Защо е толкова важно да знаете типа мотивация?
Това е просто. Ако сте наясно какъв е мотиваторът ви, вече ще знаете и какъв ще бъде резултатът от обучението ви. Така е, нали? С ясна представа какво ви кара да учите, сега можете да отделите време и енергия за това, което искате да постигнете.
2. Изградете учебна структура
Идеята зад изграждането на учебна структура е, да се намери най-бързият път за разбиране на дадена тема. По този начин ще ускорите разбирането си за това как работи Vue.js и всички концепции, свързани с него. При изграждането на учебната структура трябва да имате предвид две неща: концепции и факти.
Концепциите са всички основи и принципи за Vue.js, които трябва да разберете, докато фактът е всичко истинско, което трябва да запомните за него.
Концепции и факти, които да научите за Vue.js
- Каква е правилната версия, която да научите (към момента на писане)? Vue 2 или 3?;
- Какво е общ/популярен технологичен стек на приложение, базиран на Vue.js?;
- Запознайте се с най-често срещаните и използвани концепции Vue.js.
Факти и дилеми
Нека започнем, като поговорим за няколко неща, на които вероятно ще се натъкнете веднага след като започнете да изучавате екосистемата на Vue.js.
Каква е правилната версия на Vue, която да научите?
Най-вероятно това е въпросът, който всеки от вас си задава, щом е стигнал до идеята, че ще се учи Vue.js. Проучете и се потопете малко в тази тема, без да се притеснявате твърде много. Идеята е да бъде ясно защо избирате версия 2 или 3.
Какво е общ/популярен технологичен стек на приложение, базиран на Vue.js?
Знанието какво да научите е от решаващо значение за увеличаване на скоростта на обучението.
Трябва да имате представа какво е общ технически стек при създаването на Vue.js приложения, за да можете да отделите време и енергия за тези специфични елементи.
Ето общ стек Vue.js:
• Рамка: Vue 2/3;
• Маршрутизация: vue-рутер;
• Bundler: WebPack;
• UI комплект/рамка: UI на Element, Vuetify.;
• Управление на държавата: VueX;
Общи понятия
Сега, когато имате по-добро разбиране за правилната версия на Vue.js и стека, върху който искате да се съсредоточите е, време да преминете към основите, концепциите и уникалните неща, които принадлежат на Vue.js.
• Veu екземпляри: Всяко приложение Vue.js започва със създаване на нов екземпляр Vue.
• Данни и методи: Когато се създаде екземпляр на Vue, той добавя всички свойства, открити в обекта му към системата за реактивност на Vue.
• Куки за жизнен цикъл на инстанция (различни от куките за жизнен цикъл): Това е поредица от стъпки, които се изпълняват всеки път, когато се създаде екземпляр Vue (init, beforeCreate, създаден и т.н.).
• Куки за жизнения цикъл: Функции, които дават възможност на потребителите да добавят свой собствен код на определен етап (монтиран, актуализиран, унищожен и т.н.).
• Синтаксис на шаблон: Vue.js използва базиран на HTML синтаксис на шаблон, който ви позволява декларативно да обвързвате визуализирания DOM с данните на базовия екземпляр на Vue. Синтаксисът на шаблона включва интерполации, директиви и стенография (например v-bind, v-on).
• Изчислени свойства: Позволяват ви да работите със сложна логика и операции. Те са изчисления, които ще бъдат кеширани въз основа на техните зависимости.
• Наблюдатели: Позволяват ви да извършвате асинхронни или скъпи операции в отговор на промяна на данните. Те ви позволяват да проследявате всяко имущество и да реагирате на всяка промяна в него.
• Обвързване на клас и стил: Позволява ви да манипулирате класове и вграден стил. Можете да предавате данни, за да приложите конкретни класове или стилове.
• Условно изобразяване: Vue.js ви позволява да зададете дали да показвате или не блок, компонент или елемент, използвайки различни директиви, като v-if, v-else, v-show и v-for.
• Обработка на събития: Слушане на събития от DOM, манипулатори на събития, вградени манипулатори, модификатори на събития.
• Формулиране на въвеждане на формуляр: Използвайте директивата v-model, за да създадете двустранно свързване на данни при въвеждане на формуляр.
• Основни компоненти: Компонентите са екземпляри за повторно използване на Vue с име като <button-counter>.
• Предаване на данни към подчинени компоненти с реквизити: Реквизитите са персонализирани атрибути, които можете да регистрирате на компонент. Реквизитите, предадени на дъщерния компонент, се превръщат в свойства на този компонент.
Тези концепции са най-често срещаните или полезни, когато започнете с Vue.js.
3. Изберете правилните ресурси.
Изграждайки учебна структура, вие вече сте измислили най-бързия начин да научите Vue.js. Сега е време да проучим правилните ресурси и методи, които използват ефективните ученици. Инвестирането на 1-2 часа, за да подберете правилните ресурси е, нещо което ще ви спести много часове в четене и гледане на не ефективни източници.
- Като за начало, официалната документация на Vue.js, отнема между 3 и 6 часа. Предлагаме ви да започнете, като прочетете официалната документация на Vue.js. Тъй като за първи път използвате Vue.js, вероятно няма да можете да схванете и усвоите цялата информация. Не се претиснявайте, това е напълно, нормално.
- Изберете видео курс с висока оценка, като курсовете ще ви отнемат между 10 и 15 часа. Отново, на този етап от вашето обучение, не трябва да се притеснявате за всички елементи в курса. Видео курсът ще ви помогне да ускорите процеса на обучение. Това ще ви помогне да преодолеете разликата в разбирането, която сте имали, след като прочетете официалното ръководство на Vue.js. Целта на курса е да се разберат основите на Vue.js. Трябва да отнеме приблизително 10-15 ефективни часа. Докато правите това, опитайте се да използвате техниката Pomodoro, за да избегнете прегряване.
Предлагаме ви да запишете следните курсове Vue.js, като със Skillception.com ще откриете точните курсове за вас . Може да избирате, къде, кога и с кого да учите.
Примерни Курсове:
• Разработка с VueJS 2 или 3 (завършете Vue.js маршрутизатор и курс Vuex).
• Основи на Vue.js
Втори етап – изпълнение
В този момент имате правилното мислене, учебен план и правилните ресурси за разбиване на пътната карта на Vue.js. За да схванете колкото се може повече от света на Vue, трябва да следвате поредица от стъпки. Времето за изпълнение на плана, настъпи.
Имайте предвид, че всички следващи стъпки са необходими от ден 0 до ден 7.
Ако можете да обясните наученото на прост български език, няма съмнение, че сте постигнали две неща:
• Вие сте наясно с темата и нейните елементи. Не можете да обясните това, което не разбирате.
• Съхранявате това знание в дългосрочната си памет, а не в работната си памет.
За всякакви объркващи или неясни понятия, опитайте се да ги обясните на себе си или на дете, без да използвате жаргон или професионален речник. Наясно сме, че обясняването на дете не е лесна задача, но ако успеете да му обясните и то ви разбере, значи и вие го знаете.
Запишете наученото
Може да не сте писатели, но това не означава, че не можете да запишете процеса на обучение и най-важното е, да създадете невронни връзки в мозъка си, за да съхранявате тези знания в дългосрочната си памет.
Всъщност тази статия е резултат от изучаването на Vue.js. Документирани са най-важните уроци, концепции и елементи от процеса. Това със сигурност ще ви помогне, да запомните уроците по-лесно. Записването на това, което научавате, ще ви помогне в различни области и в един момент може да се превърне в нещо значимо за вас.
Практика, още практира и още практика
Това е много логично. След като разберете по-добре екосистемата на Vue, трябва да реализирате проект. Препоръчваме ви да започнете от основен до проект на средно ниво. Тук няма магическо хапче. Ще трябва да тренирате отново и отново. Това е част от пътуването за разработчици. Никога няма да сте достатъчно подготвени. Ще трябва да се научавате отново и да се връщате по няколко пъти.
В заключение
Изучаването на Vue.js за по-малко от седем дни ще бъде едно невероятно преживяване за вас. Както посочвахме на няколко пъти в цялата статия, това не означава, че ще станете властелинът на Vue.js. Това означава, че ще схванете съответните концепции и елементи, защото сте изградили учебен план, който ще ускори процесът на обучение.
Определянето дали мотивацията ви за учене е вътрешната или външната е, ключов фактор, за да решите какви ресурси да включите и какво трябва да пропуснете. Всички предишни точки са относно плана и стратегията, които трябва да следвате. Те ще засилят вашия учебен процес с Vue.js или която и да е JS рамка или тема, която изучавате.
И все пак етапът на изпълнение е това, което ще ви помогне да смажете процеса на обучение.
Когато изучавате Vue.js, опитайте се да обясните на себе си или на дете объркващи или сложни понятия, без да използвате професионален речник или жаргон. Също така се опитайте да запишете себе си или да запишете наученото на ежедневен бълграски език. Когато принуждавате мозъка си да обяснява концепция със собствени думи, вие създавате невронни връзки, които ви помагат да я съхранявате в дългосрочната си памет.
Прочетете повече за STEM образованието.