Vue.js on ansainnut maineensa progressiivisena JavaScript-kehyksenä. Vue.js: n avulla voit rakentaa yksisivuisia sovelluksia (SPA) tai kehittää erityisiä käyttöliittymiä.

Täällä opit Vue.js: n perusteet, mukaan lukien Vue-komponentin luomisen ja dynaamisen tiedon renderöinnin Options-objektin kanssa.

Vue.js on yksi niistä suosituimmat JavaScript-kehykset. Vuen käytön aloittaminen, ja lisätäksesi sen HTML-sivullesi, kopioi alla oleva komentosarjatunniste ja liitä se head-osioon:

<käsikirjoitussrc="">käsikirjoitus>

CDN-linkin käyttö on erinomainen vaihtoehto parantaa staattista HTML: ää tai lisätä sovellukseesi toimintoja.

Sinun on kuitenkin asennettava Vue.js npm: n kautta, jotta voit käyttää enemmän sen edistyneitä ominaisuuksia, kuten SFC (Single-File Component) -syntaksia, joista on apua täysimittaisten Vue-sovellusten rakentamisessa.

Vue-sovelluksen luominen

Vue-kirjastoon pääsy CDN-linkin kautta tarjoaa Vue-objektin, mukaan lukien .createApp() menetelmä.

Kuten nimestä voi päätellä, voit luoda Vue-sovelluksen tällä menetelmällä.

Esimerkiksi:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<käsikirjoitus>
 const app = Vue.createApp();
käsikirjoitus>
kehon>
html>

Täällä luotu sovellus on tallennettu sovellus muuttuja. Kun olet luonut sovellusesiintymän, sinun on renderöitävä se käyttämällä .mount() menetelmä. Tämä menetelmä kertoo, mihin sovellus asennetaan Document Object Model (DOM).

Niin kuin:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">div>
<käsikirjoitus>
 const app = Vue.createApp();
 app.mount("#app");
käsikirjoitus>
kehon>
html>

Vuen käyttöön .mount() -menetelmässä, sinun on annettava argumenttina DOM-elementti tai -valitsin. Tässä esimerkissä asensimme Vue-sovelluksen käyttämällä DOM-elementtiä #sovellus ID.

On tärkeää huomata, että Vue-sovellus hallitsee vain elementtejä, jotka on määritetty käyttämällä id. Sovellus ei myöskään hallitse mitään näiden elementtien ulkopuolella, mukaan lukien napsautustapahtumat tai muu interaktiivisuus.

Viimeinen vaihe Vue-sovelluksen luomisessa on kutsua .mount() menetelmää sen jälkeen, kun olet tehnyt kaikki sovelluksen asetukset.

Asetukset-objekti Vuessa

Vue.js: ssä käytät Vaihtoehdot objekti konfigurointiobjektina Vue-ilmentymän tai -komponentin luomiseksi.

Se on olennainen osa Vue-sovellusta, koska se määrittää kunkin esiintymän tai komponentin käyttäytymisen ja tiedot. The Vaihtoehdot objekti koostuu useista ominaisuuksista, jotka edustavat ilmentymän tai komponentin eri puolia.

Jotkut yleisesti käytetyistä ominaisuuksista Vaihtoehdot objektit ovat:

• tiedot: Tämä ominaisuus määrittää tietoobjektin Vue-sovelluksille. Se on funktio, joka palauttaa objektin, joka sisältää datan ominaisuudet ja niiden alkuarvot.
• menetelmiä: menetelmiä Options-objektin ominaisuus sisältää tärkeitä toimintoja dynaamisen renderoinnin mahdollistamiseksi.
• sapluuna: Tämä ominaisuus määrittää Vue-ilmentymän tai -komponentin HTML-mallin. Se on merkkijono, joka sisältää HTML-merkinnän, jonka Vuen mallin kääntäjä voi jäsentää.

Huomaa, että malliominaisuutta käytettäessä Vue-kääntäjä hahmontaa vain mallissa määritetyn sisällön.

Tässä on esimerkki Vue-sovelluksesta, jossa on tiedot, menetelmät, ja sapluuna ominaisuudet:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<h1 @klikkaus="käänteinen viesti" >{{ teksti }}h1>
div>
<käsikirjoitus>
konst app = Vue.createApp({
// sapluuna: '
Tervetuloa Vue-sovellukseesi
',
 data() {
palata {
 teksti: "Tämä on Vue-sovelluksesi"
 };
 },
 menetelmät: {
 käänteisviesti () {
Tämä.text = Tämä.text.split('').reverse().join('')
 }
 }
 });
sovellus.mount("#sovellus");
käsikirjoitus>
kehon>
html>

Tämä ohjelma kuvaa Vue-perussovellusta, joka näyttää tekstin "Tämä on Vue-sovelluksesi" käyttämällä tekstiinterpolaatiota ja antaa käyttäjien napsauttaa sitä kääntääkseen viestin.

