template的发展

template是模板，它决定了组件最终的样子
定义template的方式有三种：
- 1.在组件中通过template属性去指定
- 2.直接在网页的根元素中指定，如上(正常开发时基本不用)
- 3.组件中通过render直接渲染(特殊场景下才使用)
注意：如果在组件中定义了template会优先使用template作为模板，同时根元素中的所有内容都会被替换，
如果在组件中没有定义template，则会使用根元素的innerHTML作为模板使用

以上使用方法都不太好
template是用字符串在编写模板：
- 1. 这些字符串会在项目运行时，在浏览器中被编译为js函数，有这个过程会影响性能
- 2. 在字符串中编写代码时，体验也很差(没有提示)
为了解决这个问题，Vue为我们提供了一种单文件组件 (SFC)
- 单文件组件的格式后缀是vue
- vue文件用来单独编写单文件组件，
vue文件本身不能被浏览器识别，所以它必须被构建工具打包后才可使用
- 同时vue文件在打包时，构建工具会直接将template转换为函数，
无需在浏览器中再去编译，这样也会使性能有所提升
- 3.单文件使用示例

<script>
/* 在script标签中可以编写组件的代码 */
export default{
    data(){
        return {
            msg:"ly超漂亮"
        }
    },

    components:{
    }
}
</script>

<template>
    <h1>{{ msg }}</h1>
    <MyButton></MyButton>
    <MyButton></MyButton>
</template>