Vusher

Chat desenvolvido com Vue e Pusher

by Angelo Rogério Rubin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<p v-component="my-component"></p>
<div class="container" id="chat">
    <div id="messages" rows="5"></div>    
    <input type="text" id="message">
    <input type="button" v-on="click: sendMessage" value="send">
</div>

CSS

#messages {
    width: 100%;
    min-height: 100px;
}
p {
    width: 100%;
    border: 1px solid #CCC;
}

JavaScript

Vue.component('my-component', {
  data: function () {
    return {
      title: 'Hello!'
    }
  }
});

var chat = new Vue({
    el: '#chat',
    data: {
        message: '',
        date: '',
        hour:'',
        minutes:'',
        seconds:''
    },
    methods: {
        getHour: function(){
            var date = new Date();
            this.seconds = date.getSeconds();
            this.minutes = date.getMinutes();
            this.hour = date.getHours();
            return this.hour+':'+this.minutes+':'+this.seconds;
        },
        sendMessage: function(){
            this.message = $('#message').val();
            $('<span>'+this.getHour()+'</span><p>'+this.message+'</p>').prependTo('#messages');
            $('#message').val('');
        }
    }
})