BrandonSmith8038
10/3/2017 - 6:32 AM

Vue.Js Basics

Basics of Vue.JS

Index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My App</title>
</head>
<body>
    <h1>My App</h1>
    <div id="app"></div>

    <script src="http://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>
main.js
content_copyfile_download
Vue.component('friend-component', {
    props:['friend'],
    filters: {
        fullName(value) {
            return `${value.last}, ${value.first}`;
        },

        ageInAYear(age) {
            return age + 1;
        }
    },
    methods: {
        incrementAge(friend){
            friend.age = friend.age + 1;
        },
        decrementAge(friend){
            friend.age = friend.age - 1;
        },
    },
    template:`
    <div>
        <h4>{{friend | fullName}}</h4>
        <h5>{{friend.age}}</h5>
        <button v-on:click="incrementAge(friend)" >+</button>
        <button v-on:click="decrementAge(friend)" >-</button>
        <input v-model="friend.first">
        <input v-model="friend.last">
    </div>
    `
});

const app = new Vue({

    data: {
        friends: [{
                first: "Brandon",
                last: "Smith",
                age: 31
            },
            {
                first: "Amber",
                last: "Cahill",
                age: 32
            }
        ],
    },

    el: '#app',
    template: `
    <div>
        <friend-component v-for="item in friends" v-bind:friend="item" />
    </div>
    `
})