0

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

它显然不起作用。

有任何想法吗？

4

1 回答 1

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 包裹整个 htmlid='app'以便由 vue 控制

  • 在表单上添加了一个提交事件，使用@submit.prevent该事件调用该方法submitMsg。修饰符prevent阻止表单实际提交

  • 在输入上设置一个v-model双向数据绑定

  • 现在可以使用v-modelwhich isinputMsg获取输入的值，并在表单提交方法中使用

  • 发出套接字事件后，使用将输入值设置为空this.inputMsg = '';

  • 在 crated 生命周期钩子中设置一个套接字事件侦听器并将消息推送到messages:[]初始化为空数组的数据属性

  • messages[]在模板中循环使用它为每个项目v-for='message in messages'呈现一个元素<li>messages[]

于 2017-08-16T09:06:24.813 回答