Vue.js na-elekwasị anya na akụkụ anya nke ngwa a, nke a na-akpọkwa mmepe n'ihu. Vue.js na-ewu ewu kwa ụbọchị n'ihi na ọ dị mfe ijikọ na ọrụ na ọba akwụkwọ ndị ọzọ. Ọ dị mfe ịwụnye na iji.
Vue.js bụ usoro Javascript na-aga n'ihu Isi mmalite A na-eji ya emepe emepe interface onye ọrụ weebụ yana ngwa otu ibe (SPAs). A na-akpọkarị Vue.js dị ka Vue wee kpọọ ya "view.js" ma ọ bụ "view".
Ngwa otu ibe ma ọ bụ SPA bụ ngwa webụ ma ọ bụ webụsaịtị na-enye ndị ọrụ ahụmịhe dị nro, nnabata na ngwa ngwa dịka ngwa desktọpụ. Ngwa otu ibe nwere menu, bọtịnụ na ngọngọ n'otu ibe. Mgbe onye ọrụ pịrị na otu n'ime ha, ọ na-edegharị ibe dị ugbu a karia ibunye ibe ọhụrụ site na sava. Nke a bụ ihe mere n'azụ ọsọ ọsọ ya.
Emepụtara Vue n'ụzọ bụ isi maka mmepe frontend, yabụ ọ ga-ejikwa ọtụtụ HTML, Javascript na faịlụ CSS. Vue.js na-eme ka ọ dịrị ndị ọrụ mfe ịgbatị HTML na àgwà HTML a na-akpọ ntụziaka. Vue.js na-enye ntuziaka arụnyere na ọtụtụ ntuziaka definite site n'aka onye ọrụ iji melite arụmọrụ nke ngwa HTML.
N'okpuru bụ ndepụta nke atụmatụ kachasị mkpa nke Vue.js:
Akụkụ Vue.js bụ otu n'ime atụmatụ dị mkpa nke usoro a. A na-eji ha gbatịa ihe HTML ndị bụ isi iji tinye koodu nwere ike iji mee ihe. Ị nwere ike ịmepụta ihe ndị nwere ike ịmegharịgharị na ngwa Vue.js nke nwere ike ịmegharị ọzọ na HTML.
Vue.js na-enye ndebiri HTML nke enwere ike iji jikọta DOM atụgharịpụtara na data ihe atụ Vue. Ndebiri Vue niile bụ HTML ziri ezi nke enwere ike ịtụgharị ya site na ihe nchọgharị na-ekwenye ekwenye na HTML parsers. Vue.js na-achịkọta ụdị n'ime Virtual DOM inye ọrụ. Vue na-atụgharị ihe mejupụtara ka ọ bụrụ ebe nchekwa DOM mebere tupu ime ihe nchọgharị ahụ ume ọhụrụ. Vue nwekwara ike gbakọọ ọnụ ọgụgụ opekempe nke akụrụngwa iji nyegharịa ma tinye obere njikwa DOM mgbe ị na-agbanwe ọnọdụ ngwa.
Vue na-enye usoro nnabata nke na-eji ihe Javascript dị mfe ma na-ebuli nsụgharị ọzọ. N'ime usoro a, akụkụ nke ọ bụla na-edobe ihe ndabere ya na-emeghachi omume, yabụ sistemụ ahụ mara nke ọma mgbe na nke akụrụngwa ga-emegharị ọzọ.
A na-eme igodo nke ibe site n'enyemaka nke vue-router. Ị nwere ike iji ọba akwụkwọ vue-router kwadoro maka otu ngwa ibe gị.
Vue na-enye gị ohere iji mmetụta mgbanwe dị iche iche mgbe etinyere, emelitere ma ọ bụ wepụ ihe na DOM.
Enwere ụzọ dị iche iche iji Vue.js. Ị nwere ike iwunye ya site na ịga na saịtị ọrụ ya ma ọ bụ ị nwere ike ịmalite iji faịlụ Vue.js site na ọba akwụkwọ CDN. Nke a bụ ụzọ ụfọdụ iji Vue.js na ọrụ gị.
Ọ bụrụ na ị chọrọ iji mkpado <script>
nke Vue.js ozugbo n'ime faịlụ HTML gị, ịkwesịrị ibudata ya na webụsaịtị gọọmentị.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html>
Ka anyị gaa na webụsaịtị gọọmentị Vue.js https://vuejs.org/v2/guide/installation.html ka ibudata vue.js dị ka mkpa gị si dị.
Ị nwekwara ike iji faịlụ Vue.js sitere na CDN, n'ime ngwa gị. Jiri njikọ https://unpkg.com/vue@3/dist/vue.global.js n'ime mmewere <script>
, dị ka n'okpuru:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Vue.js bụ otu n'ime teknụzụ sọftụwia kachasị ọhụrụ a na-ejikarị maka mmepe webụ yana iwulite Ngwa Ibe Otu (SPA). Dị ka ị nwere ike ịkọ site na aha ahụ, a na-ejikarị ya maka UI ma ọ bụ akụkụ ngosi nke ọrụ ahụ.
Ka anyị hụ uru dị n'iji Vue.js na ọrụ gị:
Otu n'ime nnukwu uru nke Vue.js bụ na ọ bụ nnọọ obere na size. Ọganihu nke usoro Javascript dabere na nha ya yana ngwa mgbakwunye Javascript na-atọ ụtọ bụ naanị 18-21KB, yabụ ị nwere ike ibudata ma jiri ya n'oge adịghị anya.
Usoro Vue.js nwere usoro dị mfe ma dị mfe nghọta. Ọ bụ otu n'ime ihe kpatara ewu ewu nke usoro a. Ọ bụrụ na ị maara HTML na Javascript nke ọma, ị nwere ike itinye koodu na Vue.js ngwa ngwa. Ọrụ nwere ike mfe tinye Vue.js ha web oru ngo n'ihi na ya mfe Ọdịdị na ịzụlite ngwa.
Vue.js nwere ọtụtụ components maka ihe niile na ike-ike ngwa ngwa na ẹdude ngwa. Ị nwere ike ijikọ ya na ngwa ọ bụla edere na Javascript.
Ụdị mgbanwe nke Vue.js na-emekwa ka ọ dị mfe maka ndị mmepe React.js, Angular.js, na ihe ọ bụla ọzọ Javascript frameworks ịghọta. Ọ na-enye ọtụtụ mgbanwe iji mebere ọnụ ọnụ iji dee faịlụ HTML, faịlụ Javascript na faịlụ Javascript dị ọcha.
Ị nwere ike ịmepụta ihe ndị nwere ike imegharị na ngwa Vue.js.
Vue.js na-enye akwụkwọ dị mfe, zuru oke na nkọwa zuru ezu, yabụ ndị mmepe nwere obere echiche gbasara HTML na Javascript nwere ike iji ya mee mmemme.
Vue.js na-eji DOM mebere ya na usoro ndị ọzọ dị dị ka ReactJS, Ember, wdg. DOM mebere bụ ihe nnọchite anya osisi dị fechaa nke HTML DOM mbụ ma emelitere na-emetụtaghị DOM mbụ.
Vue.js na-enye nzikọrịta ozi ụzọ abụọ na ihe owuwu Model View Model (MVVM) nke na-eme ka njikwa ihe mgbochi HTML dị mfe.
Usoro a na-abịa na sistemu na-enye anyị ohere iji nkwupụta ụdịdị dị mfe ma kwụ ọtọ nye DOM data.
Nke a bụ ọmụmaatụ:
<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>
Usoro Vue.js na-enye anyị ohere defiàgwà HTML ndị a na-akpọ ntụziaka, nke a na-eji enye ọrụ na ngwa HTML.
Enwere ụdị ntuziaka abụọ na Vue.js:
Vue.js na-eji ihe nkwado abụọ {{}} dị ka ndị na-edebe data, na ntụziaka Vue.js bụ àgwà HTML na-eji v- prefix.
Ngwa Vue na-ejikọ na otu DOM ma jikwaa ya nke ọma. N'ihe atụ dị n'elu, ọ bụ #app.
Site na Vue anyị nwere ike ịtụle HTML dị ka ebe ntinye, na ihe ọ bụla ọzọ na-eme n'ime ihe atụ Vue mepụtara.
Ka anyị hụ ọmụmaatụ ebe anyị na-anwale mmewere na njirimara njide:
<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>
N'okwu a, njirimara v-bind ọhụrụ bụ ntuziaka. A na-eji ntụzịaka jiri v- prefix gosi na ha bụ àgwà pụrụ iche nke Vue wetara, ma na-eji ya tinye omume nzaghachi pụrụ iche na DOM a sụgharịrị.
Nsonaazụ nke ihe atụ bụ nke a
Ercole Palmeri
Okwu Smart Lock Market na-ezo aka na ụlọ ọrụ na gburugburu ebe obibi gburugburu mmepụta, nkesa na ojiji…
Na injinịa ngwanrọ, ụkpụrụ imewe bụ ihe ngwọta kachasị mma maka nsogbu ndị na-emekarị na nhazi ngwanrọ. Ọ dị m ka…
Akara ụlọ ọrụ bụ okwu sara mbara nke gụnyere ọtụtụ usoro eji emepụta akara na-adịgide adịgide n'elu…
Edere ihe atụ macro Excel ndị a dị mfe site na iji VBA Atụmatụ ọgụgụ oge: nkeji 3 Ọmụmaatụ…