<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
    <!--
    1、 VueComponent.prototype.__proto__ === Vue.prototype
    -->
    <school></school>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示

    // 为Vue的原型添加属性x
    Vue.prototype.x = 100

    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h2>学校名称: {{ name }}</h2>
          <h2>学校地址: {{ address }}</h2>
          <button @click="showX">点击触发showX</button>
          </div>`,
        data() {
            return {
                name: "修仙学院",
                address: "天山"
            }
        },
        methods: {
            showX() {
                console.log(this)
                console.log(this.x)
            }
        }
    })

    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            msg: 'Hello',
        },
        components: {
            school:school
        }
    })

    // 创建一个Demo构造方法
    function Demo() {
        this.a = 1
        this.b = 2
    }

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

    console.log(Demo.prototype)  // 显示原型属性
    console.log(d.__proto__)  // 隐式原型属性
    console.log(Demo.prototype === d.__proto__)
    Demo.prototype.x = 99
    console.log(d.__proto__.x)
    console.log(d.x)

</script>

</body>
</html>