Vue Hello

by AndrewKuk

HTML

<script src="https://youtu.be/cx2WnT_sckA?list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07"></script>

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

    <div id="app">
        <p>{{ title }}</p>
        <hr>
    <div class="user" v-for="user in users">
        <p> Username: {{ user.username }}</p>
    </div>
        
    </div>

CSS

.user {
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
}
.blue {
    background-color: blue;
}
.purple {
    background-color: purple;
}

JavaScript

Vue.filter('uppercase', function(value) {
	return value.toUpperCase();
});

new Vue ({
    el: '#app',
    data: {
    	title: 'Hello world!',
     	users: [
        {username: 'Andrew'},
        {username: 'Alex'},
        {username: 'Denis'},
        {username: 'Mary'}
      ]
    }
});