4.1.3 单文件组件
2022/6/17 23:28:28
本文主要是介绍4.1.3 单文件组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue.js 自定义了一种 .vue 文件,可以把 HTML、css、JS 代码写到一个文件中,从而实现对一个组件的封装,一个 .vue 文件就是一个单独的组件。由于 .vue 文件是自定义的,浏览器不能识别,因此在 Webpack 构建中,需要安装 vue-loader 对 .vue 文件进行解析。在 Visual Studio Code 编辑器中,书写 .vue 文件前也需要安装对应的插件(如 Vetur)来增加对文件的支持。
使用 Vue-cli 新建一个大觅项目,项目首页代码如示例 1 所示。其中,template 标签中都是 HTML 代码,定义了在页面中显示的内容,也可以说定义了一个模板。script 标签中都是 JS 代码,定义了组件中需要的数据和操作。style 标签中是 CSS 样式,定义了组件的样式,属性 scoped 表明这里写的 CSS 样式只适用于该组件,限定样式的作用域。
在代码中,export default 后面的对象是定义组件所需要的数据(data)以及操作数据的方法等,更加完整的 export default 对象还包括 methods、data、computed 等。不难发现,在 .vue 组件中,data 必须是一个函数,它返回一个对象,这个对象数据供组件实现。
经验
单文件组件在工程化的项目开发中使用最为频繁,一定要理清楚单文件组件的使用。
这篇关于4.1.3 单文件组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了