FE_Vue学习笔记 - 组件的理解vue vc

@Autowire

已于 2023-05-13 09:40:15 修改

阅读量1k

点赞数

分类专栏： VUE相关知识学习文章标签： vue.js 学习 javascript

于 2023-01-07 17:31:58 首次发布

本文链接：https://blog.csdn.net/zs18753479279/article/details/128590154

版权

VUE相关知识学习专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1 对组件的理解

在这里插入图片描述

模块与组件、模块化与组件化：

模块：
（1）理解：向外提供特定功能的js程序，一般就是一个js文件
（2）为什么：js文件很多很复杂
（3）作用：复用js，简化js的编写，提高js运行效率
组件：
（1）理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image…）
（2）为什么：一个界面的功能很复杂
（3）作用：复用编码，简化项目编码，提高运行效率
模块化：
当应用中的js都以模块来编写，那这个应用就是一个模块化的应用。

4.组件化：
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

2 非单文件组件

非单文件组件 : 一个文件中包含有n个组件。
单文件组件 : 一个文件中只包含有1个组件。（主要使用这种方式）

局部注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>{{ msg }}</h2>
    <hr/>
    <!--    3 编写组件标签-->
    <school></school>
    <school></school>
    <school></school>
    <hr/>
    <student></student>
    <student></student>
    <student></student>
</div>

<script type="text/javascript">
    // 1 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <button @click="showName">点我提示学校名</button>
          </div>
        `,
        // el: '#component', 一定不要写el配置项，组件就是一块砖，哪里需要哪里搬。
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },

        methods: {
            showName() {
                alert(this.schoolName)
            }
        }

    })
    // 1 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生年龄：{{ studentAge }}</h2>
          </div>
        `,
        data() {
            return {
                studentName: 'zhaoshuai-lc',
                studentAge: 26
            }
        }
    })
    // 这个要放到组件后面
    new Vue({
        el: '#component',
        data: {
            msg: 'hello-world'
        },
        // 2 注册组件 (局部注册)
        components: {
            school,
            student
        }
    })
</script>
</body>
</html>

在这里插入图片描述

全局注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>{{ msg }}</h2>
    <hr/>
    <!--    3 编写组件标签-->
    <school></school>
    <school></school>
    <school></school>
    <hr/>
    <student></student>
    <student></student>
    <student></student>
</div>

<script type="text/javascript">
    // 1 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <button @click="showName">点我提示学校名</button>
          </div>
        `,
        // el: '#component', 一定不要写el配置项，组件就是一块砖，哪里需要哪里搬。
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },

        methods: {
            showName() {
                alert(this.schoolName)
            }
        }

    })
    // 1 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生年龄：{{ studentAge }}</h2>
          </div>
        `,
        data() {
            return {
                studentName: 'zhaoshuai-lc',
                studentAge: 26
            }
        }
    })
    // 2 注册组件 (全局注册)
    Vue.component('school', school)
    Vue.component('student', student)

    new Vue({
        el: '#component',
        data: {
            msg: 'hello-world'
        }
    })
</script>
</body>
</html>

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

定义组件（创建组件）
注册组件
使用组件（写组件标签）

3 组件的几个注意点

一个单词组成：

第一种写法（首字母小写）：school
第二种写法（首字母大写）：School

多个单词组成：

第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

备注：
1）组件名尽可能回避HTML中已有的9元素名称，例如：h2、H2都不行。
2）可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签：

第一种写法：<school></school>
第二种写法：<school/>

备注：不适用脚手架时，会导致后续组件不能渲染。

一个简写方式：

const school = Vue.extend(options) 
可简写为：const school = options

4 组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <!--    编写组件标签-->
    <!--    <app></app>-->
</div>
<script type="text/javascript">
    // 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生地址：{{ studentAddress }}</h2>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                studentName: '北京大学',
                studentAddress: '北京'
            }
        }
    })

    // 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <student></student>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },
        // 注册组件 （局部）
        components: {
            student
        }
    })

    // 创建app组件
    const app = Vue.extend({
        template: `
          <div>
          <school></school>
          </div>
        `,
        components: {
            school
        }
    })
    new Vue({
        template: `
          <app></app>`,
        el: '#component',
        // 注册组件
        components: {
            app
        }
    })
</script>
</body>
</html>

5 VueComponent构造函数

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.exend生成的。
<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！
关于this指向：
1）Vue.extend({}) 组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是VueComponent实例对象
2）new Vue()配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是Vue实例对象
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。
VM 管理 VC

6 Vue实例与组件实例VC

既然vc和vm中的内容一样，为什么不能把vc和vm直接划上等号？

vc是由VueComponent缔造的，vm是由Vue缔造的。这两个缔造的过程肯定不可能完全一样。
比如说在创建组件实例对象、传入配置项的时候，是不可以写el的，但是在创建vm的时候，配置对象中就可以写el。也就是说vm可以写自己为哪个容器服务，但是vc不能指定服务容器，只能跟着vm走。
再比如说，vc的数据配置项（data）就必须写成函数。可以说，它们俩身上99%的东西一样，但是有这1%就是不一样。就像是两个双胞胎，长得一模一样，但是不能说他们是同个人。

7 一个重要的内置关系- `VueComponent.prototype.proto === Vue.prototype`

在这里插入图片描述
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法

8 单文件组件的组织结构理解

在这里插入图片描述

@Autowire

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
FE_Vue学习笔记 - 组件的理解vue vc

比如说在创建组件实例对象、传入配置项的时候，是不可以写el的，但是在创建vm的时候，配置对象中就可以写el。学校地址：{{ schoolAddress }}学校地址：{{ schoolAddress }}学校地址：{{ schoolAddress }}学校地址：{{ schoolAddress }}学校地址：{{ schoolAddress }}学生名称：{{ studentName }}
复制链接

扫一扫