Articles

Menene Aikace-aikacen Shafi guda ɗaya kuma menene Vue.js

Vue.js tsari ne mai ci gaba da buɗe tushen JavaScript da ake amfani da shi don haɓaka mu'amalar masu amfani da yanar gizo da aikace-aikacen shafi ɗaya.

Vue.js ya fi mai da hankali kan ɓangaren gani na aikace-aikacen, wanda kuma ake kira haɓaka gaba-gaba. Vue.js yana samun farin jini kowace rana saboda yana da sauƙin haɗawa da sauran ayyuka da ɗakunan karatu. Yana da sauƙin shigarwa da amfani.

Menene Vue.js?

Vue.js tsarin JavaScript ne mai ci gaba Bude tushen ana amfani da shi don haɓaka mu'amalar masu amfani da gidan yanar gizo da aikace-aikacen shafi ɗaya (SPAs). Vue.js ana kiranta da Vue da yawa kuma ana kiranta da "view.js" ko "view".

Menene Aikace-aikacen Shafi Guda ɗaya (SPA)?

Aikace-aikacen Shafi Guda ɗaya ko SPA aikace-aikacen gidan yanar gizo ne ko gidan yanar gizon da ke ba masu amfani da santsi, saurin amsawa da gogewa mai kama da aikace-aikacen tebur. Aikace-aikacen shafi guda ɗaya ya ƙunshi menu, maɓalli da tubalan akan shafi ɗaya. Lokacin da mai amfani ya danna ɗaya daga cikinsu, yana sake rubuta shafin na yanzu maimakon loda sabbin shafuka daga uwar garken. Wannan shine dalilin da ke bayan saurin amsawa.

Vue an gina shi ne don haɓaka gaba, don haka dole ne ya sarrafa yawancin HTML, JavaScript da fayilolin CSS. Vue.js yana sauƙaƙa ga masu amfani don ƙara HTML tare da halayen HTML da ake kira umarni. Vue.js yana ba da ingantattun umarni da umarni da yawa definite ta mai amfani don inganta ayyukan aikace-aikacen HTML.

Siffofin Vue.js

Da ke ƙasa akwai jerin mahimman fasalulluka na Vue.js:

Aka gyara

Abubuwan Vue.js suna ɗaya daga cikin mahimman abubuwan wannan tsarin. Ana amfani da su don faɗaɗa ainihin abubuwan HTML don haɗa lambar da za a sake amfani da ita. Kuna iya ƙirƙirar abubuwan al'ada da za'a iya sake amfani da su a cikin aikace-aikacen Vue.js waɗanda daga baya za'a iya sake amfani da su cikin HTML.

Samfura

Vue.js yana ba da samfuran tushen HTML waɗanda za a iya amfani da su don haɗa DOM da aka yi tare da bayanan misali na Vue. Duk samfuran Vue masu aiki ne na HTML waɗanda za a iya tantance su ta ƙayyadaddun masu bincike da masu binciken HTML. Vue.js yana tattara samfura zuwa Ayyukan Ma'anar DOM na Virtual. Vue yana samar da abubuwan haɗin kai zuwa ƙwaƙwalwar ajiyar DOM na kama-da-wane kafin ta wartsake mai binciken. Vue kuma na iya ƙididdige ƙaramar adadin abubuwan haɗin gwiwa don sake bayarwa da amfani da ƙaramin adadin magudin DOM lokacin canza yanayin aikace-aikacen.

Reactivity

Vue yana ba da tsarin amsawa wanda ke amfani da abubuwa masu sauƙi na JavaScript kuma yana inganta sake fasalin. A cikin wannan tsari, kowane sashi yana lura da abin da ya dogara da shi, don haka tsarin ya san ainihin lokacin da kuma abubuwan da za a sake sakewa.

bayar da kwatance

Ana yin kewayawar shafi tare da taimakon vue-router. Kuna iya amfani da ɗakin karatu na vue-router da ke tallafawa bisa hukuma don aikace-aikacen shafinku ɗaya.

Transizoni

Vue yana ba ku damar amfani da tasirin canji daban-daban lokacin da aka saka abubuwa, sabuntawa ko cire su daga DOM.

Yadda ake shigar Vue.js?

Akwai hanyoyi da yawa don amfani da Vue.js. Kuna iya shigar da shi ta hanyar zuwa rukunin yanar gizon sa ko kuma kuna iya fara amfani da fayil ɗin Vue.js daga ɗakin karatu na CDN kuma. Anan akwai wasu hanyoyin amfani da Vue.js a cikin aikin ku.

Kai tsaye a cikin fayil ɗin HTML

Idan kuna son amfani da tag <script> na Vue.js kai tsaye cikin fayil ɗin HTML ɗinku, kuna buƙatar saukar da shi daga gidan yanar gizon hukuma.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

Bari mu je gidan yanar gizon hukuma na Vue.js https://vuejs.org/v2/guide/installation.html don sauke vue.js daidai da bukatun ku.

Amfani da CDN

Hakanan zaka iya amfani da fayil ɗin Vue.js daga CDN, a cikin aikace-aikacen ku. Yi amfani da hanyar haɗin https://unpkg.com/vue@3/dist/vue.global.js a cikin kashi <script>, kamar yadda a kasa:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Fa'idodin amfani da Vue.js

Vue.js ɗaya ce daga cikin sabbin fasahohin software da ake amfani da su don haɓaka gidan yanar gizo da gina Aikace-aikacen Shafi Guda ɗaya (SPA). Kamar yadda zaku iya tsammani daga sunan, ana amfani dashi galibi don UI ko gefen nunin aikin.

Bari mu ga fa'idodin amfani da Vue.js a cikin aikin ku:

