Java教程

4.1.3 单文件组件

本文主要是介绍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 单文件组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!