Vue

Intro till

Agenda

Varför Vue?
Setup av Vue app från CDN
Template syntax
Directives
Event handling
Methods, Watchers och Computed

Varför Vue?

Enligt https://vuejs.org/

Vi använder endast Vue 3 och börjar med Options API

https://vuejs.org/

Vue från CDN

https://vuejs.org/guide/quick-start.html#using-vue-from-cdn


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

Vi börjar utan build tools 🙏

Setup av Vue med CDN

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue 3 Example</title>
  </head>
  <body>
      <div id="app">
          {{ message }}
      </div>
      <script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
      <script>
          Vue.createApp({
              data() {
                  return {
                      message: 'Hello Vue 3!'
                  };
              }
          }).mount('#app');
      </script>
  </body>
  </html>

Template syntax


 <div>Message: {{ msg }}</div>

  <div v-bind:id="dynamicId"></div>

  <div> {{ number + 1 }} </p>

  <div> {{ ok ? 'YES' : 'NO' }} </div>

  <div> {{ message.split('').reverse().join('') }} </div>

Directives

v-if, v-else-if, v-else
v-on:click (@click)
v-for
v-bind
v-model
v-show

Anges i HTML-markup för att koppla specifikt beteende till ett DOM-element (sånt som Vue-kompilatorn sköter)

Delar som hanterar en Vue app

  
 Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!',
        count: 0
      }
    }
  }).mount('#app');

data - "state data". "Reactive properties" av Vue-instansen

Delar som hanterar en Vue app

method
watch
computed