Vue项目工程化进阶⏫：
前言： 紧跟前文，目标学习Vue2.0——3.0： 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的技术栈…
当然既然学习框架的了，HTML CSS JS三件套必须的就不说了： JavaScript 快速入门
学习前置链接： 懂个锤子Vue 项目工程化
组件的样式冲突：
在 Vue 开发中，组件样式冲突是一个常见的问题： 为什么会发生组件样式冲突⁉️
我们都知道，组件是由：模板Template脚本Script样式Style 组成，每个组件都是有自己的三件套)
但，因为Vue在运行过程中，本质是将多个组件合并成一个：html文件
所以，多个组件样式，相互匹配就发生组件样式冲突：
解决样式冲突
Vue支持定义全局局部样式：
默认情况： 组件中的样式会，全局生效 → 很容易造成多个组件之间的样式冲突问题，
- 全局样式：
默认组件中的样式会作用到全局 - 局部样式： 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件
scoped原理
scoped可以让组件样式变成局部样式： 组件都应该有独立的样式
scoped:给当前组件模板的所有元素，都会添加上一个自定义属性data-v-hash值data-v-hash值:用于区分开不通的组件，渲染样式时css选择器后面，被自动处理，添加上了属性选择器；
组件的 data函数：
在 Vue 组件中，**data** 函数的主要作用是为每个组件实例提供独立的数据对象：
- 因为: 一个组件可能会使用多次， 如果通过原始属性定义，多个组件会依赖一个数据源；
- 通过:
date(函数){ return {} }return返回对象，确保每一个组件都是独立的数据源；
访问组件实例： 在 data(){ //函数内部 } 你可以访问组件实例的其他属性和方法；
响应式系统： Vue响应式系统，会将 data 函数 返回的对象包裹起来，
并以 $data 的形式存储在组件实例；数据发生变化，自动更新视图；
<!-- 模板结构 -->
<template>
<div>
<P>A组件: 声明成功!</P>
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count "> </button>
</div>
</template>
<!-- 脚本结构 -->
<script>
export default {
//原始定义:组件不支持报错x)
// data: {
// //基本数据类型使用
// count:1
// },
//组件函数式定义:
data(){
//因为: 一个组件可能会使用多次,如果通过原始属性,多个组件会依赖一个数据源;
//通过: date(函数){ return {} } return返回对象,确保每一个组件都是独立的数据源;
return {
count:1
}
}
}
</script>
<!-- 样式结构 -->
<!-- style中的样式,默认是作用到全局的
scoped可以让样式变成局部样式,组件都应该有独立的样式,推荐scoped 原理）
scoped给当前组件模板的所有元素,都会添加上一个自定义属性
data-v-hash值 用于区分开不通的组件,css选择器后面,被自动处理,添加上了属性选择器;
-->
<style scoped>
div{
border: 3px solid red;
margin: 30px;
}
</style>
