Vue 组件的三大组成部分

Vue 组件通常由三大组成部分构成:模板(Template)、脚本(Script)、样式(Style)

模板部分是组件的 HTML 结构,它定义了组件的外观和布局。Vue 使用基于 HTML 的模板语法来声明组件的模板,可以插入动态数据、绑定事件等。脚本部分包含了组件的 JavaScript 代码,用于定义组件的行为逻辑。在脚本中,可以定义组件的数据(data)、计算属性(computed)、方法(methods)等。样式部分定义了组件的样式,用于控制组件的外观和样式。通常使用 CSS 或预处理器(如 Sass 或 Less)编写样式,可以使用作用域样式(scoped styles)确保样式仅应用于当前组件。

结构<template>

只能有一个根元素

样式<style>

全局样式(默认)

影响所有组件

局部样式

给组件加上scoped样式,让样式只作用于当前组件

scoped原理

  •   给当前组件模板的所有元素,都会添加上一个自定义属性,即data-v-hash值

         data-v-5f6a9d56 

  •  css选择器都被添加上 [data-v-hash值] 的属性选择器

          div[data-v-5f6a9d56]

BaseOne.vue
<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
div{border: 3px solid blue;margin: 30px;
}
</style>
BaseTwo.vue
<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script><style scoped>
div{border: 3px solid blue;margin: 30px;
}
</style>
App.vue
<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

逻辑<script>

el根实例独有,data是一个函数,其他配置项一致

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

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

相关文章

【Vulhub靶场】Nginx 漏洞复现

Nginx 漏洞复现 一、Nginx 文件名逻辑漏洞&#xff08;CVE-2013-4547&#xff09;1、影响版本2、漏洞原理3、漏洞复现 二、Nginx 解析漏洞1、版本信息&#xff1a;2、漏洞详情3、漏洞复现 一、Nginx 文件名逻辑漏洞&#xff08;CVE-2013-4547&#xff09; 1、影响版本 Nginx …

网际协议IP

一、概念导入 网际协议IP是TCP/IP体系中最重要的协议之一。与IP协议配套使用的还有三个协议&#xff1a; 地址解析协议ARP网际控制报文协议ICMP网际组管理协议IGMP 二、虚拟互联网络 &#xff08;1&#xff09;定义 现实世界中&#xff0c;不同网络的主机进行通信&#xf…

Centos7.9系统MySQL5.7.32升级为5.7.44(生成环境操作)

1.背景 由于客户进行等保漏扫和渗透&#xff0c;生成环境mysql数据库被扫描出了 高危漏洞。 如图&#xff1a;部分漏洞 查看漏洞详细信息&#xff0c;建议升级到指定版本解决&#xff1a; 说明&#xff1a; 本文仅适合使用当前数据库为 RPM 安装方式 2.升级前准备 查看环…

nginx的前世今生(三)

高手对决&#xff1a;武林盟主之路 1.不败之地&#xff0c;高可用江湖 技术角度讲&#xff0c;高可用&#xff08;High Availability, HA&#xff09;是指系统或服务能够在预定的时间内&#xff0c;以极高的概率持续提供服务的能力。具体来说&#xff0c;这通常涉及到系统的架…

【Java 算法实现】链表反转(迭代法)

【Java 算法实现】链表反转&#xff08;迭代法&#xff09; 这个反转方法采用的是迭代方式&#xff0c;它逐个将原链表的节点移动到新链表的头部 public class LinkedList {// 定义链表节点static class Node {int value;Node next;Node(int value) {this.value value;this.…

32.Docker认识

Docker介绍 Docker是一个快速交付应用&#xff0c;运行应用的技术。 1.可以将程序、依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统。 2.运行时利用沙箱机制行程隔离容器&#xff0c;各个应用互不干扰。 3.启动、移除都可以通过一行命令完成&am…

I2C接口18路LED呼吸灯驱动IS31FL3218互相替代SN3218替换HTR3218

I2C接口18路LED呼吸灯控制电路IC 该型号IC为QFN24接口&#xff0c;属于小众产品&#xff0c;IS31FL3218、SN3218、HTR3218S管脚兼容&#xff0c;需要注意的是HTR3218管脚与其他型号不兼容。 I2C接口可实现多个LED灯的呼吸灯控制&#xff0c;可实现单色控制18个LED灯&#xff0…

Kubernetes - Dashboard 配置用户名密码方式登录

Kubernetes - Dashboard 配置用户名密码方式登录 前言&#xff1a; 为了 K8s 集群安全&#xff0c;默认情况下 Dashboard 以 Token的形式登录的&#xff0c;那如果我们想以用户名/密码的方式登录该怎么操作呢&#xff1f;其实只需要我们创建用户并进行 ClusterRoleBinding绑定即…

