Vue基础入门(第二节)【连载...】

                                                                Vue基础入门(第二节)

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

一、组件

=============================================================

demo代码地址：https://github.com/darkcityX/vueDemo

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

一、组件

        1、相关介绍

               （1）、组件是一个可被反复使用的，带有特定功能的视图

               （2）、组件并不是vue的专利，Vue/Angular/React的组件都是以w3c中的WebComponent为标准创建的

               （3）、组件树

        2、组件的封装

              （1）、全局组件

                          Vue.component('my-component',{

                                      template: '<h1>hello VueJS</h1>'

                          });

              （2）、局部组件

                         new Vue({

                                 el : "#demo",

                                 data : {

                                       msg: "Vue is Awesome"        

                                 },

                                 components:{

                                      'my-header':{

                                              template: '<h1>it 's head</h1>'

                                      }

                                }

                         });

        3、调用组件

                像使用普通的html标签一样，去调用组件类

                <my-header></my-header>

        4、注意事项

               （1）、全局组件并不意味可以用在任何一个位置，嵌套在任何一个组件

               （2）、局部组件只能用在el所指定的标签范围内，不能嵌套在其它组件中

               （3）、组件在调用时，必须写开闭标签。

练习：分页功能

            视图：上一页、下一页  、分页按钮构成的

            功能：

                 （1）、默认第一页高亮

                 （2）、第一个选中，上一页不能点击

                 （3）、最后一个选中，下一页不能点击

                 （4）、选中某一页，当前页面高亮显示