Vue的单文件组件

最新推荐文章于 2024-04-14 19:56:15 发布
最新推荐文章于 2024-04-14 19:56:15 发布
阅读量752 收藏 1
点赞数 2
分类专栏： VUE 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45991188/article/details/105957905
版权

文章目录

单文件组件

vue 中后缀名是 .vue 的文件，我们称它为 单文件组件

单文件组件的优点

  1. 在 vscode 中安装 vetur 插件。能够让单文件组件有很好的语法高亮和代码提示
  2. 可以将样式写在组件内。并且通过配置还能让样式只对当前组件生效（作用域样式）
    1. 要实现 作用域样式，只需要在单文件组件的 style 标签上设置 scoped 属性
    2. 作用域样式是如何实现的呢？审查元素就可以知道
  3. 可以使用现代化的 ESM 模块化

一个单文件组件的组成

  1. template
  2. script
  3. style

给 style 标签添加上一个 scoped 属性，这时，这个 style 标签中的样式就只对当前组件生效

在这里插入图片描述

使用sass

  1. 在项目中安装 sass-loader
$ npm install sass-loader --save-dev
  1. 在项目中安装 node-sass
$ npm install node-sass --save-dev
  1. 在单文件组件中设置 style 的 lang 属性为 scss

单文件组件的一些特点

  1. 一个单文件组件，必须要有 template 。其余两个可有可无
  2. 如果 script 中暴露组件的选项配置对象时没有设置 name 选项，文件名就是当前的组件名
  3. style 标签可以有多个
    1. style 还可以去配置使用 less 或 sass