问题记录-全局配置了跨域但是后端下载仍然跨域-(Java, SpirngBoot)

问题背景 前端请求后端下载文件&#xff0c;其它接口都不会跨域&#xff0c;唯独这个下载跨域了。上代码&#xff1a; ApiOperation(value "下载模板文件", notes "importArchive") GetMapping("v1/downLoadTemplate/{templateName}") publi…

Educational Codeforces Round 165 (Rated for Div. 2 ABCDE 题)视频讲解

A. Two Friends Problem Statement Monocarp wants to throw a party. He has n n n friends, and he wants to have at least 2 2 2 of them at his party. The i i i-th friend’s best friend is p i p_i pi​. All p i p_i pi​ are distinct, and for every i ∈…

并发编程之线程池的设计和原理

一、线程池 提前创建一系列的线程&#xff0c;保存在这个线程池中&#xff0c;有任务要执行的时候&#xff0c;从线程池中取出线程来执行。没有任务的时候&#xff0c;线程池放回去。 二、为什么要使用线程池 线程使用上的问题: 线程的频繁创建 和 销毁 线程的数量过多&…

政安晨:【Keras机器学习示例演绎】(二十六)—— 图像相似性搜索的度量学习

目录 概述 设置 数据集 嵌入模型 测试 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 本文…

基于Pytorch深度学习——多层感知机

本文章来源于对李沐动手深度学习代码以及原理的理解&#xff0c;并且由于李沐老师的代码能力很强&#xff0c;以及视频中讲解代码的部分较少&#xff0c;所以这里将代码进行尽量逐行详细解释 并且由于pytorch的语法有些小伙伴可能并不熟悉&#xff0c;所以我们会采用逐行解释小…

Word域代码学习(简单使用)-【SEQ】

Word域代码学习(简单使用)-【SEQ】 快捷键 序号快捷键操作1 Ctrl F9 插入域代码花括号2 F9 显示域代码结果3 Shift F9 切换为域代码4 Windows Alt F9 切换全部域代码 域代码说明 域代码不区分大小写在word中&#xff0c;依次选择插入➡文档部件➡域即可选择插入…

Go 泛型函数中的 ~ 符号 的意义 -- 用于指定类型的底层类型

本文通过 slices.Clone 泛型函数介绍了 Go 是如何使用类型推断完成参数类型的解构。简单来说&#xff0c;如果第一个类型参数是一个复合类型&#xff0c;则可以通过第二、第三或更多的类型参数约束复杂类型中的类型参数&#xff0c;而类型推断则可以通过第一个参数推断出后续类…

Linux 学习 --- 编辑 vi 命令

1、vi 基本概念&#xff08;了解&#xff09; 基本上 vi 可以分为三种状态&#xff0c;分别是命令模式 (command mode)、插入模式 (Insert mode) 和底行模式 (last line mode)&#xff0c;各模式的功能区分如下: 命令行模式 command mode&#xff09;  控制屏幕光标的移动&a…

PotatoPie 4.0 实验教程(31) —— FPGA实现摄像头图像高斯滤波

什么是高斯滤波 高斯滤波是一种常见的图像处理技术&#xff0c;用于去除图像中的噪声和平滑图像。它的原理基于统计学中的高斯分布&#xff08;也称为正态分布&#xff09;。 在高斯滤波中&#xff0c;一个二维的高斯核函数被用来对图像中的每个像素进行加权平均。这个高斯核…

jvm 马士兵 01

01.JVM是什么 JVM是一个跨平台的标准 JVM只识别class文件&#xff0c;符合JVM规范的class文件都可以被识别

Java中异常的处理方式之二:throws详解

在Java中&#xff0c;除了使用try-catch语句块来直接处理异常外&#xff0c;还有另一种处理异常的方式&#xff1a;通过在方法签名中使用throws关键字声明该方法可能抛出的异常&#xff0c;从而将异常的处理责任传递给调用该方法的代码。这种方式对于某些情况下无法直接处理异常…

AI智能名片商城小程序:引领企业迈向第三增长极

随着数字化浪潮的席卷&#xff0c;私域流量的重要性逐渐凸显&#xff0c;为企业增长提供了全新的动力。在这一背景下&#xff0c;AI智能名片商城系统崭露头角&#xff0c;以其独特的优势&#xff0c;引领企业迈向第三增长极。 私域流量的兴起&#xff0c;为企业打开了一扇新的销…