Vue.js qurulması və onun gündəlik işimizdə istifadə asanlığı (misallar ilə).
Artıq 2019-cu ildəyik və hər gün texnologiya ilə bağlı yeniliklərlə tanış oluruq. Bu səbəbdən sizin üçün də faydalı ola biləcək bəzi məlumatları paylaşmaq, dövrümüzdə ən önəmli frontend script dili olan Javascript-in digər ən güclü rəqiblərinə nisbətdə yeni olan frameworku — Vue.js ilə bağlı danışacam və eyni zamanda onun müəyyən və sürətli template formalarının hazırlanmasında necə yararlı ola biləcəyini öz təcrübələrim əsasında sizinlə bölüşəcəm.
Vue.js-in rəsmi səhifəsi ilə buradan tanış ola və ətraflı məlumatı əldə edə bilərsiniz. İndi isə yazının əsas məqsədi olan Vue qurulumu və bəzi nümunələr ilə bağlı olan hissəyə keçək.
Ümumiyyətlə frontend developerlər müxtəlif alətlər vasitəsilə öz işlərini yerinə yetirirlər. Eyni zamanda javascript framework-ları olan react, angular, Vue və sair istifadə edərək öz işlərini funksional və sistemləşdirilmiş formada görürlər. Biz də belə bir alətlərdən birinin istifadəsinin necə olmasına başlayaq. İndi isə başlanğıc üçün bir ədəd html fayl yaradın. Adının nə olmasının fərqi yoxdur ancaq standart olaraq index.html fayl yarada bilərsiniz. (mənim_faylım.html olması da mümkündür). Yaratdığınız faylı editor (Nodepad++, Atom və s.) vasitəsilə və ya ən sadə notepad ilə açaraq prosesə başlaya bilərik.
Aşağıdakı kimi sadə bir html faylında olmalı olan sətirləri əlavə edin. Faylın düzgünlüyünə əmin olmaq üçün əlavə olaraq salam yazısı göstəririk. <meta/> tag daxilində isə şriftlərlə bağlı kodlamanın (character encoding standard) hansı cürə olmasını göstəririk.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h2>Salam</h2>
</body>
</html>Üstdəki sətirləri əlavə etdikdən sonra save edərək həmin faylı açın. Avtomatik olaraq sisteminizdə seçili olan browser vasitəsi ilə açılmalı və qarşınıza Salam yazısı çıxmalıdır. Əgər yazını görürsünüzsə artıq Vue əlavə edilməsinə keçə bilərik. Vue.js rəsmi səhifəsindən cdn formasında (npm və s. ilə yükləmə saytda ətfarlı göstərilib) olan Vue-nin əsas kökünü təşkil edən scripti götürürük və onu <head> html tagının bağlandığı yerə əlavə edirik. Scriptin body tagının sonunda və ya head hissəsində olmasının, async, defer formasında yüklənməsinin da öz növbəsində fərqi vardır ancaq onlar ayrıca mövzu olduğu üçün bu məqalədə onların nə olması haqda danışılmayacaq. Beləliklə aşağdakı kimi scripti daxil edirik.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Son görünüş:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2></h2>
</body>
</html>Gördüyünüz kimi Salam sözünü artıq sildim. İndi isə yeni bir <script> </script> tag yaradaq və ora Vue scriptlərini əlavə edərək onun vasitəsilə həmin sözü h2 tagına yazaq. İlkin olaraq Vue istifadəsi üçün yeni bir Vue obyekti yaradırıq və onun hansı İD ilə bağlı element daxilində işlədiləcəyini göstəririk.
var app = new Vue({
el: '#app',
data: {
message: 'Salam'
}
})Və html sənədin son forması aşağıdakı kimi olacaqdır.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2></h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Salam'
}
})
</script>
</body>
</html>Bu mərhələdən sonra artıq Vue ilə işləməyə hazırıq. Belə ki yeni Vue obyektində “el” property-si ilə Vue-nin hansı elementi əsas götürəcəyini göstərdik (hər hansı bir ad olması mümkündür. Elementin İD-si və el property eyni olmaq şərtilə). İlkin olaraq Salam sözünün əlavə edilməsi üçün lazım olan data property artıq əlavə etmişik. Variable (dəyişən) adı “message” və aldığı dəyər isə “Salam” olaraq göstərmişik. İndi isə onu html daxilində göstərək. Bunun üçün isə html tag daxilində Vue-nin həmin teksti render etməsi üçün {{ }} xüsusi mötərizələr daxilində dəyişənin adını göstəririk.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Salam'
}
})
</script>
</body>
</html>h2 tag daxilində bu dəyişikliyi etdikdən sonra save edərək səhifəni yeniləyin və artıq Salam sözünün öz yerinə qayıtdığını görəcəksiniz. Təbriklər Vue ilə ilk addımınızı atdınız və Vue.js sizin kodunuz daxilində işləyir. Göstərdiyim qurulma forması ən sadə formada Vue-nin istifadəsini təmin edir. Bunun ardınca Vue daxilində istifədə olunan terminlərin və ya Vue spesifik alətlərin qısaca izahını vermək istərdim.
Ümumi olaraq html daxilində etdiyimiz əməliyyatlarda Vue üçün “v-” qısaltmasının ardınca yerinə yetiriləcək əməliyyat və ya əməliyyat tipi qeyd edilir (v-bind, v-on, v-html və s.). Qısaca bunların necə istifadə oluna biləcəyi barədə misallar ilə göstərim. Əvvəlki misalımızı inkişaf etdirərək davam edək.
Vue v-bind ilə html taglarına mümkün olan hər atributu bağlaya (binding) bilərik. Əlavə bir title adında variable yaradaq (message dəyişənini də istifadə edə bilərik ancaq görünüş fərqli olsun deyə title adlı yaratdım) və onu Salam sözümüzün başlığı (title) olaraq göstərək.
<body>
<div id="app">
<h2 v-bind:title="title">{{ message }}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Salam',
title: 'Salam title'
}
})
</script>
</body>Gördüyünüz kimi h2 tagına v-bind ilə title atributunu bağladıq. Save etdik və səhifəni yenilədikdən sonra, render zamanı h2 tagı artıq title atributu və onun daxilinde title dəyişəni qarşısında yazdığımız “Salam title” sözləri ilə gələcəkdir. Yoxlamaq üçün mouse-u browserdə yazılan Salam sözünün üstünə gətirin və tərpətmədən gözləyin. 2 saniyə ərzində tagın başlığı görsənəcək və Vue-nin elementi necə dəyişdiyini görəcəksiniz. Title əvəzinə html qəbul etdiyi hər hansı bir atributu (id, name, style, class və s.) yaza bilərsiniz. Ancaq burada {{}} mötərizələri yox sadəcə dırnaqcıqlar içərisində dəyişən adını göstərdiyimizə diqqət edin. {{}} bu mötərizələr ancaq mətnləri render etmək üçün istifadə olunur. Digər əksər hallarda isə dırnaqcıqlar daxilində dəyişənin dəyərini ötürürük.
Vue-nin ən önəmli özəlliklərindən biri isə reaktiv olmasıdır. Yəni məlumat dəyişdiyi anda əlaqəli digər hissələrdə də dəyişikliklər yerinə yetirilir. Misal üçün sadə bir input yaradaq və onun dəyərinə message adı ilə işlətdiyimiz dəyişəni bağlayaq (v-model ancaq intput, select, checkbox və s. tipli taglar üçün istifadə olunur) və olanları izləyək.
<body>
<div id="app" >
<h2 v-bind:title="title">{{ message }}</h2>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Salam",
title: "Salam title"
}
})
</script>
</body>Dəyişiklikləri save etdikdən sonra səhifəni yeniləyin və inputun Salam sözü ilə dolu olaraq gəldiyini görəcəksiniz. Sözü dəyişməyə başlayın və h2 tagının da həmin yazdığınız ilə eyni anda dəyişdiyini görəcəksiniz. Çünki {{ message }} data daxilində təyin etdiyimiz message dəyişənini render etməklə məşğuldur. v-model=”message” isə message dəyişəninə birbaşa bağlanıb və o dəyişən anda hər yerdə o dəyişən ilə bağlı məlumatlar avtomatik olaraq yenilənir. Çox zaman öz proyektlərimdə formların doldurularaq göndərilməsində bu metodologiya vasitəsilə asanlıqla məlumatlarımı bir object formasında hazırlayıb backendə göndərirəm.
Növbəti olaraq sadə ancaq effektiv funksinallıqlardan bəhz edək. Vue ilə html-in render olunması zamanı hər hansı bir məlumat istifadəçi tərəfə çatmadan görünməməsini, çatdıqdan sonra görünməsini və s. təmin etmək mümkündür. Bunun üçüv v-if, v-else-if, v-else, v-show spesifik direktivlərini istifadə edirik. Misal ilə göstərək.
<body>
<div id="app">
<h2 v-bind:title="title" v-if="seeMe">{{ message }}</h2>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Salam",
title: "Salam title",
seeMe: false
}
})
</script>
</body>Yeni bir dəyişən yaratdıq — “seeMe” və dəyərini isə false olaraq təyin elədik. Bu səbəbdən save edib səhifəni yenilədikdə artıq Salam sözümüz orada olmayacaqdır. v-if hər zaman boolean (true və ya false, 1 və ya 0, null və s.) tipli cavablar əsasında işləyir. Əgər verilən dəyər false olarsa həmin element tamamilə html-dən çıxardılır. Browserdən inspect edərək baxsanız orada h2 tagının ümumiyyətlə mövcud olmadığını görəcəksiniz (tagı sadəcə gizlətmək üçün isə v-show istifadə edə bilərsiniz). v-if varsa əlbətdə ki əksi olan v-else də mövcuddur :) . Belə ki v-else işlətmənin əsas şərti v-if-in mövcudluğu və ondan sonra olmasıdır. Misal ilə göstərək.
<body>
<div id="app">
<h2 v-if="seeMe" v-bind:title="title">{{ message }}</h2>
<h3 v-else>{{title}}</h3>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Salam",
title: "Salam title",
seeMe: false
}
})
</script>
</body>Save edərək səhifəni yeniləyin. Gördüyünüz kimi h2 tagı bayaqkı kimi öz movcudluğunu itirib. Ancaq v-else ilə göstərdiyimiz title dəyişəninin mətni səhifəyə render olunub. v-if dən sonra hər zaman v-else işlədilməsi şərt deyil sadəcə funksionallıq baxımından nümunələr göstərmək üçün istifədə elədim. Bundan başqa kodlarda yazdıgımız if, elseif, elseif, else zincirini də render üçün istifədə edə bilərik.
<body>
<div id="app">
<h2 v-if="a === 1" v-bind:title="title">{{ message }}</h2>
<h3 v-else-if="a === 2">{{a}}</h3>
<h4 v-else>{{title}}</h4>
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Salam",
title: "Salam title",
seeMe: false,
a: 2
}
})
</script>
</body>Body tagı daxilində 3 ardıcıl h2, h3, h4 tagları əlavə etdik. Ancaq onlardan yalnız biri şərt doğru olduqda göstəriləcək. Bu şərtin yoxlanılması üçün isə dəyəri 2 olan “a” adlı dəyişəni data obyektimizə əlavə elədik. Html tagları daxilində isə uyğun yoxlamaları etdik və göründüyü kimi v-else-if yoxlaması düzgün gəlir. Deməli save edib səhifəni yenilədikdə ancaq 2 yazısını yəni a dəyişəninin dəyərinin render olunduğunu görəcəksiniz.
Html atributları olan class və style da həmçinin v-bind ilə ötürülə bilir. Üst tərəfdəki şərtlərdən doğru olaraq çıxıb görsənən h3 tagına indi isə style verək. Ancaq bu dəfə v-bind əvəzina iki nöqtə “:” işlədəcəyik. Bu eyni prosesin qısa formada yazılışıdır. Eyni zamanda metodların necə istifadə olunmasını da göstərmək üçün daha irəli səviyyəli style ötürülməsini edək. Bunun üçün methods adlı property-ni Vue obyektinə əlavə etmək lazımdır. Bundan sonra həmin Vue property daxilində öz metodlarımızı, funksiyalarımızı adi javascript kimi yaza bilərik. Ancaq data propert daxilində təyin elədiyimiz dəyişənlərə müdaxilə etmək və ya onları metodlarda istifadə üçün “this” xüsusi sözü istifadə etməliyik. Beləliklə kodumuz aşağıdakı kimi olacaqdır.
<body>
<div id="app">
<h2 v-bind:title="title" v-if="a === 1">{{ message }}</h2>
<h3 v-else-if="a === 2" :style="color">{{a}}</h3>
<h4 v-else>{{title}}</h4>
<button v-on:click="setRed()">Qırmızı et</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Salam",
title: "Salam title",
seeMe: false,
a: 2,
color: ''
},
methods: {
setRed: function (){
this.color = 'color: #ff3800'
}
}
})
</script>
</body>Burada gördüyünüz kimi setRed adında metod yaratdıq və onun içərisinda data property-də yenicə boş olaraq yaratdığımız “color” dəyişəninin dəyərini dəyişirik. Ancaq bu dəyişmə html daxilində göstərdiyimiz button-a tıklandıqda yerinə yetiriləcəkdir (v-on ilə adi javascript ile yerinə yetirilən əməliyyatları istifadə etmək olar. v-on:click, v-on:submit, v-on:change və .s). Kodları göstərilən formada dəyişərək save edin və səhifəni yeniləyin. Buttona tıklayın və 2 yazısının rəngi artıq qırmızı olacaqdır. Belə ki, buttona tıklanan anda setRed funksiyası işə düşür və color dəyişəninin dəyərini ‘color: #ff3800’ ilə dəyişir. Və biz h3 tagına style olaraq color dəyişənini bağladığımız üçün avtomatik olaraq onun dəyəri də ‘color: #ff3800’ olur. Və bum, artıq yazının rəngi qırmızı olmuşdur. Bu tipdə əməliyyatların daha irəli səviyyədə edilməsi Vue ilə çox asandır. Misal üçün kodumuzu cüzi dəyişikliklər edərək əlavə funksionallıqları göstərim.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<div id="app">
<h2 v-if="showHello" :class="{'green' : showHello}">{{hello}}</h2>
<h2 v-else :class="{'red' : !showHello}">{{bye}}</h2>
<button @click="switchWords" :class="[showHello ? 'green' : 'red']">Switch</button>
<p v-if="clickCount > 0">{{clickCounter}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
hello: 'Salamlar',
bye: 'Sagolun',
showHello: true,
clickCount : 0
},
computed: {
clickCounter(){
return this.clickCount + ' ədəd click etdiniz';
}
},
methods: {
switchWords(){
this.showHello = !this.showHello;
this.clickCount = this.clickCount + 1;
//və ya this.clickCount += 1;
}
}
})
</script>
</body>
</html>Üst tərəfdə göstərilən kodu kopyalayın və save edərək səhifəni refresh edin. Buttona tıkladıqda sözlərin dəyişməsi və click sayıcının artmasını görəcəksiniz. İndi isə kodu incələyərək prosesin necə baş verdiyini analiz edək. İlkin olaraq head tagı arasında iki ədəd class hazırladıq. Onlar sadəcə mətnin rəngini dəyişdirmək üçün istifadə olunur. Sonra isə hansı tagın buttona tıklandıqda göstəriləcəyi barədə məntiqi hazırladıq. Bunun üçün “hello” və “bye” adlı sözlərimizi saxlayacaq dəyişənləri təyin etdik. Sonra isə Salamlar sözünün ilkin olaraq göstərilməsi üçün (v-if) “showHello” adlı dəyişənin dəyərini true olaraq göstərdik. Neçə ədək click olunduğunu saymaq üçün isə “clickCount” yaratdıq və ilkin dəyərini 0 olaraq təyin elədik. “switchWords()” metodunda isə showHello dəyişənini hər klik zamanı əksi ilə dəyişirik. Belə ki 1-ci klikdə showHello false olacaq, növbətidə isə yenidən true olacaqdır. Eyni zamanda da clickCount dəyişənini də 1 vahid artırırıq.
computed: {
clickCounter(){
return this.clickCount + ' ədəd click etdiniz';
}
},Əlavə olaraq computed adlı bir property görürsünüz. Bu Vue spesifik bir property-dir. Belə ki computed propertylər daxilində yazılan logikanı hər zaman reactiv olaraq return ilə geri qaytararaq əks etdirirlər. Çox istifadəyə yararlı bir proseslərdir ancaq uzatmamaq üçün tam ətraflı yaza bilməyəcəm. Daha ətraflı izaha buradan baxmağınız məsləhətdir. Keçək html tərəfində görülən işlərə.
<h2 v-if="showHello" :class="{'green' : showHello}">{{hello}}</h2>
<h2 v-else :class="{'red' : !showHello}">{{bye}}</h2>
<button @click="switchWords" :class="[showHello ? 'green' : 'red']">Switch</button>
<p v-if="clickCount > 0">{{clickCounter}}</p>İlkin olaraq v-if daxilində göstərilən showHello true olduğu üçün ancaq həmin mətn görsənəcəkdir. :class ilə isə yazının hansı rəngdə olmasını şərt doğru olduğu halda yerinə yetirilməsini Vue spesifik yolla edirik. Kod onu göstərir ki showHello true olduğu halda rəng class-ı həmin h2 tagına əlavə ediləcəkdir. Buna görə ilk olaraq səhifə açıldıqda mətn yazı rəngi yaşıl olur. Eyni rəngi button-a da bağlamışıq və onun rəngi də yaşıl olaraq başlayır. Buttona klik olunduqda isə switchWords() metodumuz işə düşür. showHello dəyəri false olaraq dəyişir (this.showHello = !this.showHello), 1ci h2 tagı gizlənir, 2ci h2 tagı görsənir. 2-ci h2 tagının class atributuna baxsanız showHello dəyərinin false olduğu halda (:class=”{‘red’ : !showHello}”) onun red class-ını götürməsini qeyd etmişəm. Proseslə eyni zamanda buttonun daxilində class çevrilməsi də baş verir, ancaq button class-ı daha irəli səviyyədə - hər 2 şərtə uyğun dəyişilə bilir. Diqqət etdinizsə button yanındakı @click=”switchWords” nümunəsini qısa formada yazdım. Uzun forması v-on:click=”switchWords()” -dir. Ancaq tamamilə eyni işi görürlər.
Ən sonuncu p tagı isə neçə dəfə klik olunmasını sayır. İlkin olaraq görsənmir çünki şərtdə əgər sıfırdan böyük olarsa (v-if=”clickCount > 0") görsədilsin deyə təyin etmişəm. p tagının dəyəri isə computed property olan clickCounter əsasında formalaşır. Hər dəfə count dəyişəni dəyişdikcə clickCounter computed property yenilənir və return ilə son dəyərini qaytarır. Beləliklə, sadə formada Vue ilə interaktiv forma yarada bildik.
Əlbətdə ki, bir çox zaman bizə eyni tipli dəyərlərin ardıcıl sıralanması lazım olur. Bunun üçün loop edilərək məlumatların səhifədə göstərilməsi uyğun yollardan biridir. Vue js ilə loop əməliyyatlarını asanlıqla etmək mümkündür. Bunun üçün v-for işlədilir. v-for direktivi daxilində array halında olan dəyərlər loop edilərək az sayda kodlama ilə işi yerinə yetirmək mümkündür. Sadə bir misal göstərim.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<h2>{{human.name}}</h2>
<p v-for="phone in human.phones">{{phone}}</p>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
human: {
name: 'Evan You',
phones: [
11111111,
22222222,
33333333
]
}
},
})
</script>
</body>
</html>Üst tərəfdəki kodu yazın və save edib səhifəni yeniləyin. Artıq adamın adı (Vue js yaradıcısının adıdır) və 3 ədəd telefon nömrəsi sizə göstərilmişdir. Bundan başqa əgər sizə dövrdəki indeks lazım olarsa aşağdakı şəkildə kodu dəyişməyiniz kifayətdir. Cədvəllər qurarkən mənim çox istifadə etdiyim sıra sayı əlavə edilməsi misalını göstərim. Yalnız indeks sıfırdan başlandığı üçün üzərinə 1 əlavə etməliyik.
<div>
<h2>{{human.name}}</h2>
<p v-for="(phone, index) in human.phones"><span style="font- weight: bold">{{index + 1}}. </span>{{phone}}</p>
</div>Dəyişiklikləri etdikdən sonra save edərək səhifəni yeniləyin və sıra sayının artıq göründüyünü və array uzunluğuna uyğun avtomatik olaraq artdığını görəcəksiniz.
Sonluq
Beləliklə ilk yazımda sadəcə Vue js işlədərək, native javascript və ya pluginlərdən jquery və s. alətlər istifadə etmədən funksional olaraq Vue js ilə işin necə qurula biləcəyini ən sadə yolla izah etməyə çalışdım. Ancaq danışdıqlarım bu framework-un edə biləcəklərinin bəlkə 5 faizini əhatə edir və ya heç o qədər etmir. Növbəti yazımda komponentlərin necə işləməsi, reusable komponentlər (təkrar istifadəyə yararlı) və onların istifadəsinin niyə bu qədər önəmli olduğunu anlatmaq və eyni zamanda prosesi praktiki bir proyekt üzərindən izah etmək istəyirəm. O zaman Vue və ya react, angular və sair frameworkların istifadəsinin sizin üçün nə dərəcə önəmli olduğunun daha da aydın olmasını ümid edirəm. Bura qədər sıxılmadan oxudunuzsa nə gözəl :) Sağolun…
Faydalı linklər
- Vue.js rəsmi səhifəsi: https://vuejs.org/
- Vue daxilində dövriyyə: https://vuejs.org/v2/guide/instance.html
- Vue.js öyrənmək istəyənlər üçün dərslər: https://vueschool.io/
- Vue.js ilə hazırlanmış reusable komponentlər toplusu: https://github.com/vuejs/awesome-vue
