Vue小知识5.单文件组件

在vue官网中对单文件组件也有说明，链接如下：https://cn.vuejs.org/v2/guide/single-file-components.html

在项目开发时使用扩展名为.vue的单文件组件来进行编写，整体结构如下：

在HTML部分写页面的基础信息

<template>
  <div>基本信息</div>
  <p>{{taskData.msg}}</p>
</template>

在Script部分写整个页面所需要的性能，目前我主要用的包括1.声明引用的组件位置，2.定义单组件文件名字，3.列出组件参数，4.生命组件，5.列出 data的数据，6.生命钩子调用，7.列出各种method的功能 这七种类型，整体结构布局大致如下：

<script>
  import adder from '@/models/adder'
  
  export default{
   name: 'Info',
   props: {
      id:{ 
          type:string,
          required:true 
    },
   },
   components: { adder },
   data() {
     return {
      taskData:{
        msg:'hello'
     }
   },
   mounted() {

   },
   methods:{
    detailInfo() {
    blockApi.describeInstance({})
    }
  }
 }
</script>

在Style部分写CSS的布局，结构如下：

<sytle>
  div {
   width:20px
 }
</style>

我是学习vue的新人，在目前学习阶段主要经历以上几种类型，后续在继续补充。若有不对之处，还请指教和补充