vue创建组件的几种方法_温瞳_前端开发者

<html>

<head>
    <title>vue创建组件</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <my-com1></my-com1>
        <my-com2></my-com2>
        <my-com3></my-com3>
    </div>
    <div id="app2">
        <private></private>
    </div>
    <template id="temp1">
        <div>
            <h3>这是通过template元素在外部定义的组件结构</h3>
        </div>
    </template>
    <template id="temp2">
        <div>
            <h3>这是一个私有组件</h3>
        </div>
    </template>
</body>
<!-- 这里请引入cdn或者是下载到本地的vue.js -->
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    //ps:组件模板只能有一个根元素
    //一、创建全局的组件
    //方式1 使用中间变量
    //1.1使用extend创建
    var com1 = vue.extend({
        template:'<h3>这是使用vue.extend创建的组件</h3>'
    })
    //1.2使用vue.component(),定义组件的名称
    Vue.component('myCom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写,并以-连接两个单词,不使用则引用时标签名与定义一致
    //方式2 不使用中间变量
    Vue.component('myCom2',Vue.extend({
        template:'<h3>这是使用Vue.component创建的组件</h3>'
    }))
    //更简洁的方式
    Vue.component('mycom2',{
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
    })
    // 方式3 通过在template元素,在被控制的#app外面定义组件的模板
    Vue.component('myCom3',{
        template:'#temp1'
    })
    let vm = new Vue({
        el: "#app",
        data:{

        }
    });
    //二、创建私有组件
    let vm2 = new Vue({
        el: "#app2",
        data:{

        },
        components:{
            private:{
                template:"#temp2"
            }
        }
    });
</script>

</html>
<html>

<head>
    <title>vue创建组件</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <my-com1></my-com1>
        <my-com2></my-com2>
        <my-com3></my-com3>
    </div>
    <div id="app2">
        <private></private>
    </div>
    <template id="temp1">
        <div>
            <h3>这是通过template元素在外部定义的组件结构</h3>
        </div>
    </template>
    <template id="temp2">
        <div>
            <h3>这是一个私有组件</h3>
        </div>
    </template>
</body>
<!-- 这里请引入cdn或者是下载到本地的vue.js -->
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    //ps:组件模板只能有一个根元素
    //一、创建全局的组件
    //方式1 使用中间变量
    //1.1使用extend创建
    var com1 = Vue.extend({
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
    })
    //1.2使用Vue.component(),定义组件的名称
    Vue.component('myCom1',com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写,并以-连接两个单词,不使用则引用时标签名与定义一致
    //方式2 不使用中间变量
    Vue.component('myCom2',Vue.extend({
        template:'<h3>这是使用Vue.component创建的组件</h3>'
    }))
    //更简洁的方式
    Vue.component('mycom2',{
        template:'<h3>这是使用Vue.extend创建的组件</h3>'
    })
    // 方式3 通过在template元素,在被控制的#app外面定义组件的模板
    Vue.component('myCom3',{
        template:'#temp1'
    })
    let vm = new Vue({
        el: "#app",
        data:{

        }
    });
    //二、创建私有组件
    let vm2 = new Vue({
        el: "#app2",
        data:{

        },
        components:{
            private:{
                template:"#temp2"
            }
        }
    });
</script>

</html>

<html><head><title></title><meta charset=”utf-8″></head><body><div id=”app”><my-com1></my-com1><my-com2></my-com2><my-com3></my-com3></div><div id=”app2″><private></private></div><template id=”temp1″><div><h3></h3></div></template><template id=”temp2″><div><h3></h3></div></template></body><!– 这里请引入cdn或者是下载到本地的vue.js –><script src=”node_modules\vue\dist\vue.js></script><script>//ps:组件模板只能有一个根元素//一、创建全局的组件//方式1 使用中间变量//1.1使用extend创建var com1 = Vue.extend({
template:
<h3>这是使用Vue.extend创建的组件</h3>
})
//1.2使用Vue.component(),定义组件的名称 Vue.component(myCom1,com1);//使用驼峰命名是则在引用时就需将大写的字符变为小写,并以-连接两个单词,不使用则引用时标签名与定义一致//方式2 不使用中间变量 Vue.component(myCom2,Vue.extend({
template:
<h3>这是使用Vue.component创建的组件</h3>
}))
//更简洁的方式 Vue.component(mycom2,{
template:
<h3>这是使用Vue.extend创建的组件</h3>
})
// 方式3 通过在template元素,在被控制的#app外面定义组件的模板 Vue.component(myCom3,{
template:
#temp1
})
let vm
=new Vue({
el:
#app,
data:{

}
});
//二、创建私有组件 let vm2 =new Vue({
el:
#app2,
data:{

},
components:{
private:{
template:#temp2
}
}
});
</script></html>

  效果:

 

» 本文来自:前端开发者 » 《vue创建组件的几种方法_温瞳_前端开发者》
» 本文链接地址:https://www.rokub.com/73856.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 1

评论前必须登录!

 

  1. #1

    这么全面的教程,博主真厉害

    匿名3个月前 (04-05)