VUE初始程序

新建的VUE程序界面中添加鼠标事件，鼠标事件在HTML中填写并附加函数
在script中添加常量

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <button style="line-height: 30px; padding: 0 20px" @click="count++">Count is: {{ count }}</button>
    <!-- 按钮大小竟然自适应 -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

通过调用methods来填写一个复杂函数，实现

<script>
export default {
  // reactive state
  data() {
    return {
      count: 0
    }
  },

  // functions that mutate state and trigger updates
  methods: {
    increment() {
      this.count++
    }
  }，
}
</script>

<template>
  <button @click="increment">Count is我加加: {{ count }}</button>
</template>