vue 组件-单文件组件

Vue的单文件组件(Single File Component)是一种将模板、样式和逻辑代码封装在一个文件中的组件开发方式。它使用了以.vue为后缀的文件,结构清晰,便于维护和复用。

示例

一个典型的Vue单文件组件包含三个部分:模板(Template)、脚本(Script)和样式(Style)。

  1. 模板(Template):模板部分定义了组件的结构和布局,使用HTML标记和Vue的模板语法进行编写。可以使用Vue的指令、插值表达式、事件绑定等功能来动态渲染和交互。

  2. 脚本(Script):脚本部分定义了组件的行为和逻辑,使用Vue的组件选项进行编写。可以在脚本中定义组件的数据、计算属性、方法、生命周期钩子等。还可以引入其他模块、组件和插件,对外暴露组件接口。

  3. 样式(Style):样式部分定义了组件的样式和布局,可以使用CSS、Sass、Less等预处理器进行编写。样式可以通过作用域或全局方式应用到组件中,避免样式冲突和影响。

单文件组件的优势在于将组件的相关代码集中在一个文件中,提高了代码的可读性和可维护性。同时,它也支持热重载和模块化开发,方便开发者进行组件的调试和复用。

以下是一个简单的Vue单文件组件的示例:

<template><div><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {changeMessage() {this.message = 'Hello, World!';}}
};
</script><style scoped>
h1 {color: blue;
}
</style>

在上面的示例中,模板部分定义了一个标题和一个按钮,通过插值表达式动态显示message的值。脚本部分定义了message的初始值和一个方法来改变message的值。样式部分定义了标题的颜色,并使用scoped属性使样式只作用于当前组件。

以上是Vue单文件组件的基本介绍和示例,通过单文件组件可以更方便地开发和管理Vue组件。

不同版本的Vue:

  • Vue.js 1.x:是Vue的第一个版本,具有基本的数据绑定和组件化能力,但缺少一些高级特性。
  • Vue.js 2.x:是Vue的当前稳定版本,引入了虚拟DOM、渲染优化、更好的性能和开发体验等特性。
  • Vue.js 3.x:是Vue的最新版本,重点改进了性能、体积和开发体验,引入了Composition API、更好的TypeScript支持等新特性。

config.js:

config.js是一个常见的配置文件,用于存放项目的配置选项。在Vue项目中,可以使用vue.config.js文件来配置Vue CLI的行为和项目的构建过程。通过修改该文件中的配置项,可以自定义构建、开发服务器、打包等行为。

ref属性:

ref是Vue中的一个特殊属性,用于在模板中获取对应元素或组件的引用。通过在模板中给元素或组件添加ref属性,并为其指定一个唯一的名称,就可以在Vue实例中通过this.$refs来访问该元素或组件的实例。ref属性可以用于访问DOM元素的属性和方法,或者调用组件的方法。

配置项props:

props是Vue组件中的一个配置项,用于接收父组件传递的数据。通过在子组件的props中声明需要接收的属性,并指定其类型、默认值等,子组件就可以在模板中使用这些属性。父组件在使用子组件时,可以通过属性的方式向子组件传递数据,子组件就可以在props中接收并使用这些数据。

例如,在子组件中声明了一个props属性message,父组件可以通过在子组件标签上使用v-bind指令来传递数据:

<template><div>{{ message }}</div>
</template><script>
export default {props: {message: {type: String,default: 'Hello, World!'}}
};
</script>

父组件使用子组件并传递数据的示例:

<template><div><my-component :message="parentMessage"></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {MyComponent},data() {return {parentMessage: 'Hello, Vue!'};}
};
</script>

在上述示例中,父组件通过:message="parentMessage"parentMessage的值传递给子组件的message属性,子组件就可以在模板中使用message属性来显示传递的数据。

混入(Mixin):

混入是Vue中一种可重用的组件选项,它可以包含组件的各种选项,如数据、方法、生命周期钩子等。通过混入,可以将这些选项合并到组件中,从而实现代码的复用。

混入可以在全局范围内使用,也可以在组件级别使用。在全局范围内使用混入时,混入的选项将被合并到所有组件中,而在组件级别使用混入时,混入的选项将被合并到该组件中。

例如,定义一个混入对象:

const myMixin = {data() {return {message: 'Hello, Mixin!'};},methods: {sayHello() {console.log('Hello from mixin!');}}
};

在组件中使用混入:

