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 必须是一个函数，它返回一个对象，这个对象数据供组件实现。
经验
单文件组件在工程化的项目开发中使用最为频繁，一定要理清楚单文件组件的使用。
标签：文件,vue,4.1,定义,代码,组件,data 来源： https://www.cnblogs.com/Huang-zihan/p/16387024.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。