做跨境电商网站报价,群晖 wordpress 配置文件,做网站 网络科技公司,营销型外贸网站定制组件化开发和根组件
什么是组件化开发#xff1f; 一个页面可以拆分为多个组件#xff0c;每个组件有自己的样式#xff0c;结构#xff0c;行为#xff0c;组件化开发的好处就是#xff0c;便于维护#xff0c;利于重复利用#xff0c;提升开发的效率。 便于维护 一个页面可以拆分为多个组件每个组件有自己的样式结构行为组件化开发的好处就是便于维护利于重复利用提升开发的效率。 便于维护页面中块出了问题可以直接去找到这个组件修改组件的样式逻辑结构。 利于重复使用组件可以重复使用哪里需要哪里直接搬过去就可以自然也就提升了开发的效率。 就比如下图组件化开发就类似于搭积木。
组件又可以分为根组件和小组件
就比如第一张图一整个就是一个根组件而它也是由各个小组件构成。
根组件
其中根组件(单页面组件)由 结构(template) 行为(js) 样式(css) 三部分组成
!-- 结构 template--
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App//div
/template!-- 行为 script--
script
import HelloWorld from ./components/HelloWorld.vueexport default {name: App,components: {HelloWorld}
}
/script!-- 样式 style--
style
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style普通组件
普通组件是需要注册才可以使用注册又分为局部注册 和 全局注册
局部注册只能在注册的组件内只用 1.创建.vue文件(三部分组成)在components目录下创建。 注意组件名称规范必须是以大驼峰命名法. 简单写几行主要是三部分组成
templatediv classMyBody我是MyBody/div
/template
script
export default {
}
/script
style.MyBody{width: 100%;height: 400px;background-color: skyblue;}
/style2.在使用的组件内导入并注册 1.引入组件。
import Mybody from ./components/MyBodys.vue2.注册组件。
components: {MyHeader:MyHeader,MyFooter:MyFooter,Mybody:Mybody,}也可以是这样写但是必须是组件名称与属性名称一样
components: {MyHeader,MyFooter,Mybody,}3通过注册属性名称直接使用。
templatediv idappMyHeader/MyHeaderMybody/MybodyMyFooter/MyFooter/div
/templateApp.vue完整代码
!-- 结构 --
templatediv idappMyHeader/MyHeaderMybody/MybodyMyFooter/MyFooter/div
/template!-- 行为 --
script
import MyFooter from ./components/MyFooters.vue
import Mybody from ./components/MyBodys.vue
import MyHeader from ./components/MyHeader.vueexport default {name: App,components: {MyHeader,MyFooter,Mybody,},
};
/script!-- 样式 --
style
#app {width: 100%;height: 600px;background-color: skyblue;
}
/style效果图
全局注册可以在所有的组件内部使用。
1.创建.vue文件(三部分组成)在components目录下创建。 注意组件名称规范必须是以大驼峰命名法. 2.在mian.js文件内导入并注册
1.引入组件。
import Mybody from ./components/MyBodys.vue2.注册组件。
Vue.component(MyButton,MyButton)3.使用全局组件就可以在任意一个组件里面通过MyButton标签来使用这个按钮。 如下图我在每个页面都使用了MyButton标签
style上的scoped作用
默认情况:写在组件中的样式会 全局生效》因此很容易造成多个组件之间的样式冲突问题。
全局样式:默认组件中的样式会作用到全局。 局部样式:可以给组件加上 scoped 属性可以让样式只作用于当前组件.
scoped原理? 1.当前组件内标签都被添加 data-v-hash值 的属性
2.css选择器都被添加[data-V-hash值]的属性选择器最终效果: 必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到 知识来源黑马程序员vue2vue3课程
