vue(五)

VueComponent:

1. school组件本质是个名为VueComponent的构造函数， 且不是程序员定义的，是Vue.extend()定义的
2.我们只需要写<school/ >或<schoo1></school>. Vue解 析时会帮我们创建school组件的实例
即Vue裙我们执行的: new VueComponent(options)。
3.特别注意:每次调用Vue.extend,返回的都是”个全新的VueComponent!!!!
4.关于this指向:
(1).组件配置中:
data丙数、me thods中的函数、watch中的函数、computed中的函数 它们的this均指向VC
(2) . new Vue (options )配置中:
data函数、methods 中的两数、watch中的两数、computed中的函数它们的this均指向VM
5. VueComponent的实例对象，以后简称vc (也可称之为:组件实例对象)
Vue的实例对象，以后简称vm。

单文本组件

<template>
  <!--组件的结构-->
</template>

<script>
  //组件交互的相关代码
</script>

<style>
    //组件样式
</style>

<template>
  <!--组件的结构-->
  <div class="demo">
    <h2>学校名称：{
  {schoolName}}</h2>
    <h2>学校地址：{
  {schoolAdress}}</h2>
    <button @click="showName">点我提示学校名称</button>
  </div>
</template>

<script>
  //组件交互的相关代码
  export default {
    name: 'School',
    data() {
      return {
        schoolName: 'xuexiao',
        schoolAdress: 'dizhi'
      }
    },
    methods:{
      showName() {
        alert(this.schoolName)
      }
    }
  }
</script>

<style>
  .demo{
    background-color:royalblue;
  }
</style>

<template>
  <!--组件的结构-->
  <div class="demo2">
    <h2>姓名：{
  {name}}</h2>
    <h2>年龄：{
  {age}}</h2>
   
  </div>
</template>

<script>
  //组件交互的相关代码
  export default {
    name: 'Student',
    data() {
      return {
        name: 'Alice',
        age:18
      }
    }
  }
</script>

<style>
  .demo2{
    background-color:greenyellow;
  }
</style>

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <School />
    <Student />
  </div>
</template>

<script>

  import School from './components/School'
  import Student from './components/Student'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //方法一
 //render: h => h(App)
  /*
   * 方法二*/