Articles

Chii chinonzi Peji Imwe Yekushandisa uye chii chinonzi Vue.js

Vue.js inofambira mberi uye yakavhurika sosi yeJavaScript chimiro chinoshandiswa kugadzira inodyidzana mushandisi wewebhu uye maapplication peji peji.

Vue.js inonyanya kutarisisa pane yekuona chikamu chechishandiso, chinonziwo kumberi-kuguma budiriro. Vue.js iri kuita mukurumbira zuva nezuva nekuti zviri nyore kubatanidza nemamwe mapurojekiti nemaraibhurari. Zviri nyore kwazvo kuisa uye kushandisa.

Mukati

Chii chinonzi Vue.js?

Vue.js inofambira mberi JavaScript framework open source inoshandiswa kugadzira inodyidzana yewebhu mushandisi interface uye imwechete peji maapplication (SPAs). Vue.js inowanzonzi Vue uye inodanwa se "view.js" kana "view".

Chii chinonzi Single Peji Chikumbiro (SPA)?

A Single Peji Chikumbiro kana SPA iwebhu application kana webhusaiti inopa vashandisi yakanyanya yakatsetseka, inoteerera uye nekukurumidza chiitiko chakafanana nedesktop application. Peji imwe chete application ine menyu, mabhatani uye mabhururu pane imwechete peji. Kana mushandisi akadzvanya pane imwe yacho, inonyora zvakare peji razvino pane kurodha mapeji matsva kubva kuseva. Ichi ndicho chikonzero chiri shure kwekupindura kwayo nekukurumidza.

Vue yakavakirwa kumberi kwekusimudzira, saka inofanirwa kubata akawanda eHTML, JavaScript uye CSS mafaera. Vue.js inoita kuti zvive nyore kuti vashandisi vawedzere HTML ine HTML hunhu hunodaidzwa kuti dhairekitori. Vue.js inopa yakavakirwa-mukati madhairekitori uye akawanda dhairekitori definite nemushandisi kuvandudza mashandiro eHTML application.

Zvinoumba Vue.js

Pazasi pane rondedzero yeakanyanya kukosha maficha eVue.js:

Zvikamu

Vue.js zvikamu ndezvimwe zvezvinhu zvakakosha zvegadziriro iyi. Iwo anoshandiswa kuwedzera zvakakosha HTML zvinhu kuti encapsulate reusable kodhi. Unogona kugadzira zvinhu zvinogoneka kushandiswa muVue.js zvikumbiro zvinogona kuzoshandiswa zvakare muHTML.

Templates

Vue.js inopa HTML-based templates inogona kushandiswa kubatanidza iyo DOM yakashandurwa neVue muenzaniso data. Ese ma templates eVue ndeye HTML inoshanda iyo inogona kukamurwa ne-spec-compliant browsers uye HTML parsers. Vue.js inounganidza mamodheru kuita Virtual DOM rendering function. Vue inoshandura zvikamu muDOM ndangariro isati yazorodza bhurawuza. Vue inogona zvakare kuverenga huwandu hushoma hwezvikamu zvekupa zvakare uye kushandisa hushoma huwandu hweDOM manipulation kana uchichinja application state.

Reactivity

Vue inopa inopindura sisitimu inoshandisa zviri nyore JavaScript zvinhu uye inogonesa kupa zvakare. Mukuita uku, chikamu chega chega chinochengeta chinoteera chayo, saka sisitimu inonyatsoziva nguva uye kuti ndezvipi zvikamu zvekupa zvakare.

hwokutiparadza

Kufamba kwepeji kunoitwa nerubatsiro rwevue-router. Unogona kushandisa raibhurari inotsigirwa zviri pamutemo vue-router kune yako peji peji application.

Transitions

Vue inobvumidza iwe kushandisa akasiyana ekuchinja maitiro kana zvinhu zvaiswa, zvakagadziridzwa kana kubviswa kubva kuDOM.

Nzira yekuisa Vue.js ?

Pane nzira dzakawanda dzekushandisa Vue.js. Unogona kuiisa nekuenda kunzvimbo yayo yepamutemo kana kuti unogona kutanga kushandisa Vue.js faira kubva muraibhurari yeCDN zvakare. Hedzino dzimwe nzira dzekushandisa Vue.js mupurojekiti yako.

Zvakananga muHTML faira

Kana iwe uchida kushandisa tag <script> yeVue.js yakananga mune yako HTML faira, unofanirwa kuidhawunirodha kubva pawebhusaiti yepamutemo.

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

Handei kune iyo Vue.js yepamutemo webhusaiti https://vuejs.org/v2/guide/installation.html kurodha vue.js zvinoenderana nezvaunoda.

Kushandisa CDN

