【请教】Vue代码格式怎么一会一个样，看得有点懵

Question

直接嵌入在html，里new Vue这种就看得懂，也可以跟着敲例子
但是如下这种，我要怎么把它实现为可看的呢？？这是一个.vue文件吗？？

<template>
   <div>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
      <button @click='changeData'>改变数据</button>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          StringMsg : 'hello vue',
          NumberMsg : 2.4
       }
     },
     methods: {
       changeData () {
         this.StringMsg = 2.4;
         this. NumberMsg = 'hello vue'
       }
     }
   }
</script>

Answer 1

这个是单文件组件，官方文档有说明。

Answer 2

其实正常来说更推荐写成vue文件的形式