import myMixin from './myMixin';export default {mixins: [myMixin],created() {console.log(this.message); // 输出:Hello, Mixin!this.sayHello(); // 输出:Hello from mixin!}
};

在上述示例中,通过mixins选项将混入对象myMixin合并到组件中,从而可以在组件中使用混入对象中定义的datamethods。在created生命周期钩子中,可以访问混入对象中的数据和方法。

scoped:

scoped是Vue中样式的一个特殊属性,用于限定样式的作用范围。当在单文件组件的样式部分添加scoped属性时,样式仅作用于当前组件的模板部分,不会影响其他组件或全局样式。

例如,一个带有scoped属性的单文件组件:

<template><div class="container"><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {changeMessage() {this.message = 'Hello, World!';}}
};
</script><style scoped>
.container {background-color: #f0f0f0;padding: 10px;
}
h1 {color: blue;
}
</style>

在上述示例中,.container样式只会应用于当前组件的模板部分,不会影响其他组件或全局样式。同样,h1样式只会应用于当前组件的模板中的h1标签。

使用scoped属性可以避免样式冲突和命名冲突,使样式更具可维护性和隔离性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ES6】—解构赋值

一、定义 解构赋值&#xff1a;解构赋值就是一种模式的匹配&#xff0c;只要等号两边的模式完全相同的&#xff0c;那么左边的变量就会被赋值对应右边的值 二、数组的解构赋值 PS&#xff1a;数组解构赋值时&#xff0c;是通过索引的唯一性赋值的 1. 一维数组解构赋值 (1)…

大数据从入门到放弃——浅谈数据架构的前世今生

文章目录 1. 背景2. 数据的定义及分类2.1 数据的定义2.2 数据的分类2.3 数据和信息的区别 3. 数据的作用4. 数据的那些美好时代4.1 人脑时代4.2 文件时代4.3 数据库时代4.3.1 大服务器时代4.3.2 读写分离时代4.4 数据库的分布式时代4.5 云端时代 5. 数据的未来 1. 背景 随着云时…

真·VB.NET彻底释放Interop.Excel对象

使用 Microsoft.Office.Interop.Excel 虽然有速度慢的缺点&#xff1b;但是作为自带引用&#xff0c;兼容性最好&#xff0c;而且是COM对象模型也很熟悉(Excel里直接录个宏&#xff0c;很方便把VBA代码转成VB.NET)。所以处理几百上千条的小数据时还是很方便的。 而 Microsoft.…

自学C#,要懂得善用MSDN

很多初学者学习编程&#xff0c;都会通过看别人写的教程、或者录制的视频&#xff0c;来学习。 这是一个非常好的途径&#xff0c;因为这个是非常高效的。 但是这样&#xff0c;存在两个问题&#xff1a; 1、教程不够全面&#xff1a;任何再好的教程&#xff0c;都无法囊括所…

【C++_primary】类和对象 —— 类

类 ~ ~ ~ 一、面向过程和面向对象初步认识a. 面向过程编程b. 面向对象编程例如&#xff1a;无人机送货系统1、面向过程编程方式2、面向对象编程方式 二、类的引入1、定义类的关键字2、栈的手动实现a. C语言实现栈b. C实现栈 三、类的定义类的两种定义方式&#xff1a; 四、类的…

【Go】锁相关

文章目录 Mutex锁mutex源码分析LockUnLock mutex两种运行模式mutex normal 正常模式自旋 mutex starvation 饥饿模式 锁的底层实现类型 RWMutexRWMutex 实现其他共享内存线程安全的方式 思考如何设计一个并发更高的锁&#xff1f; Mutex锁 mutex源码分析 Locker接口&#xff…

【python知识点】锦集

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/132368704 出自【进步*于辰的博客】 相关博文&#xff1a;【python细节、经验】锦集。 注&#…

MyBatis入门配置及CURD实现

目录 一、MyBatis简介 1. 什么是 MyBatis ? 2. MyBatis的特性 3. 什么是持久层框架&#xff1f; 二、MyBatis环境配置 2.1 创建maven工程 2.2 导入相关pom依赖 2.3 导入jdbc配置文件 2.4 Mybatis相关插件安装 3.5 Mybatis-cfg.xml 核心配置 2.6 引入Log4j2日志文件…

jinfo(Configuration Info for Java)Java配置信息工具

