Vue快速入门-2-Vue框架高级操作

小生博客：http://xsboke.blog.51cto.com

        -------谢谢您的参考，如有疑问，欢迎交流

---

目录:

1. 自定义组件
2. 全局注册的自定义组件
3. 局部注册自定义组件
4. 组件的嵌套
5. 组件的动态切换
6. Vue的ajax

1. 自定义组件

    就相当于自定义标签,其实底层还是html标签,只不过是套了个名字

    自定义组件分为全局注册和局部注册
    共同点:
        为什么data必须以函数方式返回数据？
            因为在函数中,变量属于内部变量,这样当自定义组件被多次引用时变量不会互相影响.
        只能在Vue对象中使用自定义组件

    不同点:
        全局注册的自定义组件：创建组件之后,只要是Vue对象就可以使用
        局部注册的自定义组件：在Vue实例中使用components选项来定义你的局部组件

2. 全局注册的自定义组件

   2.1 组件的结构

       Vue.component('component-name',{ /*  ......  */})
   
       -- 'component-name'             组件名称
       -- { /*  ......  */}            组件的内容(执行的函数)

   2.2 简单组件的实现

   2.3 当你需要多个组件之间的data返回值相同时可以这样解决.

   2.4 解决你template里面的内容比较庞大时的操作

   ```
   
       
   
   
   
       
   
           
       
   
       
   
           
       
   
       
   
   ```

3. 局部注册自定义组件

    局部注册自定义标签就是在Vue实例里面通过components选项创建自定义标签

    
        
    

    
        

            
        

        
    

4. 组件的嵌套

    知识点:使用slot的name属性,用来关联标签或者组件,实现定义嵌套标签或者组件的位置

        

            
                组件与组件之间嵌套
            
        

        

            
                左                         -- 这里的slot值必须和Vue实例中components选项的name值一样
                右
            
        

        

5. 组件的动态切换

    类似JQuery的tab
        
        

            第一项
            第二项             -- 点击按钮时执行changeComp函数,并且传入实参"2".
            第三项
                                                            -- 使用keep-alive标签可以保留当前组件的状态值,防止组件之间切换时,值丢失
                
            
        
        

6. Vue的ajax

详情查看axios中文手册

    中文手册:https://www.kancloud.cn/yunye/axios/234845
    自2.0之后Vue使用axios实现ajax功能
        -- 注意使用axios需要引入axios的js文件
        

            
            

                
{{item.id}}
                
{{item.name}}
                
{{item.age}}
            
        

        

        then        --      操作成功后执行的动作
        catch       --      操作异常时执行的动作