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 = '';
          }
      }
    });

那是怎么回事：

使用div id='app'包装整个html，以便由vue控制
使用@submit.prevent在表单上添加了一个提交事件，该事件调用方法submitMsg。 prevent修饰符可阻止表单实际提交
在输入上设置v-model，这是双向数据boun
现在您可以使用v-model inputMsg获取输入值并在表单提交方法中使用
使用this.inputMsg = '';
在crated lifecycle hook中设置套接字事件监听器并将消息推送到数据属性messages:[]，该属性初始化为空数组
使用messages[]循环模板中的v-for='message in messages'，为<li>

messages[]

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

1 个答案: