TOC
wwworkshop
Uni Köln

3.7.2
User input in Vue.js

Text input can be realized in Vue.js using an input element in combination with the v-model attribute. v-model should contain the name of a data property. Vue.js will take care of updating the value of the input element aswell as the property and all its instances in the application.

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">
 
        <input type="text" v-model="message">
        <p>{{ message }}</p>
 
    </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')