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

Question

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

明显不行

有什么想法吗？

Answer 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控制了
使用调用方法 submitMsg 的 @submit.prevent 在表单上添加了一个提交事件。 prevent 修饰符阻止表单实际提交
在输入上设置一个v-model，这是双向数据绑定
现在可以使用v-model也就是inputMsg获取输入的值并在表单提交方法中使用
发出套接字事件后使用this.inputMsg = '';
在创建的生命周期钩子中设置一个套接字事件侦听器并将消息推送到初始化为空数组的数据属性messages:[]
使用 v-for='message in messages' 遍历模板中的 messages[]，这会为 messages[]
中的每个项目呈现一个 <li> 元素

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

Vue.js + Socket.io - append an element in a real time app?

jquery

node.js

socket.io

vue.js

koa2