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
最新资源
- 软考冲刺的基本内容和操作
- Centos8.x通过RPM包升级OpenSSH9.8（openssl-3.0） 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- Centos8.x通过RPM包升级OpenSSH9.7（openssl-3.0） 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- 数据库基本内容讲解和操作
- Centos8.x通过RPM包升级OpenSSH9.9.（openssl-3.4.0） 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- FortFirewall-3.14.7-windows10-x86-64 防火墙
- javaweb基本操作
- Centos7.x升级openssl-1.1.1w rpm安装包 升级有风险,前务必做好快照，以免升级后出现异常影响业务
- yolo的基本操作用法
- Ubuntu20/22/24通过deb包升级OpenSSH9.9方法 不支持16、18版本,升级有风险,前务必做好快照，以免升级后出现异常影响业务
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
