代码之家 › 专栏 › 技术社区 › Run

Vue。js+插座。io-在实时应用程序中附加元素?

koa2 vue.js socket.io node.js jquery

0

Run · 技术社区 · 9 年前

我是Vue的新手。js,那么想知道如何在Vue而不是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>

我试过:

     $(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));
          }
        });
      });

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

有什么想法吗?

1 回复 | 直到 9 年前

1

Vamsi Krishna 9 年前

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' 因此它由vue控制
使用在表单上添加提交事件 @submit.prevent submitMsg . 这个 prevent
v-model 关于双向数据输入
V-模型 inputMsg 获取输入值并在表单提交方法中使用
在发出套接字事件后,使用将输入值设置为空 this.inputMsg = '';
在板条箱生命周期挂钩设置中,设置套接字事件侦听器并将消息推送到数据属性 messages:[] 初始化为空数组
通过 messages[] 在模板中使用 v-for='message in messages' <li> 中每个项目的元素