Articles

Inona no atao hoe Fampiharana Pejy tokana ary inona ny Vue.js

Vue.js dia rafitra JavaScript mivoatra sy mivelatra izay ampiasaina amin'ny fampivoarana ny fifandraisana amin'ny mpampiasa tranonkala sy ny rindranasa pejy tokana.

Ny Vue.js dia mifantoka indrindra amin'ny ampahany amin'ny fampisehoana an-tsary amin'ny fampiharana, antsoina koa hoe fivoarana eo anoloana. Lasa malaza isan'andro ny Vue.js satria tena mora ny mitambatra amin'ny tetikasa sy tranomboky hafa. Tena tsotra ny fametrahana sy ny fampiasana azy.

Inona ny Vue.js?

Vue.js dia rafitra JavaScript mandroso loharano misokatra ampiasaina amin'ny fampivoarana ny mpampiasa tranonkala interactive sy ny fampiharana pejy tokana (SPA). Ny Vue.js dia antsoina matetika hoe Vue ary tononina hoe "view.js" na "view".

Inona no atao hoe Fampiharana Pejy tokana (SPA)?

Ny Fampiharana Pejy tokana na SPA dia rindranasa tranonkala na tranokala manome traikefa tena malama, mandray andraikitra ary haingana mitovy amin'ny rindranasa desktop. Ny fampiharana pejy tokana dia misy sakafo, bokotra ary sakana amin'ny pejy tokana. Rehefa manindry ny iray amin'izy ireo ny mpampiasa iray dia mamerina manoratra amin'ny fomba mavitrika ny pejy ankehitriny fa tsy mampiditra pejy vaovao iray manontolo avy amin'ny mpizara. Izany no antony ao ambadiky ny hafainganam-pandehany.

Vue dia novolavolaina ho an'ny fampivoarana frontend, noho izany dia tsy maintsy mitantana rakitra HTML, JavaScript ary CSS maro izy. Ny Vue.js dia manamora ny mpampiasa manitatra HTML miaraka amin'ny toetra HTML antsoina hoe torolàlana. Ny Vue.js dia manome torolàlana naorina sy torolàlana maro definy mpampiasa hanatsara ny fampandehanana ny rindranasa HTML.

Endriky ny Vue.js

Ity ambany ity ny lisitry ny endri-javatra manan-danja indrindra amin'ny Vue.js:

singa

Ny singa Vue.js dia iray amin'ireo singa manan-danja amin'ity rafitra ity. Izy ireo dia ampiasaina hanitarana ireo singa HTML fototra mba hametahana kaody azo ampiasaina. Azonao atao ny mamorona singa mahazatra azo ampiasaina amin'ny fampiharana Vue.js izay azo ampiasaina indray amin'ny HTML.

Templates

Vue.js dia manome môdely mifototra amin'ny HTML izay azo ampiasaina hampifandraisana ny DOM nadika amin'ny angona ohatra Vue. Ny môdely Vue rehetra dia HTML manan-kery izay azo zaraina amin'ny navigateur mifanaraka amin'ny fepetra sy parser HTML. Vue.js dia manangona maodely ho amin'ny virtoaly DOM famandrihana. Ny Vue dia mamadika singa ho fahatsiarovana DOM virtoaly alohan'ny hamelombelona ny navigateur. Azon'ny Vue atao ihany koa ny kajy ny isan'ny singa kely indrindra hamerenana sy hampiharana ny vola kely indrindra amin'ny fanodinkodinana DOM rehefa manova ny toetry ny fampiharana.

Reactivity

Vue dia manome rafitra famaliana izay mampiasa zavatra JavaScript tsotra ary manatsara ny famerenana indray. Amin'ity dingana ity, ny singa tsirairay dia manara-maso ny fiankinan-dohany, mba hahafantaran'ny rafitra tsara hoe rahoviana sy izay singa tokony haverina.

tambazotra

Ny fitetezana pejy dia atao miaraka amin'ny fanampian'ny vue-router. Azonao atao ny mampiasa ny tranomboky vue-router tohanan'ny ofisialy ho an'ny fampiharana pejy tokana.

