首页 > 其他分享 >31-Vue脚手架-scoped样式

31-Vue脚手架-scoped样式

时间:2023-10-27 09:58:28浏览次数:34  
标签:src School Vue name components 31 vue scoped Student

我们先思考一个问题,如果对School 和 Student应用样式的话,一般是使用如下方式:

src/components/School.vue

<template>
  <div class="demo">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    data(){
      return{
        name:"东华理工大学",
        address:"江西南昌",
      }
    }
  }

</script>

<style scoped>
  .demo{
    background-color: skyblue;
  }
</style>

src/components/Student.vue

<template>
  <div class="demo2">
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",
    data(){
      return{
        name:"马铃薯",
        sex:"男",
      }
    }
  }

</script>

<style>
  .demo2{
    background-color: orange;
  }
</style>

但Vue是将所以组件的样式都加载到一块,目前只是"demo"和"demo2"没有冲突时可以正常使用,如果两个名字冲突,则会默认时候最后加载的样式,会导致冲突

 

scoped样式

作用:让样式在局部生效,防止冲突(因此在开发过程中,基本都会加上)

写法:<style scoped>

src/components/School.vue

<template>
  <div class="demo">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    data(){
      return{
        name:"东华理工大学",
        address:"江西南昌",
      }
    }
  }

</script>

<!--scoped样式,可以让样式在局部生效,防止冲突-->
<style scoped>
  .demo{
    background-color: skyblue;
  }
</style>

src/components/Student.vue

<template>
  <div class="demo">
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",
    data(){
      return{
        name:"马铃薯",
        sex:"男",
      }
    }
  }

</script>

<!--scoped样式,可以让样式在局部生效,防止冲突-->
<style scoped>
  .demo{
    background-color: orange;
  }
</style>

src/App.vue(无改动)

<template>
  <div>
    <!--学校的信息-->
    <School></School>
    <!--学生的信息-->
    <Student></Student>

  </div>
</template>

<script>
  // 引入Student组件
  import Student from "@/components/Student.vue";
  // 引入School组件
  import School from "@/components/School.vue";

  export default{
    name:"App",
    components: {
      School: School,
      Student: Student
    }
  }
</script>

src/main.js(无改动)

import Vue from "vue"
import App from "./App.vue"

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

new Vue({
    el:"#app",
    render:h => h(App)
})

 

标签:src,School,Vue,name,components,31,vue,scoped,Student
From: https://www.cnblogs.com/REN-Murphy/p/17791085.html

相关文章

  • 30-Vue脚手架-plugin插件
    plugin插件功能:用于增强Vue本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 src/plugins.js(定义插件)//定义插件(默认暴露)exportdefault{install(Vue){console.log("@@@install")console.log(......
  • [Vue]条件渲染
     1.v-if  写法:    (1)v-if="表达式"    (2)v-else-if="表达式"    (3)v-else="表达式"  适用于:切换频率较低的场景。  特点:不展示的DOM元素直接被移除。  注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“......
  • ruby实战手册(13)-vue 3(4)
    目录全局构建全局构建1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>learnjs</title><basehref="/"><linkhref="styles/style.css"rel=&......
  • 20231026打卡·
    上午的课程是算法与数据结构中的图。图是一种非常重要的数据结构,用于描述事物之间的关系和连接。在这门课上,我们学习了图的基本概念、表示方法以及常见的图算法。通过理论讲解和实践编程练习,我对图的理解和应用有了更深入的认识。图算法对于解决许多实际问题都非常有用,我会在日常......
  • OpenTiny Vue 3.11.0 发布:增加富文本、ColorPicker等4个新组件,迎来了贡献者大爆发!
    你好,我是Kagol。非常高兴跟大家宣布,2023年10月24日,OpenTinyVue发布了v3.11.0......
  • vue打印浏览器页面功能的两种实现方法
    目录方法一:通过npm安装插件方法二:手动下载插件到本地总结推荐使用方法二方法一:通过npm安装插件1,安装npminstallvue-print-nb--save2,引入安装好以后在main.js文件中引入1importPrintfrom'vue-print-nb'Vue.use(Print);//注册3,现在......
  • 2023-2024 20231313《计算机基础与程序设计》第五周学习总结
    2023-202420231313《计算机基础与程序设计》第五周学习总结作业速达作业课程班级链接作业要求计算机基础与程序设计第五周学习总结作业内容计算机科学概论第6章、《C语言程序设计》第4章并完成云班课测试————>Pep/9虚拟机、机器语言与汇编语言、算法与伪......
  • vuex 的数据丢失如何处理?
    方法一:存储在LocalStorage、SessionStorage、IndexDB等。这些都是浏览器的API,可以将数据存储在硬盘上,做持久化存储。在初始化state数据的时候,从localStorage中获取:state={userInfo:localStorage.getItem('userInfo')}由于localStorage不是响应式的,需要手......
  • Vue入门到放弃之旅今日开启第二篇
    绑定class样式、渲染、vue监视、收集表单数据P26-P39Class与Style的理解+用法条件渲染(v-show、v-if)还在持续性更新ing,明天见·····如果有正在学习的同学,需要练习过程中的代码实例和笔记私信我发你,祝你在学习前端的路上BUG满满!!在BUG才会成长!还是希望能对你有所帮助,那怕一点......
  • vue处理文件流实现上传下载
    1.文件流转base64axios({method:"post",url:"************",responseType:"blob",//必须将返回数据格式更改为blob格式}).then(res=>{//处理返回的文件流数据转为blob对象letblob=......