网站项目接单,html代码颜色表,金华高端网站建设,个人网站做电影网站vue前端开发自学,组件的嵌套关系demo!今天开始分享的#xff0c;前端开发经常用到的#xff0c;组件的嵌套关系案例代码。下面先给大家看看#xff0c;代码执行效果。 如图#xff0c;这个是代码执行后#xff0c;的效果布局#xff01;
下面给大家贴出来源码。方便大家…vue前端开发自学,组件的嵌套关系demo!今天开始分享的前端开发经常用到的组件的嵌套关系案例代码。下面先给大家看看代码执行效果。 如图这个是代码执行后的效果布局
下面给大家贴出来源码。方便大家自己在本地电脑上调试练习你可以自己手动输入强化记忆。都行。
templateh3article/h3/template
style scoped
h3{width:80%;margin:0 auto;text-align:center;line-height:100px;box-sizing:border-box;margin-top:50px;background:#999;
}
/style
这个是Article.vue的源码如上所示。 templatediv classasideh3Aside/h3Item /Item /Item //div
/template
script
import Item from ./Item.vueexport default{components:{Item}}
/script
style scoped
.aside{float: right;width:30%;height: 600px;border:5px solid #999;box-sizing: border-box;}
h3{border-left:0px;
}
/style这个是Aside.vue的源码如上所示。 templateh3Header/h3
/template
styleh3{width:100%;height: 100px;border: 5px solid #999;text-align: center;line-height: 100px;box-sizing: border-box;}
/style
这个是Header.vue的源码。如上所示。 templateh3Item/h3
/template
style scoped
h3{width:80%;margin:0 auto;text-align:center;line-height: 100px;box-sizing: border-box;margin-top: 10px;background:#999;
}
/style
这个是Item.vue的源码如上所示。 templatediv classmainh3Main/h3Article /Article //div
/template
scriptimport Article from ./Article.vue;export default{components:{Article}}
/script
style scoped
.main{float: left;width: 70%;height: 600px;border: 5px solid #999;box-sizing: border-box;}
h3{border-right:0px;
}
/style这个是Main.vue的源码如上所示。 templateHeader /Main /Aside /
/template
script
import Header from ./pages/Header.vue
import Main from ./pages/Main.vue
import Aside from ./pages/Aside.vue
export default{components:{Header,Main,Aside}
}
/script
style
/style
这个是App.vue入口文件的源码如图所示。 介绍说明这个可以看出来我们采用的都是局部引用的方式vue其实还有一个叫全局注册全局引用的方式那个不利于项目打包还有也不利于逻辑关系的分辨所以官方不推荐使用全局引用大家可以根据个人的情况自己斟酌到底是局部还是全局。一般来说都是局部引用较为常见的。 以上几个vue文件都是创建在了一个独立的文件夹内如图所示。有些公司开发项目的时候前端页面的组件喜欢放在Views名字不同而已其实就是存放的前端组件。
