vue的html5连接蓝牙代码

以下是一个使用Vue.js和Web Bluetooth API连接到蓝牙设备的示例代码：

<template>
  <div>
    <button @click="connectToDevice">Connect to device</button>
    <button @click="disconnectFromDevice">Disconnect from device</button>
    <ul>
      <li v-for="device in devices" :key="device.id">
        {{ device.name }} <button @click="connectToDevice(device)">Connect</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      devices: [],
      connectedDevice: null,
    };
  },
  created() {
    this.scanForDevices();
  },
  methods: {
    async scanForDevices() {
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ name: 'My Device Name' }],
      });
      this.devices.push(device);
    },
    async connectToDevice(device) {
      try {
        const server = await device.gatt.connect();
        const service = await server.getPrimaryService('service_uuid');
        const characteristic = await service.getCharacteristic('characteristic_uuid');
        characteristic.addEventListener('characteristicvaluechanged', this.handleCharacteristicValueChanged);
        await characteristic.startNotifications();
        this.connectedDevice = device;
      } catch (error) {
        console.error(error);
      }
    },
    async disconnectFromDevice() {
      if (this.connectedDevice) {
        const server = await this.connectedDevice.gatt.disconnect();
        this.connectedDevice = null;
      }
    },
    handleCharacteristicValueChanged(event) {
      const value = event.target.value;
      // Handle characteristic value change event
    },
  },
};
</script>

在这个示例中，我们使用`navigator.bluetooth.requestDevice()`方法来获取一个带有指定名称的蓝牙设备。然后，我们使用`device.gatt.connect()`方法连接到设备，并获取到一个`server`对象。接下来，我们使用`server.getPrimaryService()`方法获取到一个服务对象，再使用`service.getCharacteristic()`方法获取到一个特征对象。我们使用`characteristic.addEventListener()`方法监听特征值变化事件，并使用`characteristic.startNotifications()`方法开始接收来自设备的通知。最后，我们使用`device.gatt.disconnect()`方法断开与设备的连接。