Vue

• Vue.js - The Progressive JavaScript Framework

Hello World using Vue with CDN

In this series we are going to load Vue from a fixed place. We are using a CDN, but you could also download Vue and serve it from your own web-site. The main point is that this way of using Vue does NOT require a build step.

In the first example we create a simple variable and display its content.

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

List of objects - for loop

In this example we have an object that contains and array of objects. We use a v-for in loop to iterate over the elements of the array and then we use the dot-notation to access the individual attributes of the JavaScript object. Coming from Python you might think of lists and dictionaries (or objects with accessors).

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

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

  <h2>{{data.title}}</h2>
  <table>
    <thead>
        <th>Name</th>
        <th>Year</th>
    </thead>
    <tbody>
        <tr v-for="language in data.languages">
            <td>{{language.name}}</td>
            <td>{{language.year}}</td>
        </tr>
    </tbody>
  </table>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      const data = ref({
          title: 'Programming languages',
          languages: [
              { name: "Perl", year: 1987 },
              { name: "Python", year: 1991  },
              { name: "JavaScript", year: 1995 },
              { name: "Rust", year: 2010 },
              { name: "Gleam", year: 2024 },
          ],
      })

      return {
        message, data
      }
    }
  }).mount('#app')
</script>

Counter clicking on a button

• v-on:click or the short-hand @click to map events to methods.

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

<div id="app">
<div>{{ message }}</div>
<button @click="increment">Count is: {{ counter }}</button>
</div>

<script>
    const { createApp, ref } = Vue

    createApp({
        methods: {
            increment() {
                console.log("increment");
                this.counter++
                console.log(this.counter);
            }
        }, 
        setup() {
            const message = ref('Hello World!')
            const counter = ref(0)
            return {
                message, counter
            }
        }
    }).mount('#app')
</script>

Fetch data

• async
• fetch
• await
• json

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

<div id="app">
<button @click="get_data">Get</button>
<div v-if="data">
{{data.info.description}}
</div>

</div>

<script>
    const { createApp, ref } = Vue

    createApp({
        methods: {
            async get_data() {
                console.log("fetch data")
                const url = "https://pypi.org/pypi/pydigger/json"                
                this.data = await (await fetch(url)).json()
            }        
        }, 
        setup() {
            const data = ref(null)
            return {
                data
            }
        }
    }).mount('#app')
</script>