Vue.js + Socket.io - 在实时应用程序中附加一个元素？答案

【问题标题】：Vue.js + Socket.io - append an element in a real time app?Vue.js + Socket.io - 在实时应用程序中附加一个元素？
【发布时间】：2018-01-24 07:37:46
【问题描述】：

我是 Vue.js 的新手，所以想知道如何在 Vue 而不是 jQuery 中完成这项工作？

当有人在浏览器上输入内容时，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>

它显然不起作用。

有什么想法吗？

【问题讨论】：

标签： jquery node.js socket.io vue.js koa2

【解决方案1】：

即使不使用这样的 jquery，您也可以使用完整的 vuejs 方式：

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 = '';将输入值设置为空
在 crated 生命周期钩子中设置套接字事件侦听器并将消息推送到数据属性messages:[]，该属性被初始化为空数组
使用v-for='message in messages'循环遍历模板中的messages[]，为messages[]中的每个项目呈现<li>元素

【讨论】：

什么是,zthis??
@teelou 打错了
@teelou 我会完全添加解释并格式化并让你知道
@teelou 很乐意帮助对他的回答添加任何更改（如果有的话）...... :)