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
html 复制代码
<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
div{
  border: 3px solid blue;
  margin: 30px;
}
</style>
BaseTwo.vue
html 复制代码
<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
div{
  border: 3px solid blue;
  margin: 30px;
}
</style>
App.vue
html 复制代码
<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是一个函数,其他配置项一致

相关推荐
捕鲸叉2 小时前
QT自定义工具条渐变背景颜色一例
开发语言·前端·c++·qt
傻小胖3 小时前
路由组件与一般组件的区别
前端·vue.js·react.js
Elena_Lucky_baby3 小时前
在Vue3项目中使用svg-sprite-loader
开发语言·前端·javascript
小万编程3 小时前
基于SpringBoot+Vue毕业设计选题管理系统(高质量源码,提供文档,免费部署到本地)
java·vue.js·spring boot·计算机毕业设计·java毕业设计·web毕业设计
重生之搬砖忍者3 小时前
uniapp使用canvas生成订单小票图片
前端·javascript·canva可画
万水千山走遍TML3 小时前
console.log封装
前端·javascript·typescript·node·log·console·打印封装
赵大仁3 小时前
uni-app 多平台分享实现指南
javascript·微信小程序·uni-app
阿雄不会写代码4 小时前
使用java springboot 使用 Redis 作为消息队列
前端·bootstrap·html
m0_748236584 小时前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx
@C宝4 小时前
【前端面试题】前端中的两个外边距bug以及什么是BFC
前端·bug