Unogonawo kushandisa Vue.js faira kubva kuCDN, mukushandisa kwako. Shandisa chinongedzo https://unpkg.com/vue@3/dist/vue.global.js mukati mechinhu <script>, sezvinotevera:

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

Zvakanakira kushandisa Vue.js

Vue.js ndeimwe yeazvino software tekinoroji inoshandiswa zvakanyanya pakuvandudza webhu uye kuvaka Imwe Peji Zvikumbiro (SPA). Sezvaunogona kufungidzira kubva pazita, rinonyanya kushandiswa kuUI kana kuratidza divi reprojekiti.

Ngatione mabhenefiti ekushandisa Vue.js muchirongwa chako:

Saizi diki kwazvo

Chimwe chezvakanakira Vue.js ndechekuti idiki muhukuru. Kubudirira kweJavaScript framework kunoenderana zvakanyanya nehukuru hwayo uye iyi inonakidza JavaScript plugin inongova 18-21KB, saka unogona kudhawunirodha zviri nyore nekuishandisa pasina nguva.

Zviri nyore kunzwisisa uye kodhi

Iyo Vue.js framework ine chimiro chakareruka uye chiri nyore kunzwisisa. Ndicho chimwe chezvikonzero zvekuzivikanwa kwechimiro ichi. Kana iwe uchijaira HTML neJavaScript, unogona nyore kukodha muVue.js. Vashandisi vanogona kuwedzera Vue.js kuwebhu purojekiti yavo nekuda kwechimiro chayo chiri nyore uye kugadzira maapplication.

Kubatanidzwa kwakapusa nemaapplication aripo

Vue.js ine zvinhu zvakawanda zvezvinhu zvese uye inogona kubatanidzwa nekukurumidza nemaapplication aripo. Unogona kuibatanidza nechero application yakanyorwa muJavaScript.

Kuchinjika nemasikirwo

Hunhu hunochinjika hweVue.js zvakare hunoita kuti zvive nyore kune vanogadzira React.js, Angular.js, uye chero mamwe mafuremu matsva eJavaScript kunzwisisa. Inopa kuchinjika kwakawanda kushandisa chaiwo node kunyora HTML mafaera, JavaScript mafaera uye yakachena JavaScript mafaera.

Zvikamu

Unogona kugadzira zvinhu zvetsika zvinogonekazve muVue.js maapplication.

Nyore, yakazara uye yakadzama zvinyorwa

Vue.js inopa magwaro akareruka, akazara uye ane hudzamu, saka vanogadzira vasina ruzivo rwakanyanya nezveHTML neJavaScript vanogona kuishandisa kuronga.

virtual DOM

Vue.js inoshandisa chaiyo DOM yakafanana nemamwe mafuremu aripo seReactJS, Ember, nezvimwe. Iyo chaiyo DOM ndeye yakareruka-mu-ndangariro muti inomiririra yepakutanga HTML DOM uye inogadziridzwa pasina kukanganisa yekutanga DOM.

Nzira mbiri dzekukurukurirana

Vue.js inopa nzira mbiri dzekutaurirana neModel View View Model (MVVM) mavakirwo ayo anorerutsa kubata kweHTML blocks.

Vue.js declarative rendering

Iyo dhizaini inouya nehurongwa hunotibvumira kuzivisa nekuzivisa data kuDOM tichishandisa yakapusa uye yakatwasuka modhi syntax.

Heino muenzaniso:

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

Iyo Vue.js framework inotibvumira kuita definire HTML maitiro anonzi madirective, ayo anoshandiswa kupa mashandiro kune HTML application.

Kune marudzi maviri emirairo muVue.js:

mirairo yakabatanidzwa e
mirayiridzo defiyakapihwa nemushandisi.

Vue.js inoshandisa mabhureki maviri {{}} sezvibatiso zvedata, uye Vue.js mirayiridzo iHTML inoshandisa v- prefix.

A Vue app inobatanidza kune imwechete DOM chinhu uye inoidzora zvizere. Mumuenzaniso wepamusoro, ndeye #app.

NeVue tinogona kufunga iyo HTML senzvimbo yekupinda, uye zvimwe zvese zvinoitika mukati meiyo yakagadzirwa Vue muenzaniso.
Ngationei muenzaniso kwatinoedza chinhu uye hunhu hunosunga:

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

Mune ino kesi, iyo itsva v-bind hunhu ndiyo inoraira. Madhairekitori anoshandiswa ne v- prefix kuratidza kuti iwo akasiyana hunhu akapihwa neVue, uye anoshandiswa kushandisa yakakosha maitiro ekupindura kune yakapihwa DOM.

Mhedzisiro yemuenzaniso ndeyekutevera