vue.js学习之学习之UI组件开发教程组件开发教程
前端开发中,随着业务的增多,出于效率的考虑,我们对于组件化开发的需求也越来越迫切。下面这篇文章主要给大
家介绍了关于vue.js之UI组件开发的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。
本文主要给大家介绍了关于vue.js之UI组件开发的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
1. 新建组件：新建组件：
<script src="/public/javascripts/vue.js"></script>
<style>
#app1{background-color: red}
#app2{background-color: blue}
</style>
<body>
<div id="app1">
<box-one></box-one>
<box-two></box-two>
<boxThree></boxThree>
</div>
<div id="app2">
<box-one></box-one>
<box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
el: '#app1',
components: {
'box-two': {
template: '<div class="box-two">box-two</div>'
},
'boxThree': {
template: '<div class="boxThree">boxThree</div>'
}
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
Vue.component 方法用于注册全局组件， new Vue({ components: {}}) 用于注册某个实例内使用的组件，所以 <box-two></box-two>
在 #app2 中失效；
由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的 <boxThree></boxThree> ；
在实例以外无法使用任何组件；
2. 浏览器渲染网页标签的限制：浏览器渲染网页标签的限制：
<script src="/public/javascripts/vue.js"></script>
<style>
.red{background-color: red}
.blue{background-color: blue}
</style>
<body>
<div id="app1">
<table class="red">
<box-one></box-one>
</table>
<select class="red">
<box-two></box-two>
</select>
<table class="blue">
<tr is="box-one"></tr>
</table>
<select class="blue">
<option is="box-two"></option>
</select>
</div>
<script>
Vue.component('box-one', {
剩余6页未读，继续阅读
资源评论
weixin_38715831
- 粉丝: 4
- 资源: 990
最新资源
- 基于TypeScript的数据库实训平台前端设计源码
- 基于SSM框架与微信小程序的图书馆自习室座位预约管理系统设计源码
- 基于SL4J格式的C++日志管理设计源码
- 基于yolov3-tiny-bubbliiiing和Tkinter的实时物体检测界面设计源码
- 基于《JS DOM 编程艺术》（第2版）的JavaScript DOM编程设计源码学习
- ADASIS V2&V3协议
- 基于HTML、JavaScript等技术的全栈前端学习笔记设计源码
- 基于Vue的网易云音乐高仿设计源码
- 基于C语言的串口数据流处理库设计源码
- PTA实验和作业成绩.rar
- 基于SpringBoot+Vue的校园闲置物品租售平台设计源码
- 基于Vue3+AntDesign4的ivzone CRUD组件库及后台管理模板设计源码
- 基于EVE ESI的合同估价与吉他价格计算器设计源码
- 基于Vue-cli3的仿去哪儿旅行APP设计源码
- 基于Windows日志监听的SQLServer登录失败IP黑名单自动添加设计源码
- 基于Java和最新框架的在线课程教育系统设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
