本篇文章和大家了解一下vue页面的3个组成部分。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

创新互联建站拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站设计、网站制作、网站维护、西部信息中心解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、购物商城网站建设、政府网站等各类型客户群体，为全球千余家企业提供全方位网站维护、服务器维护解决方案。

vue页面有3个组成部分：1、模板（template），即template标签包裹的界面展示代码（HTML代码）；2、script标签包裹的业务实现代码（js脚本代码）；3、style标签包裹的界面样式代码（css样式代码）。

一个vue页面通常由三部分组成：模板(template)、js(script)、样式(style)

[template-模板]

（1） 模板只能包含一个父节点，也就是说顶层的div只能有一个（如上图，父节点为#app的div，其没有兄弟节点）

（2）是子路由视图插槽，后面的路由页面都显示在此处，相当于iframe

【script-JS代码】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

【style-CSS样式】

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，

引入外部CSS示例：

以上就是vue页面的3个组成部分的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注创新互联行业资讯频道哦！

标题名称：vue页面的3个组成部分
分享URL：http://kswsj.cn/article/geggpd.html