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

Vue组件基本使用

      • 1. 什么是组件化开发
      • 2. vue 中的组件化开发
      • 3. vue 组件的三个组成部分
        • 3. template
        • 3.2 script
        • 3.3 style
      • 4. 组件之间的父子关系
        • 4.1 使用组件的三个步骤
        • 4.2 通过 components 注册的是私有子组件
        • 4.3 注册全局组件
      • 5. 组件的 props
        • 5.1 props 是只读的
        • 5.2 props 的 default 默认值
        • 5.3 props 的 type 值类型
        • 5.4 props 的 required 必填项
      • 6. 组件之间的样式冲突问题
        • 6.1 如何解决组件样式冲突的问题
        • 6.2 style 节点的 scoped 属性
        • 6.3 /deep/ 样式穿透

1. 什么是组件化开发

组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。

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">
      
    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

vue 规定:每个组件对应的模板结构,需要定义到 节点中。

<template>

template>

注意: 

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

3.2 script

vue 规定:开发者可以在

你可能感兴趣的:(vue.js,javascript,前端)