• Vue组件

    组件

    组件的定义：实现应用中局部功能的代码和资源的集合

    组件的优点：文件好维护，依赖关系不混乱，复用率高

    模块化：当应用中的js都以模块来编写，那这个应用就是一个模块化的应用

    组件化：当应用中的功能都是多组件的方式来编写，你这个应用就是组件化的应用

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

    单文件组件：一个文件中包含1个组件

    基本使用

    创建组件==>注册组件==>使用组件

    创建组件

    • 使用Vue的extend方法创建组件
    • 组件中不能有el配置项
    • data必须以函数式来写
      • 如果使用对象式的话，两个地方都用到data的时候一个地方改变data另一个地方的data也会跟着改变（相当于指针指向同一个内存区域）
      • 使用函数式每个地方返回的都是一个新的data对象（每次使用都创建新的内存区域）
    • template存放HTML结构

    注册组件

    • 在Vue实例中通过components配置项注册（局部注册）
    • Vue.component(‘组件名’,组件变量)

    使用组件

    直接在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
    注意事项

    组件名

    1. 一个单词组成：
      • 首字母小写：school
      • 首字母大写：School
    2. 多个单词组成
      • kebab-case命名：my-school
      • CamelCase命名：MySchool（需要Vue脚手架支持）
    3. 备注
      • 组件名要避免HTML中已有的元素名称
      • 可以使用name配置项指定组件在开发者工具中呈现的名字

    组件标签

    1. 第一种写法：
    2. 第二种写法：
    3. 备注：不使用脚手架时会导致后续组件不能渲染

    简写方式

    const school=Vue.extend(options) <==> const school=options

    组件的嵌套

    标准化开发中通常使用一个app组件管理其他的子组件，Vue只要管理一个组件就行了

    

    • 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
    VueComponet构造函数

    • 组件的本质是一个名为VueComponent的构造函数，且不是被程序员定义的，是Vue.extend生成的。

    • 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行

      new VueComponent(options)

    • 每次调用Vue.extend返回的都是一个全新的VueComponent

    • this的指向

      • 组件配置中，data函数，methods中的函数，watch中的函数，computed中的函数，它们的this都是【VueComponent实例对象】
      • new Vue( )配置中，data函数，methods中的函数，watch中的函数，computed中的函数，它们的this都是【Vue实例对象】

    VueComponent的实例对象可以简称为vc（也可以称为组件实例对象）

    Vue的实例对象可以简称为vm

    vc和vm都有同名的方法，但是具体怎么实现的不是完全相同，组件是可以复用的vue实例

    一个重要的内置关系

    回顾原型链

    //定义一个构造函数
function Demo()
{
    this.a=1
    this.b=2
}

//创建一个实例对象
const d= new Demo()

console.log(Demo.protptype)		//显示原型属性【指向原型对象】
console.log(d.__proto__)		//隐式原型属性【指向原型对象】

Demo.prototype.x=99		//通过显示原型属性操作原型对象，追加一个x属性



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    VueComponent.prototype.__ proto __==Vue.prototype

    Vue没有将VueComponent的原型对象的__ proto __指向Object的原型对象，而是指向Vue的原型对象

    在这里插入图片描述

    为什么要有这个关系？

    让组件实例对象可以访问Vue原型上的属性，方法

    单文件组件（xxx.vue文件）

    标签

    • template【组件的结构】
    • script【组件交互相关的代码】
    • style【组件的样式】

    注意：Vue后缀的文件不可以直接使用，浏览器不能直接解析，所以这里需要工具进行解析，这里要用到WebPack搭建环境或者使用Vue的脚手架（Vue团队搭建好的WebPack环境）

    Vue项目结构

    在这里插入图片描述

    School组件

    





    • 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

    App组件

    




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

    main.js

    //引入App组件
import App from './App.vue'
new Vue({
    template:``,
    el:"#root",
    components:{App}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    html代码

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    Charles 抓包工具教程(二) Charles 抓包HTTPS请求
    uniapp：APP端webview拦截H5页面跳转，华为市场发布需要限制webview的H5页面跳转
    RowBounds实现分页
    React useMemo useCallback useEffect 的区别（保姆级教程）
    node.js学习之模块化、npm
    82 # koa-bodyparser 中间件的使用以及实现
    windows 2003、2008远程直接关闭远程后设置自动注销会话
    [学习笔记]Python for Data Analysis, 3E-1.序言
    【AWS】如何用SSH连接aws上的EC2实例（虚拟机）？
    LlamaFS自组织文件管理器
  • 原文地址：https://blog.csdn.net/qq_43427995/article/details/127407110