适合初学者的Vue-1.0教程（四）

先介绍一下bower包管理器

npm install bower -g（全局安装）
npm install bower （安装到当前文件夹）
bower -version（获取bower的版本号）
bower install <包名>（安装）
bower uninstall <包名>（卸载）
bower info <包名>（获取包名的所有版本号）  

$ bower install vue#1.0.28
//下载1.0.28版本的vue

vue动画

点击按钮，红色方块向右移动200px并逐渐透明化
再点击按钮，则在一开始的位置出现
vue动画的实现原理是：CSS3的transition、transform
在标签上增加transition="fade"属性
.fade-transition样式里写入transition属性
.fade-enter样式里写入出现动画
.fade-leave样式里写入消失动画

animate.css官网

bower install animate.css

里面封装了许多动画样式

引入animate.css文件

标签写入class="animated" transition="动画名称"属性

transitions:{ //定义所有动画名称
    bounce:{
        enterClass:'zoomInLeft',
        leaveClass:'zoomOutRight'
    }
}

设置动画名称bounce的进入动画enterClass和离开动画leaveClass

vue自定义组件

全局组件

HTML

javascript

        var Aaa=Vue.extend({
            template:'
我是标题3
'
        });
        Vue.component('aaa',Aaa);
        var vm=new Vue({
            el:'#box'
        });

等同

javascript

        Vue.component('aaa',{
            template:'
我是标题3
'
        });

效果

image.png

全局组件可以在任意挂载目标里使用

局部组件

HTML

javascript

var Aaa=Vue.extend({//组件对象
            template:'
{{msg}}
',
            data(){
                return {msg:'我是标题3'}
            }
        });
        var vm=new Vue({
            el:'#box',
            components:{ //局部组件
                aaa:Aaa
            }
        });

等同

javascript

        var vm=new Vue({
            el:'#box',
            components:{//定义多个组件
                'aaa':{//组件对象
                    data(){
                        return {msg:'我是标题3'}
                    },
                    template:'
{{msg}}
'
                }
            }
        });

组件是一个对象，
用ES6语法声明的data函数返回数据对象的属性msg，
用template属性定义模板
效果

image.png

组件模板

HTML

x-template--自定义组件模板

javascript

模板是HTML标签字符串
template的属性值是选择器，选择器匹配的标签就是模板

等同

template

javascript

捕获.PNG

动态组件

HTML

javascript

image.png

点击“bbb组件”按钮之后，下面的内容变成“我是bbb组件”

组件名可以是变量，当点击按钮之后，这个组件名的值会变化

父子组件

父组件传数据给子组件

components属性对象里，属性即是组件名
组件名属性对象里，template属性对象放入模板，
components属性则是子组件集合对象，里面放入子组件名属性，
依次类推，可以多层嵌套

父组件data属性函数的数据对象，传递给子组件的模板

    components:{
        'aaa':{
            data(){
                return {
                    msg:'我是父组件的数据'
                }
            },
            template:'
我是aaa组件
',
            components:{
                'bbb':{
                    template:'
我是bbb组件->{{msg}}
'
                }
            }
        }
    }

data属性返回的是一个对象，对象里面的属性即是数据，可以在它自身模板，或子组件的模板里使用，这样就完成父组件对子组件的数据传递

父组件的data属性函数的数据对象，传递给子组件自定义的属性

数据在在父组件上，
传递给父组件的模板，
子组件自定义了属性mmm，
数据传给子组件名的mmm属性,
子组件模板直接从mmm属性获取给传递的数据

自定义属性props是数组

    data(){
        return {
            msg:111,
            msg2:'我是父组件的数据'
        }
    },

    bbb':{
        props:['mmm','myMsg'],
        template:'
我是bbb组件->{{mmm}} 
 {{myMsg}}
'
    }

自定义属性props是对象，规定接受的数据类型

    components:{
        'bbb':{
            props:{
                'mmm':String,
                'myMsg':Number
            },
            template:'
我是bbb组件->{{mmm}} 
 {{myMsg}}
'
        }
    }

子组件传数据给父组件

$emit

点击子组件按钮，触发send方法函数，
this.$emit子组件发送数据this.a给自定义事件child-msg，
父组件触发自定义事件child-msg接收数据，调用get方法函数，
get方法函数接收数据，改变父组件的数据msg

image.png

image.png

slot—组件中的标签

插入标签组件化

    

        
            

                
1111
                
2222
                
3333
            
        
        

        
        
    
    
    

一对slot标签，表示插入组件的HTML标签，
如果组件里没有插入的HTML标签，即slot标签无效时，则slot标签里的数据才会显示

image.png

插入标签组件化的分类

    

        
            

                
1111
                
2222
                
3333
            
            

                
111
                
222
                
333
            
        
        

        
        
    
    

slot标签的name属性，将出入的HTML标签的顶部标签分类，
标顶部签的slot属性与之对应，
插入标签实际渲染的位置与模板里slot标签的位置有关，与组件里的位置无关

image.png

路由

嵌入路由插件vue-router

单层组件路由

基本的路由实例

    

        

            

                主页
            
            

                新闻
            
        
        //相当于两个链接
        

            
        
  
        //链接拿到的数据插入到HTML文档中的位置
    
    

image.png

默认路径获取的组件数据

    //6. 跳转
    router.redirect({
        '/':'/home'
    });

URL不输入路径时，默认链接的组件

多层组件路由

    
    

        

            

                主页
            
            

                新闻
            
        
        

            
        
  
    
    
    
    

image.png

新增news的子组件路由

news模板中的子链接，以及路由组件存放区域，
以及Detail模板

准备子组件Detail

    var Detail=Vue.extend({
        template:'#detail'
    });

父组件路由News，以及自组件路由Detail

    'news':{
        component:News,
        subRoutes:{
            //将路径对应位置的参数赋值给属性id
            '/detail/:id':{
                component:Detail
            }
        }
    }

image.png

获取激活的链接路径,并匹配参数对象

image.png

zns登录和strive注册

    'home':{
        component:Home,
        subRoutes:{
            'login/:name':{
                component:{
                    template:'我是登录信息 {{$route.params | json}}'
                }
            },
            'reg':{
                component:{
                    template:'我是注册信息'
                }
            }
        }
    },

image.png