Kom i gang med Vue.js

Om du ønsker å komme i gang med Vue.js er dette enkelt. I motsetning til hvordan ståa er for de fleste andre populære bibliotek/rammeverk som f.eks. Angular.js og Ember.js.

Man trenger kun en moderne nettleser, en teksteditor, samt ei HTML-fil med litt grunnleggende startinnhold:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  </head>
  <body>
    HTML-kode her ..
    <script>JavaScript-kode her ..</script>
  </body>
</html>

Det er riktignok anbefalt å ha litt kjennskap til HTML og JavaScript før man begynner, men dette kan man lære seg samtidig hvis man bare prøver.

Nedenfor følger de viktigste kodeeksemplene som er å finne i oppstartsguiden til Vue.js. Først er det litt HTML-kode, så JavaScript. Alle eksemplene er rimelig selvforklarende og gir et godt utgangspunkt for hvordan man skal ta i bruk en bestemt funksjonalitet.

Innhold

Enveis

<div id="app">
  {{ melding }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    melding: 'Hallo Vue!'
  }
})

Toveis

<div id="app">
  {{ melding }}
  <input v-model="melding">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hallo Vue!'
  }
})

Kontroll

if

<div id="app">
  <span v-if="synlig">Nå ser du meg</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    synlig: true
  }
})

for

<div id="app">
  <ol>    
    <li v-for="oppgave in oppgaver">
      {{ oppgaver.tekst }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    oppgaver: [
      { tekst: 'Lær JavaScript' },
      { tekst: 'Lær Vue' },
      { tekst: 'Lag noe kult!' }
    ]
  }
})

Hendelser

click

<div id="app">
  {{ melding }}
  <button v-on:click="reverserMelding">Reverser melding</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    melding: 'Hallo Vue.js!'
  },
  methods: {
    reverserMelding: function () {
      this.melding = this.melding.split('').reverse().join('');
    }
  }
})

Legg igjen en kommentar Avbryt svar