Vue组件的命名和组成部分

1.1 Vue组件的命名

组件名必须多词格式，采用多词格式或中间加"-"；根组件App.vue是特殊组件，采用了单词命名。

<template>
    <div>
        <h3>组件命名：多词格式。具体来说三种写法：</h3>
        <ul>
            <li>小峰： abcDef.vue</li>
            <li>大驼峰：AbcDef.vue</li>
            <li>中横袋： abc-def.vue</li>
        </ul>
        <p>补充：如果文件名不是多词格式，可以在js代码中，指定name，name是多词格式也可以</p>
    </div>
</template>

<script>
export default {
    name:'abc-def'
}
</script>

<style lang="scss" scoped></style>

1.2 Vue组件的组成部分

1.2.1 Vue组件的模版创建

因为有vue代码高亮插件，输入vbase按回车，可以快速创建模版

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

1.2.1 Vue组件的组成部分

<template> 
    <!-- 使用vbase进行代码提示 -->
    <div> // template只能有一个根元素

    </div>
</template>

<script>
    // vue代码都要写到默认导出对象里面
    export default {
        name:'xxx',
        data() { // data要写成函数形式，在函数中返回一个对象
            return {
                name:'xx'
            }
        },
        mothods: {},
        computed: {},
        watch: {},
        created() {},
        mounted() {}
        
    }
</script>

<style lang="scss" scoped>
/* 让style支持less
   1. 给style加上 lang="less"
   2. 安装依赖包 less less-loader
       npm i less less-loader -D
      yarn add less less-loader -D (开发依赖)
*/

</style>