Vue.js + Socket.io - 在實時應用中添加元素？

我是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>

它沒有明顯的工作。

任何想法？

來源

2017-08-16 laukok

你可以這樣做完全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[]

來源

2017-08-16 09:06:24

什麼是'，zthis'？ – laukok

@ teelou這是一個錯字 –

也，你有兩個id =「應用程序」在HTML中。 – laukok

Vue.js + Socket.io - 在實時應用中添加元素？

回答

相關問題