Vue学习笔记37--内置关系

示例一：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个重要的内置关系</title>
  <script type="text/javascript" src="../../Js/vue.js"></script>
</head>
 
<body>
  <div id="root">
 
  </div>
</body>
 
</html>
<script type="text/javascript">
  Vue.config.productionTip = false
 
  // 定义一个构造函数
  function Demo () {
    this.a = 1
    this.b = 1
  }
  // 创建一个Demo实例对象
  const demo = new Demo();
  //prototype 显示原型属性
  console.log('显示原型属性==>', Demo.prototype)
  //__proto__ 隐式原型属性,注：下划线为两个
  console.log('隐式原型属性==>', demo.__proto__)
 
  // 程序员通过显示原型属性操作原型对象，追加一个x属性
  Demo.prototype.x = 100
  console.log('x==>' + demo.__proto__.x) //等价于以下写法
  console.log('x==>' + demo.x)
  console.log('demo.__proto__==Demo.prototype??', Demo.prototype === demo.__proto__)
 
  const vm = new Vue({
    el: '#root',
    data: {
      isHot: true,
    },
 
    methods: {
      changeWeather () {
        this.isHot = !this.isHot
      },
    },
  })
</script>

总结：

一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性、方法
- 注：组件实例对象vc，和Vue不完全一致，不能有el，data只能写为方法

示例二：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个重要的内置关系</title>
  <script type="text/javascript" src="../../Js/vue.js"></script>
</head>
 
<body>
  <div id="root">
    <h3>
      1.一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype <br><br>
      2.为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性、方法<br><br>
    </h3>
  </div>
</body>
 
</html>
<script type="text/javascript">
  Vue.config.productionTip = false
 
  /*  // 定义一个构造函数
   function Demo () {
     this.a = 1
     this.b = 1
   }
   // 创建一个Demo实例对象
   const demo = new Demo();
   //prototype 显示原型属性
   console.log('显示原型属性==>', Demo.prototype)
   //__proto__ 隐式原型属性,注：下划线为两个
   console.log('隐式原型属性==>', demo.__proto__)
  
   // 程序员通过显示原型属性操作原型对象，追加一个x属性
   Demo.prototype.x = 100
   console.log('x==>' + demo.__proto__.x) //等价于以下写法
   console.log('x==>' + demo.x)
   console.log('demo.__proto__==Demo.prototype??', Demo.prototype === demo.__proto__)
  */
 
 
  const school = Vue.extend({
    name: 'school',
    template:
      '<div>'
      + ' <h3>学校名称：{{schoolName}}</h3>'
      + ' <h3> 学校地址：{{ schoolAddress }}</h3>'
      + '</div>',
    data () {
      return {
        schoolName: '希望小学',
        schoolAddress: '西安/110号/希望小学',
      }
    },
  })
 
  const vm = new Vue({
    el: '#root',
    data: {
      msg: '你好vue',
    },
 
  })
  // 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  console.log('school.prototype.__proto__===Vue.prototype', school.prototype.__proto__ === Vue.prototype)
 
</script>