TOC
wwworkshop
Uni Köln

3.7.1
Get started

Vue.js can be set up in a few different ways. We will use the one which transitions easily from the basic page structure from previous sections.

  1. Insert the script tag to include Vue.js just before your own script.

  2. Add the #app element. This will contain the HTML structure of the Vue.js app.

  3. Add the code to script.js.

???

The createApp method is provided by Vue.js. It sets up a new app, which is then connected to a HTML element using mount.

The app contains some data, which in this case has the property message. All properties from the data object are available inside of the app element.

In the HTML file the message property from the data is displayed using the curly braces notation. This instructs Vue.js to display the content of the variable instead of the literal text “message”.

index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
</head>
<body>
 
    <div id="app">{{ message }}</div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="script.js"></script>
 
</body>
</html>

script.js

const { createApp, ref } = Vue

createApp({
    data () {
        return {
            message: 'wwwow!'
        }
    }
}).mount('#app')