fiovana

Ny Vue dia ahafahanao mampiasa vokatry ny fifindrana samihafa rehefa ampidirina, havaozina na esorina ao amin'ny DOM ny singa.

Ahoana ny fametrahana Vue.js ?

Misy fomba maro hampiasana ny Vue.js. Azonao atao ny mametraka izany amin'ny alàlan'ny fandehanana any amin'ny tranokalany ofisialy na azonao atao ny manomboka mampiasa ny rakitra Vue.js avy amin'ny tranomboky CDN ihany koa. Ireto misy fomba sasany hampiasana ny Vue.js amin'ny tetikasanao.

Mivantana amin'ny rakitra HTML

Raha te hampiasa ny tag ianao <script> an'ny Vue.js mivantana ao amin'ny rakitra HTML-nao, mila misintona azy amin'ny tranokala ofisialy ianao.

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

Andao ho any amin'ny tranokala ofisialy Vue.js https://vuejs.org/v2/guide/installation.html hisintona vue.js araka izay ilainao.

Mampiasa CDN

Azonao atao koa ny mampiasa ny rakitra Vue.js avy amin'ny CDN, amin'ny fampiharanao. Ampiasao ny rohy https://unpkg.com/vue@3/dist/vue.global.js ao anatin'ilay singa <script>, toy ny eto ambany:

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

Tombontsoa amin'ny fampiasana Vue.js

Vue.js dia iray amin'ireo teknolojia rindrambaiko farany ampiasaina betsaka amin'ny fampivoarana tranonkala sy fananganana Applications Pejy tokana (SPA). Araka ny azonao vinavinaina amin'ny anarana, dia ampiasaina amin'ny UI na ny lafiny fampisehoana amin'ny tetikasa.

Andao hojerentsika ny tombony amin'ny fampiasana Vue.js amin'ny tetikasanao:

Tena kely habe

Ny iray amin'ireo tombony lehibe indrindra amin'ny Vue.js dia ny habeny dia tena kely. Ny fahombiazan'ny rafitra JavaScript dia miankina betsaka amin'ny habeny ary ity plugin JavaScript mampientam-po ity dia 18-21KB ihany, noho izany dia afaka misintona mora foana ianao ary mampiasa izany ao anatin'ny fotoana fohy.

Gazety fanavaozana
Aza adino ny vaovao manan-danja indrindra momba ny fanavaozana. Misoratra anarana handray azy ireo amin'ny mailaka.
Mora azo sy kaody

Ny rafitra Vue.js dia manana rafitra tena tsotra ary tena mora azo. Iray amin'ireo antony mampalaza ity rafitra ity. Raha zatra amin'ny HTML sy JavaScript ianao dia azonao atao ny mametraka code amin'ny Vue.js. Ny mpampiasa dia afaka manampy mora foana ny Vue.js amin'ny tetikasan-tranonkalany noho ny rafitra tsotra sy ny fampivoarana fampiharana.

Fampidirana tsotra amin'ny fampiharana efa misy

Vue.js dia manana singa maro ho an'ny zava-drehetra ary azo ampidirina haingana amin'ny fampiharana efa misy. Azonao atao ny mampiditra azy amin'ny fampiharana rehetra voasoratra amin'ny JavaScript.

Ny maha-flexible azy

Ny maha-flexible an'i Vue.js koa dia manamora ny fahafantaran'ny mpamorona ny React.js, Angular.js, ary ireo rafitra JavaScript vaovao hafa. Manome fahafahana be dia be ny mampiasa nodes virtoaly hanoratana rakitra HTML, rakitra JavaScript ary rakitra JavaScript madio.

singa

Azonao atao ny mamorona singa manokana azo ampiasaina amin'ny fampiharana Vue.js.

Antontan-taratasy tsotra sy feno ary amin'ny antsipiriany

Ny Vue.js dia manome antontan-taratasy tena tsotra, feno ary amin'ny antsipiriany, ka ireo mpamorona izay tsy dia mahafantatra firy momba ny HTML sy JavaScript dia afaka mampiasa izany amin'ny fandaharana.