jinfo&#xff08;Configuration Info for Java&#xff09;Java配置信息工具 jinfo&#xff08;Configuration Info for Java&#xff09;的作用是实时查看和调整虚拟机各项参数 查看虚拟机启动时显式指定的参数列表 jps -v 查看未被显式指定的参数的系统默认值 1、找资料 …

Vue2-配置脚手架、分析脚手架、render函数、ref属性、props配置项、mixin配置项、scoped样式、插件

&#x1f954;:总有一段付出了没有回报的日子 是在扎根 更多Vue知识请点击——Vue.js VUE2-Day6 配置脚手架脚手架结构render函数vue.js与vue.runtime.xxx.js的区别引入render函数为什么要引入残缺的vue呢&#xff1f; 脚手架默认配置ref属性props配置项传递数据接收数据注意点…

NLP序列标注问题,样本不均衡怎么解决?

【学而不思则罔&#xff0c;思而不学则殆】 1.问题 NLP序列标注问题&#xff0c;样本不均衡怎么解决&#xff1f; 2.解释 以命名实体识别&#xff08;NER&#xff09;为例&#xff0c;这个样本不均衡有两种解释&#xff1a; &#xff08;1&#xff09;实体间类别数量不均衡…

华为网络篇 RIP的负载均衡-29

难度2复杂度2 目录 一、实验原理 二、实验拓扑 三、实验步骤 四、实验过程 总结 一、实验原理 RIP是使用跳数&#xff08;经过路由的数量&#xff09;作为metric值的&#xff0c;当网络上存在去往目标的路由有两条以上都是相同metric时&#xff0c;就出现了流量负载均衡。…

未来网络的选择:100G光模块与400G光模块的对比

随着互联网的快速发展和数据传输需求的不断增长&#xff0c;光通信技术在网络领域中扮演着至关重要的角色。光模块是光通信系统中的核心组件之一&#xff0c;而100G光模块和400G光模块是目前应用广泛的两种主要类型。本文将对这两种光模块进行详细的区别对比。 一、传输速率 …

【周末闲谈】关于“数据库”你又知道多少?

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言数据库数据库的五大特点数据库介绍数据库管理系统&a…

34.Netty源码之Netty如何处理网络请求

highlight: arduino-light 通过前面两节源码课程的学习&#xff0c;我们知道 Netty 在服务端启动时会为创建 NioServerSocketChannel&#xff0c;当客户端新连接接入时又会创建 NioSocketChannel&#xff0c;不管是服务端还是客户端 Channel&#xff0c;在创建时都会初始化自己…

Python web实战之细说 Django 的单元测试

关键词&#xff1a; Python Web 开发、Django、单元测试、测试驱动开发、TDD、测试框架、持续集成、自动化测试 大家好&#xff0c;今天&#xff0c;我将带领大家进入 Python Web 开发的新世界&#xff0c;深入探讨 Django 的单元测试。通过本文的实战案例和详细讲解&#xff…

SystemVerilog之接口详解

1.入门实例 测试平台连接到 arbiter的例子&#xff1a;包括测试平台, arbiter仲裁器, 时钟发生器 和连接的信号。 ㅤㅤㅤ ㅤ ㅤㅤㅤㅤㅤ Arbiter里面可以自定义发送的权重&#xff0c; 是轮询还是自定义 grant表示仲裁出来的是哪一个&#xff0c;也即只有0&#xff0c;1&am…

盒子模型样式

&#x1f353;盒子属性 属性名称中文注释备注border设置盒子的边框边框宽度 边框类型 边框颜色border-left设置左边框边框宽度 边框类型 边框颜色border-right设置右边框边框宽度 边框类型 边框颜色border-top设置上边框边框宽度 边框类型 边框颜色border-bottom设置下边框边框…

C#程序配置读写例子 - 开源研究系列文章

今天讲讲关于C#的配置文件读写的例子。 对于应用程序的配置文件&#xff0c;以前都是用的ini文件进行读写的&#xff0c;这个与现在的json类似&#xff0c;都是键值对应的&#xff0c;这次介绍的是基于XML的序列化和反序列化的读写例子。对于ini文件&#xff0c;操作系统已经提…

python采集京东商品详情页面数据,京东API接口,京东h5st签名(2023.08.20)

一、原理与分析 1、目标页面 https://item.jd.com/6515029.html 在chrome中打开&#xff0c;按f12键进入开发者模式&#xff0c;找到商品详情数据接口&#xff0c;如下&#xff1a; 2、URL链接&#xff1a; https://api.m.jd.com/?appidpc-item-soa&functionIdpc_detail…