Artikoli

Kedu ihe bụ ngwa otu ibe na ihe bụ Vue.js

Vue.js bụ usoro Javascript na-aga n'ihu na mepere emepe ejiri iji mepụta nhụta ndị ọrụ webụ yana ngwa otu ibe.

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.

Kedu ihe bụ Vue.js?

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".

Kedu ihe bụ ngwa otu ibe (SPA)?

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.

Atụmatụ nke Vue.js

N'okpuru bụ ndepụta nke atụmatụ kachasị mkpa nke Vue.js:

Kwadoro

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.

Templates

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.

Mmeghachi omume

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ọ.

nsochi usoro

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ị.

Transizion

Vue na-enye gị ohere iji mmetụta mgbanwe dị iche iche mgbe etinyere, emelitere ma ọ bụ wepụ ihe na DOM.

Olee otú iji wụnye Vue.js?

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ị.

Kpọmkwem na HTML faịlụ

Ọ 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ị.

Iji CDN

Ị 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>

Uru nke iji Vue.js

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ị:

Nha dị obere

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.

Akwụkwọ akụkọ ọhụrụ
Agbagharala akụkọ kacha mkpa maka ime ọhụrụ. Debanye aha iji nweta ha site na email.
Ọ dị mfe nghọta na koodu

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.

Njikọ dị mfe na ngwa ndị dị ugbu a

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.

Na-agbanwe agbanwe site na okike

Ụ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.

Kwadoro

Ị nwere ike ịmepụta ihe ndị nwere ike imegharị na ngwa Vue.js.

Akwụkwọ dị mfe, zuru ezu na nkọwa zuru ezu

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.

mebere DOM

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ụ.

Mmekọrịta ụzọ abụọ

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.

Vue.js nkọwapụta

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:

  • ntuziaka agbakwunyere e
  • ntuziaka definited site onye ọrụ.

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

Akwụkwọ akụkọ ọhụrụ
Agbagharala akụkọ kacha mkpa maka ime ọhụrụ. Debanye aha iji nweta ha site na email.

Ihe odide ndị a

Ahịa Smart Lock: ebipụta akụkọ nyocha ahịa

Okwu Smart Lock Market na-ezo aka na ụlọ ọrụ na gburugburu ebe obibi gburugburu mmepụta, nkesa na ojiji…

27 Marzo 2024

Kedu ihe bụ ụkpụrụ imewe: gịnị kpatara eji ha, nhazi ọkwa, uru na ọghọm

Na injinịa ngwanrọ, ụkpụrụ imewe bụ ihe ngwọta kachasị mma maka nsogbu ndị na-emekarị na nhazi ngwanrọ. Ọ dị m ka…

26 Marzo 2024

The nkà na ụzụ evolushọn nke ụlọ ọrụ marking

Akara ụlọ ọrụ bụ okwu sara mbara nke gụnyere ọtụtụ usoro eji emepụta akara na-adịgide adịgide n'elu…

25 Marzo 2024

Ihe atụ nke Excel Macros nke ejiri VBA dee

Edere ihe atụ macro Excel ndị a dị mfe site na iji VBA Atụmatụ ọgụgụ oge: nkeji 3 Ọmụmaatụ…

25 Marzo 2024