DOM virtoaly

Vue.js dia mampiasa DOM virtoaly mitovy amin'ny rafitra efa misy toy ny ReactJS, Ember, sns. Ny DOM virtoaly dia fanehoana hazo maivana ao anaty fitadidiana ny HTML DOM tany am-boalohany ary havaozina tsy misy fiantraikany amin'ny DOM voalohany.

Fifandraisana roa tonta

Ny Vue.js dia manome fifandraisana roa miaraka amin'ny maritrano Model View View Model (MVVM) izay manamora ny fikarakarana ireo sakana HTML.

Fandikana fanambarana Vue.js

Ny rafitra dia miaraka amin'ny rafitra ahafahantsika mamoaka angon-drakitra amin'ny DOM amin'ny fampiasana syntax modely tsotra sy mahitsy.

Ity misy ohatra iray:

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

Ny rafitra Vue.js dia mamela antsika defiNire toetra HTML antsoina hoe Directives, izay ampiasaina mba hanomezana fonctionnaire ho an'ny fampiharana HTML.

Misy karazany roa ny toromarika ao amin'ny Vue.js:

  • toromarika mitambatra e
  • torolalana definavoakan'ny mpampiasa.

Ny Vue.js dia mampiasa braces roa {{}} ho mpihazona toerana ho an'ny angona, ary ny torolalana Vue.js dia toetra HTML izay mampiasa prefix v.

Ny fampiharana Vue dia mifandray amin'ny singa DOM tokana ary mifehy azy tanteraka. Amin'ity ohatra etsy ambony ity dia #app izany.

Amin'ny Vue dia azontsika raisina ho toy ny teboka fidirana ny HTML, ary ny zavatra hafa rehetra dia mitranga ao anatin'ilay ohatra Vue noforonina.
Andeha hojerentsika ohatra iray izay andramantsika ny singa sy ny toetra mifamatotra:

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

Amin'ity tranga ity, ny toetra v-bind vaovao dia ny torolàlana. Ny torolalana dia ampiasaina miaraka amin'ny tovana v- mba hanondroana fa toetra tokana nomen'ny Vue izy ireo, ary ampiasaina hampiharana fihetsika mandray andraikitra manokana amin'ny DOM nadika.

Ny vokatry ny ohatra dia izao manaraka izao

Ercole Palmeri

Gazety fanavaozana
Aza adino ny vaovao manan-danja indrindra momba ny fanavaozana. Misoratra anarana handray azy ireo amin'ny mailaka.

Lahatsoratra vao haingana

Fidirana vaovao ao amin'ny Augmented Reality, miaraka amin'ny mpijery Apple ao amin'ny Catania Polyclinic

Nisy fandidiana ophthalmoplasty tamin'ny alàlan'ny mpijery ara-barotra Apple Vision Pro natao tao amin'ny Catania Polyclinic…

3 May 2024

Ny tombony azo amin'ny fandokoana ho an'ny ankizy - tontolon'ny ody ho an'ny sokajin-taona rehetra

Ny fampivelarana ny fahaiza-manao maotera tsara amin'ny alalan'ny fandokoana dia manomana ny ankizy amin'ny fahaiza-manao sarotra kokoa toy ny fanoratana. Loko…

2 May 2024

Eto ny ho avy: ny fomba nanova ny toe-karena maneran-tany ny indostrian'ny fandefasana entana

Ny sehatry ny tafika an-dranomasina dia tena hery ara-toekarena manerantany, izay nivezivezy nankany amin'ny tsena 150 miliara...

1 May 2024

Ny Mpanonta sy ny OpenAI dia manao sonia fifanarahana mba hifehy ny fikorianan'ny vaovao karakarain'ny Artificial Intelligence

Ny alatsinainy lasa teo, nanambara fifanarahana tamin'ny OpenAI ny Financial Times. Ny FT dia manome alalana ny asa fanaovan-gazety manerantany…

30 Aprily 2024