图灵晚辈
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Vue 单文件组件的三种写法
10-15
主要介绍了详解Vue 单文件组件的三种写法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【Vue组件详解（三）】
小田是个程序员的博客欢迎你的到来呀~
04-09 2253
本篇文章重点解读VueComponent原型对象和Vue的关系，以及组件实例对象和vm的关系。干货满满，结合原理图展开，欢迎各位小伙伴阅读！！
Vue (9) — 模块与组件、非单文件组件、单文件组件
m0_59897687的博客
12-12 661
目录 一、模块与组件 1.模块 (1).什么是模块 (2).为什么使用模块 (3).模块的作用 2.组件 (1).什么是组件 (2).为什么要使用组件 (3).组件的作用 (4).传统方式与组件方式编写应用的比较 3.模块化 4.组件化 二、非单文件组件 1.定义 2.Vue中使用组件的三大步骤 (一)、定义组件（创建组件） ...
Vue中的单文件组件（Single File Components）是什么？如何使用它们？
最新发布
有我更精彩的博客
04-14 811
Vue单文件组件是指把一个组件的所有相关内容（包括模板、脚本和样式）放在一个单独的.vue文件中。通过这种方式，我们可以把组件的结构、样式和行为都聚合在一起，方便管理和维护。模板（Template）：定义了组件的HTML结构，用于展示组件的内容。脚本（Script）：包含了组件的逻辑代码，实现了组件的功能和交互。样式（Style）：定义了组件的样式，用于美化组件的外观。
Vue组件 —— 单文件组件
灵魂学者的博客
02-04 3457
本篇讲vue单文件组件内容，解决先前vue组件编写方式存在的问题等一系列问题，那么现在在项目当中，也是本篇目中最重要的内容就是Vue的单文件组件，接下来就是开始对Vue单文件组件内容的学习！
Vue-单文件组件使用说明
weixin_39218464的博客
06-23 1726
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js vue-loader 浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等 需要注意的是vue-loader是基于webpack的webpack是一个前端资源模板化加载器和打包工具
Vue单文件组件
见证自己学习,成长的记录
06-12 1159
单文件组件是在开发中用的比较多的，它的后缀都是.vue结尾的既然是.vue结尾，那么直接给浏览器是不能运行的，.vue文件是vue团队打造的特殊文件，想让.vue文件让浏览器识别并且运行，需要对它进行处理加工成纯粹的js文件，那么浏览器就认识了常用的处理加工.vue文件有两种方式1 借助webpack：自己找一些插件完成整个编译流程2 借助脚手架：这是vue官方提供的，它其实就是vue的团队拿着webpack打造完的流程和编译整个环境，我们直接拿来用即可。
基于Vue单文件组件详解
08-29
下面小编就为大家带来一篇基于Vue单文件组件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue单文件组件开发实现过程详解
11-19
使用vue.server和vue.build对*.vue文件进行快速原型开发，需要安装vue serve cnpm install -g @vue/cli-service-global 新建一个App.vue文件测试安装是否成功： <template>2 <h1>Hello world!</h1>3 </template>
Vue单文件组件的如何使用方式介绍
01-19
在很多 vue项目中，我们使用 vue.component 来定义全局组件，紧接着用 new vue(el: ”)在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。...
Vue单文件组件实现列表行添加、删除
04-24
利用Vue的单文件组件模式实现列表项目的添加和删除功能。构建一个完整的项目，完成组件之间的分离，以及子组件与父组件的数据通信
vue单文件组件完整结构.png
04-19
本图为vue单文件组件的完整的结构，包括混入mixins，vuex等写法。比较完整
解决vue 单文件组件中样式加载问题
10-17
主要介绍了解决vue 单文件组件中样式加载问题,文章末尾给大家补充介绍了vue单文件组件中样式的问题，需要的朋友可以参考下
Vue单文件组件添加删除列表行并进行列表检索
04-24
利用Vue的单文件组件模式实现列表项目的添加和删除，以及对列表现有数据进行字段检索。构建一个完整的项目，完成组件之间的分离，以及子组件与父组件的数据通信
Vue单文件组件基础模板小结
08-29
本篇文章主要介绍了Vue单文件组件基础模板小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue单文件组件（SPA）入门+入门案例
四季轮换叶，一路招摇胜
03-02 1237
目录 1.概述 2 .使用vue cli 构建项目 —— 1. 安装vue cli —— 2.创建项目 —— 3. 启动项目 —— 4. 访问 —— 5. 目录结构 3. 入门案例：Vue文件 4. 常见问题【提示禁用的脚本】 1.概述 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 在vue的spa中，需要编写vue文件。
vue 组件-单文件组件
一步一个脚印，踏实努力，向着目标前进
08-15 1492
Vue的单文件组件（Single File Component）是一种将模板、样式和逻辑代码封装在一个文件中的组件开发方式。它使用了以.vue为后缀的文件，结构清晰，便于维护和复用。
怎么 进行 vue 单文件组件开发
07-14
要进行 Vue 单文件组件开发，你需要按照以下步骤进行操作： 1. 安装 Vue CLI：首先，你需要装 Vue CLI，它一个用于快速搭建 Vue.js 项目的工具。你可以在命令行中运行以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建新项目：使用 Vue CLI 创建一个新的 Vue 项目，你可以在命令行中运行以下命令： ``` vue create my-project ``` 这将引导你选择一些配置选项，如包管理器、特性预设等。 3. 创建单文件组件：在 Vue 项目中，每个组件通常被封装在一个单独的文件中，这就是所谓的单文件组件。在你的项目目录中，创建一个以 `.vue` 为扩展名的文件，比如 `MyComponent.vue`。 4. 编写单文件组件代码：在新创建的 `.vue` 文件中，你可以通过以下方式编写组件的代码： ```vue <template> <!-- 组件的模板部分 --> </template> <script> // 组件的逻辑部分 </script> <style> /* 组件的样式部分 */ </style> ``` 在 `<template>` 标签中编写组件的模板部分，使用 Vue 的模板语法来定义组件的结构。在 `<script>` 标签中编写组件的逻辑部分，比如定义组件的数据、方法等。在 `<style>` 标签中编写组件的样式部分。 5. 在其他组件或页面中使用组件：在其他组件或页面中，你可以通过引入和注册单文件组件的方式来使用它。比如，在一个父组件中引入和使用 `MyComponent` 组件： ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './path/to/MyComponent.vue'; export default { components: { MyComponent } } </script> ``` 通过 `import` 语句引入 `MyComponent` 组件，并在 `components` 属性中注册该组件，然后就可以在模板中使用它了。 这就是进行 Vue 单文件组件开发的基本步骤。你可以根据自己的需求，编写更复杂的单文件组件，并在项目中灵活地使用它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值