Vue.js ძირითადად ფოკუსირებულია აპლიკაციის ვიზუალიზაციის ნაწილზე, რომელსაც ასევე უწოდებენ ფრონტ-ენდის განვითარებას. Vue.js დღითიდღე პოპულარული ხდება, რადგან ძალიან მარტივია სხვა პროექტებთან და ბიბლიოთეკებთან ინტეგრირება. ძალიან მარტივია ინსტალაცია და გამოყენება.
Vue.js არის პროგრესული JavaScript ჩარჩო ღია წყაროებიდან გამოიყენება ინტერაქტიული ვებ მომხმარებლის ინტერფეისების და ერთი გვერდიანი აპლიკაციების (SPA) შესაქმნელად. Vue.js ჩვეულებრივ მოიხსენიება როგორც Vue და გამოითქმის როგორც "view.js" ან "view".
ერთი გვერდიანი აპლიკაცია ან SPA არის ვებ აპლიკაცია ან ვებსაიტი, რომელიც მომხმარებლებს სთავაზობს ძალიან გლუვ, საპასუხო და სწრაფ გამოცდილებას დესკტოპის აპლიკაციის მსგავსი. ერთი გვერდიანი აპლიკაცია შეიცავს მენიუს, ღილაკებს და ბლოკებს ერთ გვერდზე. როდესაც მომხმარებელი დააწკაპუნებს ერთ-ერთ მათგანზე, ის დინამიურად გადაწერს მიმდინარე გვერდს, ვიდრე სერვერიდან იტვირთება სრულიად ახალი გვერდები. ეს არის მისი საპასუხო სიჩქარის მიზეზი.
Vue ძირითადად შექმნილია frontend-ის განვითარებისთვის, ამიტომ მას უწევს უამრავ HTML, JavaScript და CSS ფაილების მართვა. Vue.js მომხმარებლებს უადვილებს HTML-ის გაფართოებას HTML ატრიბუტებით, რომელსაც ეწოდება დირექტივები. Vue.js გთავაზობთ ჩაშენებულ დირექტივებს და ბევრ დირექტივას definite მომხმარებლის მიერ HTML აპლიკაციების ფუნქციონირების გასაუმჯობესებლად.
ქვემოთ მოცემულია Vue.js-ის ყველაზე მნიშვნელოვანი მახასიათებლების სია:
Vue.js კომპონენტები ამ ჩარჩოს ერთ-ერთი მნიშვნელოვანი მახასიათებელია. ისინი გამოიყენება ძირითადი HTML ელემენტების გასაფართოვებლად, ხელახლა გამოყენებადი კოდის ინკაფსულაციისთვის. თქვენ შეგიძლიათ შექმნათ მრავალჯერადი მორგებული ელემენტები Vue.js აპლიკაციებში, რომლებიც მოგვიანებით შეიძლება გამოყენებულ იქნას HTML-ში.
Vue.js გთავაზობთ HTML-ზე დაფუძნებულ შაბლონებს, რომლებიც შეიძლება გამოყენებულ იქნას რენდერირებული DOM-ის Vue ინსტანციის მონაცემებთან დასაკავშირებლად. Vue-ს ყველა შაბლონი არის მოქმედი HTML, რომელიც შეიძლება გაანალიზდეს სპეციფიკასთან შესაბამის ბრაუზერებსა და HTML პარსერებს. Vue.js აგროვებს მოდელებს ვირტუალური DOM რენდერის ფუნქციებში. Vue გადასცემს კომპონენტებს ვირტუალურ DOM მეხსიერებაში ბრაუზერის განახლებამდე. Vue-ს ასევე შეუძლია გამოთვალოს კომპონენტების მინიმალური რაოდენობა ხელახლა რენდერისთვის და გამოიყენოს DOM მანიპულაციის მინიმალური რაოდენობა აპლიკაციის მდგომარეობის შეცვლისას.
Vue უზრუნველყოფს რეაგირების სისტემას, რომელიც იყენებს JavaScript-ის მარტივ ობიექტებს და ოპტიმიზებს ხელახლა რენდერირებას. ამ პროცესში, თითოეული კომპონენტი თვალყურს ადევნებს თავის რეაქტიულ დამოკიდებულებებს, ასე რომ სისტემამ ზუსტად იცის როდის და რომელი კომპონენტების ხელახლა რენდირება.
გვერდის ნავიგაცია ხდება vue-router-ის დახმარებით. თქვენ შეგიძლიათ გამოიყენოთ ოფიციალურად მხარდაჭერილი vue-router ბიბლიოთეკა თქვენი ერთგვერდიანი აპლიკაციისთვის.
Vue გაძლევთ საშუალებას გამოიყენოთ სხვადასხვა გარდამავალი ეფექტები, როდესაც ელემენტები ჩასმულია, განახლებულია ან ამოღებულია DOM-დან.
Vue.js-ის გამოყენების რამდენიმე მეთოდი არსებობს. შეგიძლიათ დააინსტალიროთ მის ოფიციალურ საიტზე გადასვლით ან შეგიძლიათ დაიწყოთ Vue.js ფაილის გამოყენება CDN ბიბლიოთეკიდანაც. აქ მოცემულია რამდენიმე გზა, რომ გამოიყენოთ Vue.js თქვენს პროექტში.
თუ გსურთ გამოიყენოთ ტეგი <script> Vue.js პირდაპირ თქვენს HTML ფაილში, თქვენ უნდა გადმოწეროთ იგი ოფიციალური ვებსაიტიდან.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> მოდით გადავიდეთ Vue.js ოფიციალურ ვებსაიტზე https://vuejs.org/v2/guide/installation.html ჩამოტვირთეთ vue.js თქვენი საჭიროების მიხედვით.
თქვენ ასევე შეგიძლიათ გამოიყენოთ Vue.js ფაილი CDN-დან, თქვენს აპლიკაციაში. გამოიყენეთ ბმული https://unpkg.com/vue@3/dist/vue.global.js ელემენტის შიგნით <script>, როგორც ქვემოთ:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js არის ერთ-ერთი უახლესი პროგრამული ტექნოლოგია, რომელიც ფართოდ გამოიყენება ვებ განვითარებისა და ერთი გვერდიანი აპლიკაციების შესაქმნელად (SPA). როგორც სახელიდან მიხვდით, ის ძირითადად გამოიყენება UI-სთვის ან პროექტის საჩვენებელი მხარისთვის.
მოდით ვნახოთ Vue.js-ის გამოყენების უპირატესობები თქვენს პროექტში:
Vue.js-ის ერთ-ერთი ყველაზე დიდი უპირატესობა ის არის, რომ ის ძალიან მცირე ზომისაა. JavaScript Framework-ის წარმატება დიდად არის დამოკიდებული მის ზომაზე და ეს საინტერესო JavaScript მოდული არის მხოლოდ 18-21KB, ასე რომ თქვენ შეგიძლიათ ძალიან მარტივად ჩამოტვირთოთ და გამოიყენოთ იგი უმოკლეს დროში.
Vue.js ჩარჩოს აქვს ძალიან მარტივი სტრუქტურა და ძალიან ადვილი გასაგებია. ეს არის ამ ჩარჩოს პოპულარობის ერთ-ერთი მიზეზი. თუ იცნობთ HTML-სა და JavaScript-ს, შეგიძლიათ მარტივად კოდირება Vue.js-ში. მომხმარებლებს შეუძლიათ მარტივად დაამატონ Vue.js თავიანთ ვებ პროექტში მისი მარტივი სტრუქტურის გამო და განავითარონ აპლიკაციები.
Vue.js-ს აქვს მრავალი კომპონენტი ყველაფრისთვის და შეიძლება ძალიან სწრაფად იყოს ინტეგრირებული არსებულ აპლიკაციებთან. თქვენ შეგიძლიათ მისი ინტეგრირება JavaScript-ში დაწერილ ნებისმიერ აპლიკაციასთან.
Vue.js-ის მოქნილი ბუნება ასევე აადვილებს React.js, Angular.js და ნებისმიერი სხვა ახალი JavaScript ჩარჩოს დეველოპერებს გასაგებად. ის უზრუნველყოფს დიდ მოქნილობას ვირტუალური კვანძების გამოსაყენებლად HTML ფაილების, JavaScript ფაილების და სუფთა JavaScript ფაილების დასაწერად.
შეგიძლიათ შექმნათ მორგებული ელემენტები, რომლებიც ხელახლა გამოყენებადია Vue.js აპლიკაციებში.
Vue.js გთავაზობთ ძალიან მარტივ, სრულ და დეტალურ დოკუმენტაციას, ამიტომ დეველოპერებს, რომლებსაც მცირე წარმოდგენა აქვთ HTML-სა და JavaScript-ზე, შეუძლიათ გამოიყენონ იგი დაპროგრამებისთვის.
Vue.js იყენებს ვირტუალურ DOM-ს სხვა არსებული ჩარჩოების მსგავსად, როგორიცაა ReactJS, Ember და ა.შ. ვირტუალური DOM არის ორიგინალური HTML DOM-ის მსუბუქი მეხსიერების ხის წარმოდგენა და განახლებულია თავდაპირველ DOM-ზე გავლენის გარეშე.
Vue.js უზრუნველყოფს ორმხრივ კომუნიკაციას მისი Model View View Model (MVVM) არქიტექტურით, რაც ამარტივებს HTML ბლოკების მართვას.
ჩარჩო მოყვება სისტემას, რომელიც საშუალებას გვაძლევს დეკლარაციულად მივცეთ მონაცემები DOM-ში მარტივი და მარტივი მოდელის სინტაქსის გამოყენებით.
აი მაგალითი:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Vue.js ჩარჩო გვაძლევს ამის საშუალებას definire HTML ატრიბუტები ეწოდება დირექტივებს, რომლებიც გამოიყენება HTML აპლიკაციების ფუნქციონირების უზრუნველსაყოფად.
Vue.js-ში ორი ტიპის დირექტივაა:
Vue.js იყენებს ორმაგ ფრჩხილებს {{}}, როგორც ჩანაცვლების დამფუძნებლებს მონაცემებისთვის, ხოლო Vue.js დირექტივები არის HTML ატრიბუტები, რომლებიც იყენებენ v- პრეფიქსს.
Vue აპი უკავშირდება ერთ DOM ელემენტს და სრულად აკონტროლებს მას. ზემოთ მოყვანილ მაგალითში ეს არის #app.
Vue-ს საშუალებით ჩვენ შეგვიძლია მივიჩნიოთ HTML, როგორც შესვლის წერტილი, და ყველაფერი დანარჩენი ხდება შექმნილი Vue ინსტანციის შიგნით.
ვნახოთ მაგალითი, სადაც ვცდილობთ ელემენტის და ატრიბუტის დაკავშირებას:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> ამ შემთხვევაში, ახალი v-bind ატრიბუტი არის დირექტივა. დირექტივები გამოიყენება v- პრეფიქსით, რათა მიუთითებდეს, რომ ისინი Vue-ს მიერ მოწოდებული უნიკალური ატრიბუტებია და გამოიყენება სპეციალური საპასუხო ქცევის გამოსაყენებლად გაწეული DOM-ზე.
მაგალითის შედეგი შემდეგია
Ercole Palmeri
კომპანიის ელ.ფოსტის კომპრომისი ორჯერ გაიზარდა 2024 წლის პირველ სამ თვეში, ბოლო კვარტალთან შედარებით…
ინტერფეისის სეგრეგაციის პრინციპი არის ობიექტზე ორიენტირებული დიზაინის ხუთი მყარი პრინციპიდან ერთ-ერთი. კლასს უნდა ჰქონდეს…
Microsoft Excel არის მონაცემთა ანალიზის საცნობარო ინსტრუმენტი, რადგან ის გთავაზობთ მრავალ ფუნქციას მონაცემთა ნაკრების ორგანიზებისთვის,…
Walliance, SIM და პლატფორმა ევროპის ლიდერებს შორის უძრავი ქონების Crowdfunding-ის სფეროში 2017 წლიდან, აცხადებს დასრულებას…
Filament არის "აჩქარებული" Laravel განვითარების ჩარჩო, რომელიც უზრუნველყოფს რამდენიმე სრული დასტას კომპონენტს. იგი შექმნილია პროცესის გასამარტივებლად…
„მე უნდა დავბრუნდე, რომ დავასრულო ჩემი ევოლუცია: მე კომპიუტერში საკუთარ თავს პროექტირებას მოვახდენ და სუფთა ენერგია გავხდები. მას შემდეგ რაც დასახლდა…
Google DeepMind წარმოგიდგენთ ხელოვნური ინტელექტის მოდელის გაუმჯობესებულ ვერსიას. ახალი გაუმჯობესებული მოდელი უზრუნველყოფს არა მხოლოდ…
Laravel, რომელიც ცნობილია თავისი ელეგანტური სინტაქსითა და ძლიერი მახასიათებლებით, ასევე უზრუნველყოფს მყარ საფუძველს მოდულური არქიტექტურისთვის. იქ…
