定义Vue组件

• 什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
• 组件化和模块化的不同：
  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

组件定义的五种方式

1. 使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '<h1>登录</h1>'
    });
    Vue.component('login', login);

2. 直接使用 Vue.component 方法：

Vue.component('register', {
      template: '<h1>注册</h1>'
    });

3. 将模板字符串，定义到script标签种：

<script id="tmpl" type="x-template">
      <div><a href="#">登录</a> | <a href="#">注册</a></div>
    </script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
      template: '#tmpl'
    });

4. 作为对象

var tmp1={
  template:'<h1> helle Vue 组件</h1>
}
Vue.component('myCom5',tmp1)

5. 私有模板的快速定义

    var tmp2={
      template:'<h1> helle Vue 组件6</h1>'
    }
    var vm = new Vue({
      el:"#app",
      data:{
      },
      methods:{
      },
      components:{
        tmp2
      }
    })
    <tmp2></tmp2>

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
如果不使用驼峰,则直接拿名称来使用即可;

vue组件上的data和methods

1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!

Vue.component('mycom1', {
  template: '<h1>这是全局组件 --- {{msg}}</h1>',
  data: function () {
    return {
      msg: '这是组件的中data定义的数据'
    }
  }
})

5. 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1

Vue.component('counter', {
  template: '#tmpl',
  data: function () {
    // return dataObj
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

组件切换

Vue提供了 component ,来展示对应名称的组件
component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称

<component :is="comName"></component>

总结:当前学习了几个 Vue 提供的标签了
component, template, transition, transitionGroup

使用 this.$refs 来获取元素和组件

<com1 ref="mytemplate"></com1>
<h3 ref="myh3">获取的元素</h3>

console.log(this.$refs.myh3.innerText)
this.$refs.mytemplate.tmp1show()

注意：关于组件的属性绑定都应该在使用组件的地方编写，而不是在组件的模板里编写