Ƙananan girma

Daya daga cikin manyan abũbuwan amfãni na Vue.js ne cewa shi ne sosai kananan a size. Nasarar tsarin JavaScript ya dogara da yawa akan girmansa kuma wannan kayan aikin JavaScript mai ban sha'awa shine kawai 18-21KB, don haka zaka iya saukewa da amfani da shi cikin sauƙi.

Jaridar Innovation
Kada ku rasa mafi mahimmancin labarai akan ƙirƙira. Yi rajista don karɓar su ta imel.
Sauƙi don fahimta da code

Tsarin Vue.js yana da tsari mai sauƙi kuma yana da sauƙin fahimta. Yana daya daga cikin dalilan shaharar wannan tsarin. Idan kun saba da HTML da JavaScript, kuna iya yin lamba cikin sauƙi a cikin Vue.js. Masu amfani za su iya ƙara Vue.js cikin sauƙi zuwa aikin gidan yanar gizon su saboda sauƙin tsarinsa da haɓaka aikace-aikace.

Haɗin kai mai sauƙi tare da aikace-aikacen da ke akwai

Vue.js yana da abubuwa da yawa don komai kuma ana iya haɗa shi cikin sauri tare da aikace-aikacen da ke akwai. Kuna iya haɗa shi da kowace aikace-aikacen da aka rubuta a cikin JavaScript.

Mai sassauƙa ta yanayi

Yanayin sassauƙa na Vue.js kuma yana sauƙaƙa ga masu haɓaka React.js, Angular.js, da kowane sabon tsarin JavaScript don fahimta. Yana ba da sauƙi mai yawa don amfani da nodes na kama-da-wane don rubuta fayilolin HTML, fayilolin JavaScript da fayilolin JavaScript masu tsabta.

Aka gyara

Kuna iya ƙirƙirar abubuwan al'ada waɗanda za'a iya sake amfani da su a aikace-aikacen Vue.js.

Sauƙaƙe, cikakkun bayanai da cikakkun bayanai

Vue.js yana ba da sauƙi, cikakke da cikakkun bayanai, don haka masu haɓakawa waɗanda ba su da ra'ayi kaɗan game da HTML da JavaScript zasu iya amfani da shi don tsarawa.

Virtual DOM

Vue.js yana amfani da DOM na kama-da-wane kama da sauran tsarin da ake da su kamar ReactJS, Ember, da sauransu. DOM kama-da-wane shine wakilcin bishiyar ƙwaƙwalwar ajiya mara nauyi na ainihin HTML DOM kuma an sabunta shi ba tare da shafar DOM na farko ba.

Sadarwa ta hanyoyi biyu

Vue.js yana ba da hanyar sadarwa ta hanyoyi biyu tare da ƙirar Model View View Model (MVVM) wanda ke sauƙaƙa sarrafa tubalan HTML.

Vue.js bayyanawa

Tsarin ya zo tare da tsarin da ke ba mu damar ba da bayanai dalla-dalla ga DOM ta amfani da tsarin ƙirar ƙira mai sauƙi da madaidaiciya.

Ga misali:

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

Tsarin Vue.js yana ba mu damar definire HTML halayen da ake kira umarni, waɗanda ake amfani da su don samar da ayyuka ga aikace-aikacen HTML.

Akwai umarni iri biyu a cikin Vue.js:

  • hadedde umarnin e
  • umarni definited da mai amfani.

Vue.js yana amfani da takalmin gyaran kafa guda biyu {{}} a matsayin masu riƙe da bayanai, kuma umarnin Vue.js halayen HTML ne masu amfani da prefix.

Aikace-aikacen Vue yana haɗi zuwa nau'in DOM guda ɗaya kuma yana sarrafa shi gabaɗaya. A cikin misalin da ke sama, #app ne.

Tare da Vue za mu iya la'akari da HTML a matsayin wurin shigarwa, kuma duk abin da ke faruwa a cikin misalin Vue da aka halicce.
Bari mu ga misali inda muka gwada element da sifa dauri:

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

A wannan yanayin, sabuwar sifa ta v-bind ita ce umarnin. Ana amfani da umarni tare da prefix v don nuna cewa sifofi ne na musamman da Vue ya bayar, kuma ana amfani da su don amfani da halayen amsa na musamman ga DOM da aka yi.

Sakamakon misalin shine kamar haka

Ercole Palmeri

Jaridar Innovation
Kada ku rasa mafi mahimmancin labarai akan ƙirƙira. Yi rajista don karɓar su ta imel.

Kwanan nan labarin

Veeam yana fasalta mafi cikakken tallafi don ransomware, daga kariya zuwa amsawa da murmurewa

Coveware ta Veeam zai ci gaba da ba da sabis na amsa abin da ya faru ta hanyar intanet. Coveware zai ba da damar bincikar bincike da damar gyarawa…

23 Afrilu 2024

Kore da Juyin Juya Halin Dijital: Yadda Kulawar Hasashen ke Canza Masana'antar Mai & Gas

Kulawa da tsinkaya yana kawo sauyi a fannin mai & iskar gas, tare da sabbin hanyoyin kula da tsirrai.…

22 Afrilu 2024

Mai kula da amincin Burtaniya ya ɗaga ƙararrawar BigTech akan GenAI

Hukumar CMA ta Burtaniya ta ba da gargadi game da halayen Big Tech a cikin kasuwar bayanan sirri. Akwai…

18 Afrilu 2024

Casa Green: juyin juya halin makamashi don dorewar makoma a Italiya

Dokar "Green Houses" da Tarayyar Turai ta tsara don inganta ingantaccen makamashi na gine-gine, ta kammala aikinta na majalisar tare da…

18 Afrilu 2024