首页 > web前端 > 前端问答 > vue页面有哪些组成

vue页面有哪些组成

青灯夜游
发布: 2022-12-20 13:42:11
原创
4007 人浏览过

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

vue页面有哪些组成

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

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

  • <template>界面展示代码(需要注意的是只能有一个大的div)</template>

  • <script>export default {业务实现代码}</script>

  • <style scoped>界面布局代码(scoped 解决了css全局污染)</style>

vue页面有哪些组成

[template-模板]

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

(2)是子路由视图插槽,后面的路由页面都显示在此处,相当于iframe

【script-JS代码】

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

【style-CSS样式】

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

引入外部CSS示例:

<style>
    import &#39;./assets/css/public.css&#39;
</style>
登录后复制

【相关推荐:vuejs视频教程web前端开发

以上是vue页面有哪些组成的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板