用vue写一个websocket的链接

好的，以下是一个使用 Vue.js 和 WebSocket 的示例代码：

<template>
  <div>
    <h1>WebSocket Example</h1>
    <div v-if="connected">Connected to WebSocket server!</div>
    <div v-else>Not connected to WebSocket server.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      connected: false,
      socket: null,
    };
  },
  mounted() {
    // 创建 WebSocket 实例
    this.socket = new WebSocket('ws://localhost:8080');

    // 监听 WebSocket 连接成功事件
    this.socket.addEventListener('open', () => {
      console.log('WebSocket connected!');
      this.connected = true;
    });

    // 监听 WebSocket 断开连接事件
    this.socket.addEventListener('close', () => {
      console.log('WebSocket disconnected!');
      this.connected = false;
    });
  },
  beforeDestroy() {
    // 关闭 WebSocket 连接
    this.socket.close();
  },
};
</script>

在这个示例中，我们创建了一个 WebSocket 实例，并在 `mounted` 生命周期钩子中监听了连接成功和断开连接事件。在 `beforeDestroy` 生命周期钩子中，我们关闭了 WebSocket 连接。

请注意，这个示例中使用的 WebSocket URL 是 `ws://localhost:8080`，你需要根据你的实际情况修改它。

同时，你还需要在服务器端实现一个 WebSocket 服务器来处理客户端的连接请求。