Vue2+Vue3基础入门到实战项目(三)——课程学习笔记

 大家好, Capybara 将继续与大家一起学习Vue框架今天依旧是大家的 编程学习小伙伴、前端学习体验家、网课资源品鉴官。

day04

组件的三大组成部分 (结构/样式/逻辑)

scoped样式冲突

当style标签不加scoped

1.style中的样式 默认是作用到全局的

 2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式,推荐加scoped(原理)
  -----------------------------------------------------

 scoped原理:

1.给当前组件模板的所有元素,都会添加上一个自定义属性

 data-v-hash值

data-v-5f6a9d56  用于区分开不同的组件

2.css选择器后面,被自动处理,添加上了属性选择器

div[data-v-5f6a9d56]

代码:

<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* 
  1.style中的样式 默认是作用到全局的
  2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式,推荐加scoped(原理)
  -----------------------------------------------------
  scoped原理:
  1.给当前组件模板的所有元素,都会添加上一个自定义属性
  data-v-hash值
  data-v-5f6a9d56  用于区分开不通的组件
  2.css选择器后面,被自动处理,添加上了属性选择器
  div[data-v-5f6a9d56]
*/
div{
  border: 3px solid blue;
  margin: 30px;
}
</style>

data是一个函数

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例,维护独立的一份数据对象。

每次创建新的组件实例,都会新执行一次 data 函数,得到一个新对象。

实操代码:

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{
  
  { count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // data() {
  //   console.log('函数执行了')
  //   return {
  //     count: 999,
  //   }
  // },
  data: function () {
    return {
      count: 999,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

在App.vue中注册使用三个BaseCount:

 效果:

 控制台:

组件通信

什么是组件通信?

 父子组件通信

父传子

实操代码: 

效果:

 子传父

实操代码:

效果:

props详解

什么是 prop

 props 校验

实操

正确传值:

 错误传值(无错误提示):

类型校验 

添加校验(类型校验):

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值