0
点赞
收藏
分享

微信扫一扫

【vue】黑马vue视频笔记(三)

倚然君 2022-07-27 阅读 28

Vue组件基本使用

1. 什么是组件化开发

2. vue 中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue

3. vue 组件的三个组成部分

每个.vue组件都由 3 部分构成,分别是:

  • template -> 组件的模板结构
  • script -> 组件的 JavaScript 行为
  • style -> 组件的样式

其中,每个组件中必须包含 template 模板结构,而 script 行为和 style样式是可选的组成部分。

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

3. template

<template>
<!--当前组件的DOM结构,需要定义到template标签的内部-->
</template>

注意: 

  • template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
  • template 中只能包含唯一的根节点。

3.2 script

<script>
// 都需要定义到export default 所导出的对象中
export default {}
</script>
//错误做法
//data: {
//	username: 'admin'
//},

// 正确做法。注意:组件中的data必须是一个函数
data() {
  // 这个return出去的{ }中,可以定义数据
  return {
    username: 'admin'
  }
},

3.3 style

<!-- 用less -->
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 组件之间的父子关系

在这里插入图片描述

4.1 使用组件的三个步骤

在这里插入图片描述

4.2 通过 components 注册的是私有子组件

4.3 注册全局组件


// 导入全局组件
import Count from '@/components/Count.vue'

// 注册全局组件
Vue.component('MyCount',Count)

5. 组件的 props

export default {
  // props自定义属性由当前调用组件指定初始值
  props: ['init'],
  data() {
    return {
      count: 0,
    }
  },
}

5.1 props 是只读的

在这里插入图片描述
要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据都是可读可写的

export default {
  // props自定义属性由当前调用组件指定初始值
  props: ['init'],
  data() {
    return {
      count: this.init,
    }
  },
}

5.2 props 的 default 默认值

export default {
  // props: ['init'], //定义为数组无法指定初始值
  props: {
    init: {
      // 指定默认值,会被使用组件所覆盖
      default: 0,
    },
  },
}

5.3 props 的 type 值类型

export default {
  props: {
    init: {
      // 用default指定默认值,会被使用组件所覆盖
      default: 0,

      // 用type属性定义属性的值类型
      // 如果传递过来的值不符合该类型,则会在终端报错
      type: Number,
    },
  },
}

5.4 props 的 required 必填项

export default {
  props: {
    init: {
      // 用default指定默认值,会被使用组件所覆盖
      //default: 0,

      // 用type属性定义属性的值类型
      // 如果传递过来的值不符合该类型,则会在终端报错
      type: Number,
      // require定义属性是否为必填项,与是否有默认值无关
      require: true,
    },
  },
}

6. 组件之间的样式冲突问题

导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素。

6.1 如何解决组件样式冲突的问题

<template>
  <div class="left-container" v-data-001>
    <h3 v-data-001>Left组件</h3>
    <hr />
  </div>
</template>
<style lang="less">
.left-container[v-data-001] {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
/*通过中括号“属性选择器”,防止组件的样式冲突问题,因为每一个组件分配的自定义属性是“唯一的”*/
h3[v-data-001] {
  color: aqua;
}
</style>

6.2 style 节点的 scoped 属性

<template>
  <div class="left-container" >
    <h3>Left组件</h3>
    <hr />
  </div>
</template>
<style lang="less"  scoped>
.left-container{
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
/* style节点的scoped属性,用来自动为每个组件分配唯一的“自定义属性”,并自动为当前组件DOM标签和style样式应用这个自定义属性,防止组件的样式冲突问题
*/
h3 {
  color: aqua;
}
</style>

6.3 /deep/ 样式穿透

<style lang="less" scoped>
h5 {
  color: pink; /* 不加上/deep/时,生成的选择器格式为h5[data-v-001] */
}
// 当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到/deep/
/deep/ h5 {
  color: pink; /* 加上/deep/时,生成的选择器格式为[data-v-001] h5*/
}
</style>
举报

相关推荐

0 条评论