如何将codepen.io示例复制到.vue中

<div class="example">
  <h1>Hello, World!</h1>
  <button onclick="changeText()">Change Text</button>
</div>

function changeText() {
  document.querySelector('h1').textContent = 'Text Changed!';
}

.example {
  text-align: center;
}
.example h1 {
  color: blue;
}

<template>
  <div class="example">
    <h1>{{ message }}</h1>
    <button @click="changeText">Change Text</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  methods: {
    changeText() {
      this.message = 'Text Changed!';
    }
  }
};
</script>

<style scoped>
.example {
  text-align: center;
}
.example h1 {
  color: blue;
}
</style>