2017-08-16 16 views
0

我是Vue.js的新手,想知道如何在Vue中完成这项工作,而不是jQuery?Vue.js + Socket.io - 在实时应用中添加元素?

的socket.io和jQuery将append浏览器上的<li>每次当有人输入一些东西。

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
    </style> 
    </head> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     $(function() { 
      var socket = io(); 
      $('form').submit(function(){ 
       socket.emit('chat message', $('#m').val()); 
       $('#m').val(''); 
       return false; 
      }); 

      socket.on('chat message', function(msg){ 
       $('#messages').append($('<li>').text(msg)); 
      }); 
      }); 
    </script> 
    <body> 
    <ul id="messages"></ul> 
    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    </body> 
</html> 

这是如何在Vue中完成的?

我想:

 $(function() { 
     var socket = io(); 
     $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 

     var app = new Vue({ 
      el: '#app', 
      data: { 
      message: "Hello World" 
      }, 
      created: function() { 
      socket.on('chat message', function(data) { 
       this.message = data.message; 
      }.bind(this)); 
      } 
     }); 
     }); 

在我的新HTML:

<form action=""> 
    <input id="m" autocomplete="off" /><button>Send</button> 
    <span id="app">{{ message }}</span> 
</form> 

它没有明显的工作。

任何想法?

回答

1

你可以这样做完全vuejs即使不使用jQuery这样的:

HTML

<div id="app"> 
    <form @submit.prevent="submitMsg"> 
     <input id="m" autocomplete="off" v-model="inputMsg"/> 
     <button type="submit">Send</button> 
     <span> 
      <ul> 
       <li v-for="message in messages">{{message}}</li> 
      </ul> 
     </span> 
    </form> 
</div> 

脚本

var app = new Vue({ 
     el: '#app', 
     data: { 
      socket: null, 
      inputMsg: '', 
      messages: [] 
     }, 
     created: function() { 
     this.socket = io(); 
     this.socket.on('chat message', function(msg) { 
      this.messages.push(msg); 
     }.bind(this)); 
     }, 
     methods:{ 
      submitMsg(){ 
       this.socket.emit('chat message', this.inputMsg); 
       this.inputMsg = ''; 
      } 
     } 
    }); 

那么什么'的事情:

  • id='app'一个div的整个HTML,以便它是由控制VUE

  • 加入使用@submit.prevent它调用方法submitMsg窗体上提交事件。该prevent修改防止形式被实际提交

  • 设置一个v-model上输入这是双向的数据奔

  • 现在你可以使用v-model这是inputMsg得到输入的值,并用它在发光插座事件设置的输入值在空生命周期装箱使用呼this.inputMsg = '';

  • 后的形式提交方法

  • ķ设置一个插座事件侦听器和推送消息到其被初始化为空数组的数据属性messages:[]

  • 环槽在使用v-for='message in messages'模板这使得在messages[]

为每个项目一个 <li>元件 messages[]
+0

什么是',zthis'? – laukok

+0

@ teelou这是一个错字 –

+0

也,你有两个id =“应用程序”在HTML中。 – laukok