vue怎么去定义-创建-注册-使用组件

定义-创建vue实力对象并挂载到页面:

<div id="app">
    <h1>{{msg}}</h1>
</div>
<script>
//定义vue组件
Vue.extend({
//创建vue组件
    template:'<ul><li v-for="(user,index) in userList" :key="user.id">{{user.id}}===={{user.name}}</li></ul>',
    data(){
            return{
                userList:[
                    {id:'001',name:'jack'},
                    {id:'002',name:'lucy'},
                    {id:'003',name:'john'}
                ]
            }
    }
})
//创建vue实例
const myVue = new Vue(
           {
            el:'#app',
            data:{
                msg:'我的第一个组件'
            }
           }
        )
</script>

注册并使用组件：

<div id="app">
        <h1>{{name}}</h1><br>
        <user-list>

        </user-list>
    </div>
    <script>
        
//定义组件
const myComponent = Vue.extend({
    //创建组件
    template:'<ul><li v-for="(user,index) in userList" :key="user.id">{{user.id}}===={{user.name}}</li></ul>' ,
        data(){
            return{
                userList:[
                    {id:'001',name:'jack'},
                    {id:'002',name:'lucy'},
                    {id:'003',name:'john'}
                ]
            }
        }
})
        //创建vue实例
        const myVue = new Vue(
           {
            el:'#app',
            data:{
                name:'我的第一个组件'
            }
            ,
            components:{
                //注册组件
                'user-list':myComponent
            }
           }
        )
    </script>

运行结果：