<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="buttonClicked">点击</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      // 在这里声明数据
      title:'测试一下'
    }
  },

  methods: {
    buttonClicked() {
      alert('你好');
      
      console.log("测hi啊    ");
      this.title='哈哈111'
    }

  }
}
</script>

<style scoped>
.my-component {
  background-color: #F5F5F5;
  padding: 20px;
  border: 1px solid #FF0000;
}
</style>
