Vue.use(VueInputmask)

var app = new Vue(
    {
        //name only really helps for debugging but it is useful
        name: "App One",
        //The DOM element that the Vue instance will replace
        el: '#app',
        //Change the plain text interpolation delimiters.
        delimiters: ['${', '}'],
        //Here are examples of lifecycle hooks
        //All lifecycle hooks are called with their 'this'
        // context pointing to the Vue instance invoking it.
        // Remember there are no controlers in Vue. Lifecycles fill this function:
        // https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
        //Full list of hooks can be found:
        //https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
        beforeCreate: function(){console.log("Before create hook called on " + this.$options.name)}, // Here we are accessing the other non-data properitoes of the Vue instance.
        beforeMount: function(){console.log("Before mount hook called")},
        mounted: function(){console.log("Mounted hook called")},
        beforeUpdate: function(){console.log("Before Update hook called")},
        updated: function(){console.log("Updated hook called")},
        activated: function(){console.log("activated hook called")},
        //Each Vue instance proxies all the properties found in its data object:
        data: {
            message: "Hello Vue!"
        }
    }
);
//Here is an example of a callback that fires when the 'message' property changes
app.$watch('message', function(newVal, oldVal){
  console.log("The value of message changed from " + oldVal + ' to ' + newVal);
});

var app2 = new Vue(
    {
        el: "#app2",
        data:{
            message: 'You loaded this page on ' + new Date()
        }
    }
);

var app3 = new Vue(
    {
        el:"#app3",
        data: {
            seen: true
        }
    }
);


var app4 = new Vue(
    {
        el:"#app4",
        data:{
            todos: [
                {text: "Learn Javasript"},
                {text: "Learn Vue"},
                {text: "Build  Something awesome!"},
            ]
        }
    }
);

var app5 = new Vue({
  el: '#app5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

var app6 = new Vue({
    el: "#app6",
    data:{
        message: "Enter a message"
    }
});

//defining a new component called todo-item
//Declaration order matters, None of the previous apps can access this component
Vue.component(
    "todo-item",
    {
        // The todo-item component now accepts a
        // "prop", which is like a custom attribute.
        // This prop is called todo
        props:["todo"],
        template: "<li>{{ todo.text }}</li>"
    }
);


var app7 = new Vue(
    {
        el: "#app7",
        data:{
            groceryList: [
                {id: 1, text: "Banana"},
                {id: 2, text: "Cheese"},
                {id: 3, text: "Tomatoes"},
                {id: 4, text: "Cucumbers"},
            ]
        }
    }
);

var app8 = new Vue(
  {
    name: "AJAX Test",
    el: "#app8",
    data:{
      users:[]
    },
    //Here we are using vue-resource to call an external service and load our component with data
    mounted: function(){
      this.$http.get('http://jsonplaceholder.typicode.com/users').then(
        response => { this.users = response.body;},
          response => {console.log('Uh oh hit an error');}
      );
    },

  }
);


let app9 = new Vue({
  el: "#app9",
  data: {
    person:{
      first: null,
      last: null,
      tel: null,
      email: null,
    }
  },
  methods: {
    onSubmit(){
      console.log(JSON.stringify(this.person));
    }
  }
});