zoukankan      html  css  js  c++  java
  • VueComponent构造函数

    关于VueComponent

      1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
      2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象, 即Vue帮我们执行的:new VueComponent(options)。
      3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!
      4.关于this指向:
        (1).组件配置中:
                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
        (2).new Vue(options)配置中:
                    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
      5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm。
     
     
      6.内置关系
         1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
                    2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
     

    代码举例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>VueComponent</title>
            <script type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body><!-- 准备好一个容器-->
            <div id="root">
                <school></school>
                <hello></hello>
            </div>
        </body>
    
        <script type="text/javascript">
            Vue.config.productionTip = false
            
            //定义school组件
            const school = Vue.extend({
                name:'school',
                template:`
                    <div>
                        <h2>学校名称:{{name}}</h2>    
                        <h2>学校地址:{{address}}</h2>    
                        <button @click="showName">点我提示学校名</button>
                    </div>
                `,
                data(){
                    return {
                        name:'西华大学',
                        address:'成都郫县'
                    }
                },
                methods: {
                    showName(){
                        console.log('showName',this)
                    }
                },
            })
    
            const test = Vue.extend({
                template:`<span>xihua</span>`
            })
    
            //定义hello组件
            const hello = Vue.extend({
                template:`
                    <div>
                        <h2>{{msg}}</h2>
                        <test></test>    
                    </div>
                `,
                data(){
                    return {
                        msg:'你好啊!wangxq'
                    }
                },
                components:{test}
            })
    
    
            console.log('@',school)
            // console.log('#',hello)
    
            //创建vm
            const vm = new Vue({
                el:'#root',
                components:{school,hello}
            })
        </script>
    </html>

    运行图示:每个组件对应一个VueComponent

  • 相关阅读:
    5 年,只为了一个更好的校验框架
    springboot 中 inputStream 神秘消失之谜
    没啥用的黑科技——自动生成测试对象信息框架
    投资中最简单的事
    一个提升英文单词拼写检测性能 1000 倍的算法?
    基于 junit5 实现 junitperf 源码分析
    关于 junit4 90% 的人都不知道的特性,详解 junitperf 的实现原理
    性能测试到底该怎么做?
    从代码生成说起,带你深入理解 mybatis generator 源码
    java 实现中英文拼写检查和错误纠正?可我只会写 CRUD 啊!
  • 原文地址:https://www.cnblogs.com/ftx3q/p/15324620.html
Copyright © 2011-2022 走看看