• 【Vue基础七】--- 组件和模块概念

    文章目录

    一、 组件

    1-1 传统方式和组件的对比

    1. 传统方式：
      • 依赖关系混乱，不好维护
      • 代码复用率不高

    image-20220725062023085

    image-20220725062219312

    image-20220725062321149

    1-2 模块和组件概念

    1-2-1 模块+模块化

    1. 模块： 向外提供特定功能的js程序
    2. 模块化： 当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用

    1-2-2 组件化

    1. 组件的定义： 实现应用中局部功能代码和资源的集合
    2. 复用编码，简化项目编码，提高运行效率

    1-3 组件

    1-3-1 非单文件组件

    1-3-1-1 组件的使用

    1. 非单文件组件： 一个文件中包含有n个组件

    2. Vue中使用组件的三大步骤：

      • 创建组件
      • 注册组件
      • 使用组件

    3. 如何定义一个组件：

      • 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：
        • el不要写，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
        • data必须写成函数，避免组件被复用时，数据存在引用关系
      • 使用template可以配置组件结构

    4. 如何注册组件

      • 局部注册： new Vue传入components选项
      • 全局注册： Vue.cpmponent('组件名',组件)

    5. 编写组件标签 :

    6. 基本使用

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>

<body>
    <div id="root">
        <school>school>
        <hr>
        <student>student>
    div>
    <div id="root2">
        <student2>student2>
    div>
    <script>
        Vue.config.produtionTip = false

        // 创建school组件 
        const school = Vue.extend({
            template: `
            
    学校姓名：
    
              `    ,
            data() {
                return {}
            }
        })

        // 创建student
        const student = Vue.extend({
            template: `
            
    学生姓名
    
              `    
        })

        const student2 = Vue.extend({
            template: `
            
    safafad
    
              `    
        })
        Vue.component('student2', student2)
        new Vue({
            el: '#root',
            components: {
                school,
                student
            }

        })

        new Vue({
            el: '#root2'
        })
        script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    1-3-1-2 组件嵌套
    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>

head>

<body>
    
    <div id="root">
        <app>app>
    div>

body>
<script>
    Vue.config.productionTip = false;

    const student = Vue.extend({
        name: 'student',
        template: `
          
    
            
    学生姓名： {{name}}
      
            
    学生年龄： {{age}}
    
          
    
            `    ,
        data() {
            return {
                name: '牛婷婷',
                age: 15
            }
        }
    })

    // 创建school组件
    const school = Vue.extend({
        name: 'school',
        template: `
          
    
            
    学校姓名： {{schoolName}}
      
            
    地址： {{address}}
    
            
          
    
            `    ,
        data() {
            return {
                schoolName: '台历',
                address: '金钟'
            }
        },
        components: {
            student
        }
    })

    // 创建hello组件
    const helloo = Vue.extend({
        name: 'hello',
        template: `
        
    
          
    Hello
    
        
    
          `    
    })
    const app = Vue.extend({
        name: 'app',
        template: `
        
        
      `,
        components: {
            school,
            helloo
        }
    })

    // 创建vm
    new Vue({
        el: '#root',
        // 第二步：注册组件（局部注册）
        components: {
            app
        }
    })
    script>


html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    1-3-2 单文件组件

    1. 单文件组件： 一个文件中只包含 有1个组件
    1-3-2-1 App.vue
    <template>
  <div>
    <School>School>
    <Student>Student>
  div>
template>

<script>
import School from './School'
  import Student from './Student'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    1-3-2-2 index.html
    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

head>

<body>
    <div id="root">
        <App>App>
    div>
    <div id="root">div>
    <script src="./main.js">script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    1-3-2-1 main.js
    import App from './App.veu'

new Vue({
    el: '#root',
    components: { App }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    1-3-2-1 School.vue
    <template>
   <div class="demo">
      <h2>学校姓名： {{schoolName}}h2>  
      <h2>地址： {{address}}h2>
    div>
template>

<script>
// export default {

// }

     export default ({
      name:'school',
      data() {
            return {
                schoolName: '台历',
                address: '金钟'
            }
        }
    })

script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    1-3-2-1 Student2vue
    <template>
   <div class="demo">
      <h2>学校姓名： {{name}}h2>  
      <h2>地址： {{age}}h2>
    div>
template>

<script>
    export default({
      name:'school',
      data() {
            return {
                name: '牛婷婷',
                age: 18 
            }
        }
    })

script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    1-3-3 组件的几个注意点

      1. 关于组件名：
      • 一个单词组成
        • 第一种写法（首字母小写）：school
        • 第二种写法（首字母大写）： School
      • 多个单词组成：
        • 第一种写法(kebab-case命名) ： ‘my-schoool’
        • CamelCase命名：MySchool(脚手架下写)
      • 备注：
        • 组件名尽可能回避HTML中已有的元素名称
        • 可以使用name配置项指定组件在开发者中呈现的名字

    2. 关于组件标签：

      • 一：
      • 二：
      • 不用使用脚手架时

    4. ···

    1-3-4 VueComponent

    1. 关于 VueComponent:

      • image-20220725081706502
      • school组件本质上一个名为VueComponent的构造函数，并不是程序员定义的，是Vue.extend生成的
      • Vue解析会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)
      • 每次调用Vue.extend,返回的都是一个全新的VueComponent

    2. 关于this指向:

      • 组件配置中： data函数、methods中的函数、computed中的函数，this均是【VueComponent】
      • .new Vue(options)配置中： data函数、methods中的函数、watch中的函数,它们的this均是 【Vue】
      • 一个重要的内置关系： VueComponent.prototype.__proto__ == Vue.prototype
      • 让组件实例对象（vc）可以访问到Vue原型上的属性、方法

    4. image-20220801114350035

  • 相关阅读:
    MongDB 远程连接以及备份、还原、导出、导入
    Latex——换行换段
    云原生之快速使用Nacos Spring Cloud
    重装系统后新建文本文档打不开怎么办
    （一）NanoPi m4v2 安装 Home Assistant（含 supervisor）
    D. Count GCD（数论/gcd/素数筛/容斥）
    这个需求怎么做java面试题
    Mycat2分库分表
    重打包实现frida持久化 笔记
    解决video层级过高在app的问题
  • 原文地址：https://blog.csdn.net/hannah2233/article/details/126901002