学习记录——Vue单页面和组件(全局组件、局部组件)

本文详细介绍了Vue中的单文件组件,包括template、script和style的使用。通过实例演示了如何创建局部组件和全局组件,以及它们在项目中的应用。在创建局部组件时,组件需导出并在父组件中引入使用;而全局组件则需在components文件夹的index.js中注册并挂载到Vue实例上,以便在项目任何地方调用。
摘要由CSDN通过智能技术生成

template:模板,最终会作为页面结构出现在页面中,根标签下只能有一个div,全部内容都写在这个div里边,如果在这个div同级下再写一个div会报错
script :组件相关的配置
style: 样式
相当于理解成,整个vue文件就是一个组件

认识vue的单文件组件

搭建符合vue单文件组件的开发环境
单文件组件:
vue为了更加形象去编写组件(html,css,js),发明了一种新型文件类型xxx.vue,通过vue-loader进行webpack的打包成js文件
在这里插入图片描述
template标签下只能有一个根元素,所有内容都写在这里面。

vue的组件(核心)
创建组件
组件传值
封装组件
工程化

创建组件
为什么会有组件?逻辑拆分、逻辑复用
全局组件(所有的地方都可以用)
局部组件(只能在某一个页面使用,必须先导出再导入)

创建局部组件

搭建完目录结构及下载相关插件和配置文件后
(直接使用了上一次配置好的:

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值