Vue.js 组件基础

1.前言

• 本节讲述vue组件的基本格式以及实际开发的应用场景，本节内容兼容Vue2.x与Vue3.x

2.组件基础

• 组件的本质其实就是一个对象，这个对象包含多个属性，常见的属性有：template/data/methods/props/生命周期等

    var some_component = {
        'template':"
{{name}}
",
        data:function(){
            return {
                name:'child'
            }
        },
        props:{},
        methods:{
            
        },
        computed:{
            
        },
        created(){
            
        }
    }

3.Vue 单文件组件 (SFC) 规范

• 实际开发中，用上面的写法来定义一个组件是不明智的，就拿template为例，需要拼接大量的html字符串，既不方便编写，也不便于维护
• 为了方便组件代码的封装复用，每一个组件对应一个vue文件，这个文件需要遵循 Vue 单文件组件 (SFC) 规范
• 每个 .vue 文件包含三种类型的顶级语言块 template、script 和 style，其中template负责HTML模板,script负责js脚本,style负责样式
• vue2.x只有一个根标签，vue3.x没有这个限制

// lang表示所使用的CSS 预处理语言
// scoped表示里面的样式作用范围此局限在此组件中