关于vue组件的个人理解

一，介绍

关于对于使用vue的核心，也就是对组件的使用，也就是对于vue的核心的基本的了解了。
组件是vue的重要概论，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

二，基本使用

首先创建一个文件，导入vue的cdn的地址

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第二步，创建一个div区域给vue做代理的作用，可以在这个区域里面随便创建组件。

<div class="app">
        //组件标签
        <test-component></test-component>
    </div>

第三步，new 一个VUE实例，代理

script>
        let vm = new Vue({
            el : ".app",
            data :{
                
            }
        })
    </script>

进行以上的步骤后，就相当于将这个app的标签给vue代理了
就可以给这个组件的使用了

Vue.component("test-component" , {
            template : `
                <ul>
                    <li>{{ msg }}</li>
                    <item-component></item-component>
                </ul>
            `,
            data(){
                return {
                    msg : 123456
                }
            }
        })

也就是将test-component这个标签给vue代理通过template写入到页面中，其中也可以再次套一个组件，再次代理使用
也就是这样的

Vue.component("item-component" , {
            template : `
              <p>{{ mymsg }}</p>
            `,
            data(){
                return {
                    mymsg : 4546
                }
            }
        })

也就是上一个标签test-component中套用item-component这个标签，然后我再次将item-component使用

三，总结

对于用哪种方式创建Vue组件，我们最终的目的是在HTML页面中展示出来。本节将详细介绍Vue组件使用方式。
对于.vue文件的名称就是组件的名称，其结构非常简单、清晰：

• template标签是组件的HTML模板；
• script标签是逻辑代码；
• style标签中是样式代码。