您现在的位置是:首页 > 正文

Vue组件化之VueComponent介绍

2024-01-30 22:44:26阅读 0
简介

这篇文章主要介绍的是VueComponent函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueComponent</title>
</head>
<body>

    <div id="root">
        <school></school>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        const school = Vue.extend({
            template:`
            <div>
           <div>学校:{{schoolName}}</div>
           <div>地址:{{schoolAddress}}</div>
           </div>
           `,

           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        const school1 = Vue.extend({
            template:`
            <div>
           <div>学校:{{schoolName}}</div>
           <div>地址:{{schoolAddress}}</div>
           </div>
           `,

           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        //输出school组件
        console.log(school);
        console.log(school === school1);

        new Vue({
            el:"#root",
            components:{
                school
            }
        })
    </script>
</body>
</html>

效果:
Y5by655qE,size_17,color_FFFFFF,t_70,g_se,x_16)

第一个结论:
组件的本质是一个名为VueComponent的构造函数,并且不是程序员定义的,而是Vue.extend函数生成的。

并且每次生成的都是不一样的VueComponent的构造函数。

第二个结论:
每当我们使用主键(写组件标签时,<school></school>),vue解析到组件标签时,会帮我们使用VueComponent构造函数创建一个VueComponent对象,帮我们执行 new VueComponent(options)

验证:
修改vue.js文件的源码,找到这一段,加上一段代码:
在这里插入图片描述
效果:
在这里插入图片描述

第三个结论:this的指向:
在组件配置中:
data函数,methods中配置的函数,watch中配置的函数,computed中配置的函数的this指向的都是VueComponent组件对象。
在vue实例配置中:
data函数,methods中配置的函数,watch中配置的函数,computed中配置的函数的this指向的都是vue对象。

在这里插入图片描述
效果:
在这里插入图片描述

Vue实例对象简称vm,VueComponent实例对象简称vc。

一个重要的内置关系:
VueComponent.prototype.__proto__===Vue.prototype ,这么做是为了让组件实例对象vc可以访问到Vue原型上的属性方法,已达到复用,因为Vue和VueComponent在很大程度上都是相同的(95%),所以像$mount和$watch方法,定义在Vue的原型对象上,然后VueComponent的原型对象的原型对象指向Vue的原型对象,VueComponent和Vue的实例就可以使用同一份方法和属性,而不用写两份一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置对象</title>
</head>
<body>
    

    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;

        const school = Vue.extend({
           template:`
           <div>
           <div>学校:{{schoolName}}</div>
           <div>地址:{{schoolAddress}}</div>
           </div>
           `,
           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
        })

        console.log(school.prototype.__proto__ === Vue.prototype);
    </script>

</body>
</html>

效果:
在这里插入图片描述
在这里插入图片描述

文字解说就是VueComponent的原型对象的原型对象 === Vue的原型对象。

网站文章

  • chatgpt赋能python:Python实现隐藏Excel列的方法

    chatgpt赋能python:Python实现隐藏Excel列的方法

    本文由chatgpt生成,文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型,只是展现它原本的实力。对于颠覆工作方式的ChatGPT,应...

    2024-01-30 22:44:22
  • mongodb分片部署

    mongodb分片部署

    1、mongodb分片科普 (各种罗嗦) Replica Set(副本集): 副本集使其组内的每个成员(member)在不同的mongod实例中具有相同的数据备份,这样可以将来自应用服务器的请求访问(request visit)得以均匀的分布在Replica Set的每一个成员所在的mongod实例上,用以减缓单台mongod服务器在请求负载上的压力。在一定时限内Replica Set能完成

    2024-01-30 22:44:15
  • 转录组助力HIV-1病毒感染机制研究新成果

    派森诺与中国人民解放军陆军军医大学&复旦大学携手合作,于近期在《Cellular & Molecular Immunology》上发表HIV-1 Vif通过靶向STING抑制抗病毒免疫的研究成果。研究...

    2024-01-30 22:43:44
  • 数据库常见面试题 —— 13. char 和 varchar 的区别

    阐述 char 和 varchar 的区别和使用的场景

    2024-01-30 22:43:30
  • Ruby测试小代码[计算50以内的素数]

    Ruby测试小代码[计算50以内的素数]

    2019独角兽企业重金招聘Python工程师标准>>> ...

    2024-01-30 22:43:22
  • Babel处理es6语法

    Babel处理es6语法

    npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-dev // 语法转义npm i...

    2024-01-30 22:42:53
  • c#中如何截取Windows消息来触发自定义事件

    概要 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题。 由于目前使用c#的开发人员非常多,而且大多数c#程序员都不是从Windwos c++转过来的对windows消息机制不怎么了解,遇到这类问题还是挺棘手的,我们公司有个同事问,就写这个小实例,帮助那些遇到此类问题的兄弟姐妹。 实现方式目前有两种: 1 使用Control类的虚方法WndP...

    2024-01-30 22:42:44
  • 计算机nls数据丢失损坏无法启动,系统开机出现由于NLS数据丢失或损坏

    计算机nls数据丢失损坏无法启动,系统开机出现由于NLS数据丢失或损坏

    最近有网友遇见Win7系统开机报错:由于NLS数据丢失或损坏,因此Windows无法加的问题不知道怎么解决询问,开始也不着调如何解决,但是参考了大神的方案之后给出了解决方法: 具体解决方法:方法一: ...

    2024-01-30 22:42:37
  • Hadoop-Yarn的框架原理(二)

    Hadoop-Yarn的框架原理(二)

    1、Yarn生产环境核心参数 2、Yarn生产环境核心参数配置案例 需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 The class to use as the resource scheduler. yarn.resourcemanager.scheduler.cla

    2024-01-30 22:42:08
  • django在html中显示下拉列表,Django如何从下拉列表中动态显示选定值的表/行数据...

    又是我,Django菜鸟。在我试图通过一个html表从addpy表单的dropdowm中选择一个值来显示相关的行/信息。在我收到了一份员工模型的表格。我从一个来自employee model的LOV中...

    2024-01-30 22:41:59