vue监听鼠标点击按钮和下拉选有用事件过程并记录下当前监听属性

Vue 可以通过监听事件来监听鼠标点击按钮和下拉选择的操作，以下是一个简单的示例：

HTML 代码：

<template>
  <div>
    <button @click="onButtonClick">点击按钮</button>
    <select @change="onSelectChange" v-model="selectedOption">
      <option v-for="option in options" :key="option.value" :value="option.value">{{ option.text }}</option>
    </select>
  </div>
</template>

JavaScript 代码：

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { text: '选项 1', value: 'option1' },
        { text: '选项 2', value: 'option2' },
        { text: '选项 3', value: 'option3' },
      ],
    };
  },
  methods: {
    onButtonClick() {
      console.log('点击按钮');
    },
    onSelectChange(event) {
      this.selectedOption = event.target.value;
      console.log(`选择了 ${this.selectedOption}`);
    },
  },
};
</script>

这个例子中，我们通过在 HTML 代码中使用 `@click` 绑定点击按钮事件，并在 JavaScript 代码中定义 `onButtonClick` 方法来处理点击按钮事件；同样的，我们通过在 HTML 代码中使用 `@change` 绑定下拉选择事件，并在 JavaScript 代码中定义 `onSelectChange` 方法来处理下拉选择事件。

在当前的例子中，我们监听的属性为鼠标点击按钮事件和下拉选择事件。