17组件

<template>
    <div>
      <h1>非单文件组件</h1>
    </div>
    <hr/>
    <div id="root">
    </div>
    <hr>
    Vue中使用组件的三大步骤
       一: 定义组件(创建组件)
       二: 注册组件
       三: 使用组件(写组件标签)
    一:如何定义一个组件
            使用Vue.extend(options)创建,其中options和 new Vue(options)是传入的那个options几乎一样,但也有点区别:
            区别如下:
                      1.el不要写,为什么? 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
                      2.data必须写成函数,为什么?  避免组件不复用时,数据存在引用关系
            备注: 使用template可以配置组件结构
    二:如何注册组件
            1.局部注册:靠new Vue的时候传入components选项
            2.全局注册:靠Vue.component('组件名',组件)
    三:编写标签:
      <!-- <student></student> -->
    几个注意点:
        1.关于组件名:
            一个单词组成:
                第一种写法(首字母小写): school
                第二种写法(首字母大写): School
            多个单词组成
                第一种写法(kebab-case命名): my-school
                第二种写法(CamelCase): MySchool (需要Vue脚手架支持)
        备注
            (1.)组件名尽可能回避HTML中已有的元素名称,例如:h2,H2都不行
            (2.)可以使用name配置项指定组件在开发者工具中呈现的名字
        2.关于组件标签:
                第一种写法: <school></school>
                第二种写法: <school/>
                备注: 不适用脚手架时,<school/>会导致后续组件不能渲染
        3.一个简写方式
              const school = Vue.extend(options) 可简写为: const school = options
    
      关于VueComponent:
        1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
        2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象。
          即Vue帮我们执行的:new VueComponent(options)
        3.特别注意: 每次调用Vue.extends,返回的都是一个全新的VueComponent!!!
        
        4.关于this指向:
             (1.)组件配置中:
                     data函数,methods中的函数,watch中的函数,computed中的函数 它们的this均是【VueComponent实例对象】
             (2.)new Vue()配置中:
                     data函数,methods中的函数,watch中的函数,computed中的函数 它们的this均是Vue实例对象
        5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
           Vue的实例对象,以后简称vm
      
       1.一个重要的内置关系: VueComponent.prototype.__proto__ === Vue.prototype
       2.为什么要有这个关系: 让组件实例对象(vc)可以访问到 Vue原型上的属性,方法.
  
  </template>
  
  
  
  <script>
  
  export default {
    data() { 
      return {
       
      }
    },
    methods:{
    },
    computed: {
      },
    watch: {
  
    },
    directives: {
    },
  
  
    // // 定义一个构造函数
    // function Demo () {
    //   this. a  = 1
    //   this. b = 2
    // }
    // // 创建一个Demo的实例对象
    // const d = new Demo()
    // console.log(Demo.prototype) // 显示原型属性
    // console.log(d.__proto__)    // 隐式原型属性
    
    // console.lgo(Demo.prototype === d.__proto__) //true
  
    //程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
    // Demo.prototype.x =99
    // 顺着上面那条线放东西， 在顺着这条线去找东西
    // console.log(d.__proto__.x)
    // console.log('@',d)
  }
  </script>
  <style scoped>
  </style>


----------------------------------------------------------------------------------------


<template>
  <!-- 组件的结构 -->
  <div>
    <h1>单文件组件</h1>
  </div>
  <hr/>
  <div id="root" class="demo">
    <h2>名称:{{ name }}</h2>
    <h2>地址:{{ address }}</h2>
    <button @click="showName">点我提示地址</button>
  </div>
  <hr>

</template>



<script>
// 组件交互相关的代码(数据,方法等等)
export default {
  // name: '',
  data() { 
    return {
      name: '有什么情绪就和我说吧！',
      address: '人,生而孤独,有些路只能一个人走，与其默默承受,不如独自享受。',
     
    }
  },
  methods:{
    showName () {
      alert(this.name)
    }
  },
  computed: {
    },
  watch: {

  },
  directives: {
  },

}
</script>
<!-- ES6模块化
export {school} 统一暴露  import {？？？} from ？？？
export default school 默认暴露 import ？？？ from ？？？
-->
<style scoped>
/* 组件的样式 */
.demo {
  background-color: orange;
}
</style>