制作一个电子时钟，要求： 1：进入页面显示当前时间； 2. 点击停止按钮，调用生命周期函数清除定时器，并销毁Vue实例； 3. 设定条件，修改时间字体颜色，例如：当秒数>50的时候字体颜色自动变成红色

制作一个简单的Vue.js电子时钟可以按照以下步骤完成：

1. 首先，在Vue项目中创建一个新的组件，比如`ElectronicClock.vue`，并导入Vue框架及相关的依赖。

<template>
  <div class="clock">
    <h1 v-bind:class="{ red: currentTime.getSeconds() > 50 }">{{ currentTime }}</h1>
    <button @click="stopTimer">停止</button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      currentTime: new Date(),
      timerId: null,
    };
  },
  mounted() {
    this.updateTime();
    this.startTimer();
  },
  methods: {
    updateTime() {
      this.timerId = setInterval(() => {
        this.currentTime = new Date();
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timerId);
      // 清除定时器后，你可以选择在此处调用Vue实例的$destroy方法来销毁实例
      // 或者简单地设置timerId为null，因为一旦离开挂载阶段，Vue会自动卸载组件
      // this.$destroy();
      this.timerId = null;
    },
  },
};
</script>

<style scoped>
.clock {
  /* 样式可以根据需要自定义 */
}
.red {
  color: red;
}
</style>

在这个例子中，我们使用了Vue的`mounted`生命周期钩子在组件加载时获取初始时间并开始计时。`updateTime`方法每秒更新一次时间，`stopTimer`方法会在点击停止按钮时清除定时器，并停止时间更新。