Vue JS Talk

The basics of Vue JS
    import Vue from 'vue';
    
    new Vue({ 
        el: '#app',
        data: {location : "Jomoni"}
    });
    
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                <h2>Vue presentation at {{ location }}</h2>
                <label>Add an attendee</label>
                <input type="text" v-model="newAttendee"></input>
                <p> {{ newAttendee }}</p>
            </div>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app">
                <h2>Vue presentation at {{ location }}</h2>
                <label>Add an attendee</label>
                <input type="text" v-model="newAttendee"></input>
                <p>Welcome to {{location }} {{ newAttendee }}</p>
                <p v-for=""></p>
            </div>
            <script src="index.pack.js"></script>
        </body>
    import Vue from 'vue';
    
    new Vue({ 
        el: '#app',
        data: {
            location : "Jomoni",
            newAttendee: "",
            attendees : ["Tom", "Dick", "Harry"]        
            },
        methods: {
            addAttendee: function() {
                this.attendees.push(this.newAttendee);
                this.newAttendee = ""
            }
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div id="app" v-bind:class="{dark : dark}">
                <h2>Vue presentation at {{ location }}</h2>
                <label>Add an attendee</label>
                <input type="text" v-model="newAttendee"></input>
                <p>Welcome to {{ location }} {{ newAttendee }}</p>
                <button v-on:click="addAttendee()">Add attendee</button>
                <button v-on:click="{dark = !dark}">Change Theme</button>        
                <p v-for="a in attendees"> {{ a }}</p>
            </div>