The data() funktio palauttaa objektin, jolla on yksi ominaisuus nimeltä teksti. The @klikkaus direktiiviä käytetään liittämään a käänteinen viesti() menetelmään elementti, joka kääntää teksti omaisuutta.

Kun tämä ohjelma suoritetaan, luotu Vue-sovellus näyttää tältä:

Tekstin napsauttaminen kääntää sen päinvastaiseksi.

Huomaa, että ohjelma kommentoi mallin ominaisuutta, jotta Vue-sovelluksen sisältö voidaan hahmontaa. Jos tämä Vue-sovellus jätetään kommentoimatta, se näyttää vain malliominaisuuden:

On muitakin ominaisuuksia, kuten rekvisiitta ja laskettu, jota voit myös käyttää luomaan tehokkaita ja joustavia Vue-sovelluksia määrittäessäsi Options Objectia.

Tekstin interpolointi Vuessa

Tekstin interpolointi Vuessa on ominaisuus, jonka avulla voit sitoa tietoja HTML-elementteihin dynaamisesti. Toisin sanoen sen avulla voit tulostaa suoraan Vue-ilmentymän dataominaisuuksien arvon HTML-koodiin.

Tekstin interpoloinnin saavuttamiseksi Vuessa sinun on käärittävä tieto-ominaisuuden nimi kaksoissulkeisiin. Vue tulkitsee kaksoissulkujen sisällä olevan sisällön JavaScript-lausekkeiksi ja korvaa ne edelleen niiden tuloksena olevalla arvolla.

Esimerkiksi:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<h1>{{ viesti }}h1>
<s>Tervetuloa {{ nimi }}s>
div>
<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 viesti: "Tämä on Vue-sovelluksesi."
 nimi: "Jalo",
 };
 },
 });
 app.mount("#app");
käsikirjoitus>
kehon>
html>

Tässä esimerkissä tekstin interpolointi sitoo viesti ja nimi Vu-instanssissa palautetun tietoobjektin ominaisuudet ja elementtejä. Kun Vue-sovellus on asennettu, se näyttää arvot viesti ja nimi HTML: n ominaisuudet vastaavissa paikoissaan.

Voit myös näyttää menetelmäkutsun tuloksen tai suorittaa JavaScriptin perusoperaatioita kaksoishakasulkeissa:

html>
<htmllang="en">
<pää>
<otsikko>Vue sovellusotsikko>
<käsikirjoitussrc=" https://unpkg.com/vue@3/dist/vue.global.js">käsikirjoitus>
pää>
<kehon>
<divid="sovellus">
<h1>{{ viesti }}h1>
<h3>Tervetuloa {{ name.toUpperCase() }}h3>
<s>Nimessäsi on {{ nameLength() }} kirjainta.s>
div>
<s>ei täälläs>
<käsikirjoitus>
 const app = Vue.createApp({
 data() {
 return {
 viesti: "Tämä on Vue-sovelluksesi",
 nimi: "Noble Okafor",
 };
 },
 menetelmät: {
 nameLength() {
 palauttaa this.name.length - 1;
 },
 },
 });
 app.mount("#app");
käsikirjoitus>
kehon>
html>

Tässä esimerkissä Vue-sovelluksessa on a tiedot objekti, joka sisältää kaksi ominaisuutta: viesti ja nimi.

Vue-sovelluksen sisällä kolme HTML-elementtiä näyttävät tiedot käyttämällä Vue-instanssia. The h1 elementti näyttää arvon viesti omaisuutta, kun taas h3 elementti näyttää arvon nimi omaisuutta a isot kirjaimet() siihen sovellettava menetelmä.

The s elementti näyttää palautetun tuloksen nimiPituus() kohdassa määritelty menetelmä menetelmiä Vue-sovelluksen kohde. The nimiPituus() Metodi palauttaa pituuden nimi omaisuus vähennettynä yhdellä.

Jos haluat käyttää arvoa menetelmäobjektin tietoobjektista, sinun on käytettävä Tämä avainsana. Tämä avainsana viittaa nykyiseen Vue-ilmentymään ja antaa sinun käyttää sen ominaisuuksia ja menetelmiä Vue-ilmentymästä. Käyttämällä Tämä, voit hakea arvon nimi omaisuutta ja suorita siihen tarvittavat käsittelyt käyttämällä menetelmiä.

Tämä Vue-sovellus näyttää kuinka sitoa dataa HTML-elementteihin tekstiinterpoloinnilla ja kuinka määritellä ja kutsua menetelmiä Vue-instanssissa.

Rakenna käyttöliittymäsi Vuen avulla

Tässä artikkelissa opit aloittamaan työskentelyn Vuen kanssa ja interpoloimaan tekstiä Vuen mallisyntaksilla. Voit käyttää useita muita Vuen ominaisuuksia, kuten direktiivejä ja elinkaaren koukkuja, joten se on erinomainen valinta dynaamisten käyttöliittymäsovellusten rakentamiseen.