Vue.js o kun fojusi lori iworan apa ti awọn ohun elo, tun npe ni iwaju-opin idagbasoke. Vue.js n gba olokiki lojoojumọ nitori pe o rọrun pupọ lati ṣepọ pẹlu awọn iṣẹ akanṣe ati awọn ile-ikawe miiran. O rọrun pupọ lati fi sori ẹrọ ati lo.
Vue.js jẹ ilana JavaScript ti o ni ilọsiwaju orisun orisun ti a lo fun idagbasoke awọn atọkun olumulo wẹẹbu ibaraenisepo ati awọn ohun elo oju-iwe kan (SPAs). Vue.js ni a tọka si bi Vue ati pe o pe bi “view.js” tabi “view”.
Ohun elo Oju-iwe Kanṣo tabi SPA jẹ ohun elo wẹẹbu tabi oju opo wẹẹbu ti o pese awọn olumulo pẹlu didan pupọ, idahun ati iriri iyara ti o jọra si ohun elo tabili tabili kan. Ohun elo oju-iwe kan ni akojọ aṣayan, awọn bọtini ati awọn bulọọki lori oju-iwe kan. Nigbati olumulo kan ba tẹ ọkan ninu wọn, o tun ṣe atunko oju-iwe lọwọlọwọ dipo kikojọpọ gbogbo awọn oju-iwe tuntun lati ọdọ olupin kan. Eyi ni idi lẹhin iyara idahun rẹ.
Vue jẹ idagbasoke ipilẹ fun idagbasoke iwaju, nitorinaa o ni lati mu ọpọlọpọ HTML, JavaScript ati awọn faili CSS. Vue.js jẹ ki o rọrun fun awọn olumulo lati fa HTML pẹlu awọn abuda HTML ti a pe ni awọn itọsọna. Vue.js pese awọn itọsọna ti a ṣe sinu ati ọpọlọpọ awọn itọsọna definite nipasẹ olumulo lati mu iṣẹ ṣiṣe ti awọn ohun elo HTML dara sii.
Ni isalẹ ni atokọ ti awọn ẹya pataki julọ ti Vue.js:
Awọn paati Vue.js jẹ ọkan ninu awọn ẹya pataki ti ilana yii. Wọn ti wa ni lo lati fa ipilẹ HTML eroja lati encapsulate reusable koodu. O le ṣẹda awọn eroja aṣa atunlo ni awọn ohun elo Vue.js ti o le tun lo ni HTML nigbamii.
Vue.js n pese awọn awoṣe orisun HTML ti o le ṣee lo lati ṣepọ DOM ti a ṣe pẹlu data apẹẹrẹ Vue. Gbogbo awọn awoṣe Vue jẹ HTML ti o wulo ti o le ṣe itupalẹ nipasẹ awọn aṣawakiri ti o ni ifaramọ pato ati awọn parsers HTML. Vue.js ṣe akopọ awọn awoṣe sinu awọn iṣẹ ṣiṣe DOM Foju. Vue ṣe awọn paati sinu iranti DOM foju ṣaaju mimu ẹrọ aṣawakiri naa pada. Vue tun le ṣe iṣiro nọmba to kere julọ ti awọn paati lati tun ṣe ati lo iye ti o kere ju ti ifọwọyi DOM nigba iyipada ipo ohun elo.
Vue n pese eto idahun ti o lo awọn ohun elo JavaScript ti o rọrun ati pe o mu atunṣe atunṣe. Ninu ilana yii, paati kọọkan n tọju abala awọn igbẹkẹle ifaseyin rẹ, nitorinaa eto naa mọ igba ati awọn paati wo lati tun-ṣe.
Lilọ oju-iwe ni a ṣe pẹlu iranlọwọ ti vue-router. O le lo ile-ikawe vue-router ti o ṣe atilẹyin ni ifowosi fun ohun elo oju-iwe kan ṣoṣo rẹ.
Vue gba ọ laaye lati lo awọn ipa iyipada oriṣiriṣi nigbati awọn eroja ti fi sii, imudojuiwọn tabi yọkuro lati DOM.
Awọn ọna pupọ lo wa lati lo Vue.js. O le fi sii nipa lilọ si aaye osise rẹ tabi o le bẹrẹ lilo faili Vue.js lati ibi ikawe CDN daradara. Eyi ni diẹ ninu awọn ọna lati lo Vue.js ninu iṣẹ rẹ.
Ti o ba fẹ lati lo tag <script> ti Vue.js taara sinu faili HTML rẹ, o nilo lati ṣe igbasilẹ lati oju opo wẹẹbu osise.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Jẹ ki a lọ si oju opo wẹẹbu osise Vue.js https://vuejs.org/v2/guide/installation.html lati gba lati ayelujara vue.js gẹgẹ rẹ aini.
O tun le lo faili Vue.js lati CDN, ninu ohun elo rẹ. Lo ọna asopọ https://unpkg.com/vue@3/dist/vue.global.js inu eroja <script>, bi isalẹ:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js jẹ ọkan ninu awọn imọ-ẹrọ sọfitiwia tuntun ti a lo pupọ fun idagbasoke wẹẹbu ati kikọ Awọn ohun elo Oju-iwe Kanṣo (SPA). Bi o ṣe le gboju lati orukọ, o jẹ lilo pupọ julọ fun UI tabi ẹgbẹ ifihan ti iṣẹ akanṣe naa.
Jẹ ki a wo awọn anfani ti lilo Vue.js ninu iṣẹ rẹ:
Ọkan ninu awọn tobi anfani ti Vue.js ni wipe o jẹ gidigidi kekere ni iwọn. Aṣeyọri ti ilana JavaScript da pupọ lori iwọn rẹ ati ohun itanna JavaScript moriwu yii jẹ 18-21KB nikan, nitorinaa o le ṣe igbasilẹ ni rọọrun ati lo ni akoko kankan.
Awọn ilana Vue.js ni ọna ti o rọrun pupọ ati pe o rọrun pupọ lati ni oye. O jẹ ọkan ninu awọn idi fun olokiki ti ilana yii. Ti o ba faramọ pẹlu HTML ati JavaScript, o le ni rọọrun koodu ni Vue.js. Awọn olumulo le ni rọọrun ṣafikun Vue.js si iṣẹ wẹẹbu wọn nitori ọna ti o rọrun ati idagbasoke awọn ohun elo.
Vue.js ni ọpọlọpọ awọn paati fun ohun gbogbo ati pe o le ṣepọ ni iyara pupọ pẹlu awọn ohun elo to wa tẹlẹ. O le ṣepọ pẹlu eyikeyi ohun elo ti a kọ sinu JavaScript.
Iseda rọ ti Vue.js tun jẹ ki o rọrun fun awọn olupilẹṣẹ ti React.js, Angular.js, ati eyikeyi awọn ilana JavaScript tuntun miiran lati ni oye. O pese ọpọlọpọ irọrun lati lo awọn apa foju lati kọ awọn faili HTML, awọn faili JavaScript ati awọn faili JavaScript mimọ.
O le ṣẹda aṣa eroja ti o wa ni reusable ni Vue.js ohun elo.
Vue.js pese irorun, pipe ati iwe alaye, nitorina awọn olupilẹṣẹ ti o ni imọran diẹ nipa HTML ati JavaScript le lo lati ṣe eto.
Vue.js nlo DOM foju ti o jọra si awọn ilana ti o wa tẹlẹ bi ReactJS, Ember, ati bẹbẹ lọ. DOM foju jẹ iwuwo iwuwo ni-iranti oniduro ti HTML DOM atilẹba ati pe o ni imudojuiwọn laisi ni ipa DOM akọkọ.
Vue.js pese ibaraẹnisọrọ ọna meji pẹlu Awoṣe Wo awoṣe (MVVM) faaji ti o rọrun mimu awọn bulọọki HTML jẹ.
Ilana naa wa pẹlu eto ti o fun wa laaye lati ṣe alaye ni alaye si DOM ni lilo sintasi awoṣe ti o rọrun ati titọ.
Eyi ni apẹẹrẹ:
<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 ilana gba wa lati defiAwọn abuda HTML nire ti a pe ni awọn itọsọna, eyiti a lo lati pese iṣẹ ṣiṣe si awọn ohun elo HTML.
Awọn ọna itọsọna meji lo wa ni Vue.js:
Vue.js nlo àmúró meji {{}} bi awọn oniduro fun data, ati awọn itọsọna Vue.js jẹ awọn abuda HTML ti o nlo v- ìpele.
Ohun elo Vue kan sopọ si ẹya DOM kan ṣoṣo ati ṣakoso rẹ ni kikun. Ninu apẹẹrẹ loke, #app ni.
Pẹlu Vue a le ṣe akiyesi HTML bi aaye titẹsi, ati ohun gbogbo miiran ṣẹlẹ inu apẹẹrẹ Vue ti a ṣẹda.
Jẹ ki a wo apẹẹrẹ kan nibiti a ti gbiyanju ipin ati abuda abuda:
<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> Ni ọran yii, abuda v-bind tuntun jẹ itọsọna naa. Awọn itọsọna jẹ lilo pẹlu ìpele v lati fihan pe wọn jẹ awọn abuda alailẹgbẹ ti a pese nipasẹ Vue, ati pe a lo lati lo ihuwasi idahun pataki si DOM ti a ṣe.
Abajade ti apẹẹrẹ jẹ atẹle naa
Ercole Palmeri
Ẹka ọgagun jẹ agbara eto-aje agbaye ni otitọ, eyiti o ti lọ kiri si ọja 150 bilionu kan…
Ni ọjọ Aarọ to kọja, Awọn akoko Iṣowo kede adehun kan pẹlu OpenAI. FT ṣe iwe-aṣẹ iwe-akọọlẹ agbaye rẹ…
Awọn miliọnu eniyan sanwo fun awọn iṣẹ ṣiṣanwọle, san awọn idiyele ṣiṣe alabapin oṣooṣu. O jẹ ero ti o wọpọ pe o…
Coveware nipasẹ Veeam yoo tẹsiwaju lati pese awọn iṣẹ esi iṣẹlẹ ikọlu cyber. Coveware yoo funni ni awọn oniwadi ati awọn agbara atunṣe…
