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

作者: 林立镇 | 来源:发表于2017-08-19 13:35 被阅读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动画

<style>
        #div1{
            width:100px;
            height:100px;
            background: red;
        }
        .fade-transition{
            transition: 1s all ease;    
        }
        .fade-enter{
            opacity: 0;
        }
        .fade-leave{
            opacity: 0;
            transform: translateX(200px);
        }
    </style>
    <div id="box">
        <input type="button" value="按钮" @click="toggle">
        <div id="div1" v-show="bSign" transition="fade"></div>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{bSign:true},
            methods:{
                toggle(){this.bSign=!this.bSign;}
            }
        });
    </script>

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

animate.css官网

bower install animate.css

里面封装了许多动画样式

<link rel="stylesheet" href="bower_components/animate.css/animate.css">

引入animate.css文件

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>

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

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

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

vue自定义组件

全局组件

HTML

    <div id="box">
        <aaa></aaa>
    </div>

javascript

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

等同

javascript

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

效果

image.png

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

局部组件

HTML

<div id="box">
    <aaa></aaa>
</div>

javascript

var Aaa=Vue.extend({//组件对象
            template:'<h3>{{msg}}</h3>',
            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:'<h3>{{msg}}</h3>'
                }
            }
        });

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

image.png

组件模板

HTML

    <div id="box">
        <aaa></aaa>
    </div>

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

    <script type="x-template" id="aaa">
        <h3>{{msg}}</h3>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>orange</li>
        </ul>
    </script>

javascript

    <script type="text/javascript">
            var vm=new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是标题3'}
                    },
                    template:'#aaa'
                }
            }
        });
    </script>

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

等同

template

    <template id="aaa">
        <h3>{{msg}}</h3>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

javascript

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:'我是标题3',
                            arr:['apple','banana','orange']
                        }
                    },
                    template:'#aaa'
                }
            }
        });
    </script>

捕获.PNG

动态组件

HTML

    <div id="box">
        <input type="button" @click="a='aaa'" value="aaa组件">
        <input type="button" @click="a='bbb'" value="bbb组件">
        <component :is="a"></component>
    </div>

javascript

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h3>我是aaa组件</h3>'
                },
                'bbb':{
                    template:'<h3>我是bbb组件</h3>'
                }
            }
        });
    </script>

image.png

点击“bbb组件”按钮之后，下面的内容变成“我是bbb组件”
<component :is="组件名"><component>
组件名可以是变量，当点击按钮之后，这个组件名的值会变化

父子组件

父组件传数据给子组件

    <div id="box">
        <aaa>
        </aaa>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h2>我是aaa组件</h2><bbb></bbb>',
                    components:{
                        'bbb':{
                            template:'<h3>我是bbb组件</h3>'
                        }
                    }
                }
            }
        });
    </script>

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

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

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

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

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

    <div id="box">
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            props:['mmm'],
                            template:'<h3>我是bbb组件->{{mmm}}</h3>'
                        }
                    }
                }
            }
        });
    </script>

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

自定义属性props是数组

    <bbb :mmm="msg2" :my-msg="msg"></bbb>

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

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

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

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

子组件传数据给父组件

$emit

    <div id="box">
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <span>我是父级 -> {{msg}}</span>
        <bbb @child-msg="get"></bbb>
    </template>
    <template id="bbb">
        <h3>子组件-</h3>
        <input type="button" value="send" @click="send">
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:111
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){
                            this.msg=msg;
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子组件的数据'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });

    </script>

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

image.png

slot—组件中的标签

插入标签组件化

    <div id="box">
        <aaa>
            <ul>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
        </aaa>
        <hr>
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot>这是默认的情况</slot>
        <p>welcome vue</p>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'#aaa'
                }
            }
        });
    </script>

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

image.png

插入标签组件化的分类

    <div id="box">
        <aaa>
            <ul slot="ul-slot">
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
            </ul>
            <ol slot="ol-slot">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </aaa>
        <hr>
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>xxxx</h1>
        <slot name="ol-slot">这是默认的情况</slot>
        <p>welcome vue</p>
        <slot name="ul-slot">这是默认的情况2</slot>
    </template>

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

image.png

路由

嵌入路由插件vue-router

<script src="bower_components/vue-router/dist/vue-router.js"></script>

单层组件路由

基本的路由实例

    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        //相当于两个链接
        <div>
            <router-view></router-view>
        </div>  
        //链接拿到的数据插入到HTML文档中的位置
    </div>
    <script>
        //1. 准备一个根组件，包含链接和链接数据存放的位置
        var App=Vue.extend();
        //2. Home News组件都准备，链接数据
        var Home=Vue.extend({
            template:'<h3>我是主页</h3>'
        });
        var News=Vue.extend({
            template:'<h3>我是新闻</h3>'
        });
        //3. 准备路由，路由实例
        var router=new VueRouter();
        //4. 关联，判断链接路径，给出响应的数据，
        //参数是一个链接路径对象，属性是链接的路径，对应链接的属性是对应的组件属性
        router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });
        //5. 启动路由，并绑定链接的整个区域范围
        router.start(App,'#box');
    </script>

image.png

默认路径获取的组件数据

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

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

多层组件路由

    <style>
        //vue链接激活状态的样式
        .v-link-active{
            font-size: 20px;
            color: #f60;
        }
    </style>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>  
    </div>
    <template id="home">
        <h3>我是主页</h3>
        //子路由组件，链接
        <div>
            <a v-link="{path:'/home/login'}">登录</a>
            <a v-link="{path:'/home/reg'}">注册</a>
        </div>
       //子路由组件数据存放区域
        <div>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <h3>我是新闻</h3>
    </template>
    <script>
        //1. 准备一个根组件
        var App=Vue.extend();
        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'#home'
        });
        var News=Vue.extend({
            template:'#news'
        });
        //3. 准备路由
        var router=new VueRouter();
        //4. 关联，路由
        router.map({
             //路由路径
            'home':{
                component:Home,
                //关联呢，子路由
                subRoutes:{
                    //子路由链接
                    'login':{
                        component:{
                            template:'<strong>我是登录信息</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'<strong>我是注册信息</strong>'
                        }
                    }
                }
            },
            'news':{
                component:News
            }
        });
        //5. 启动路由
        router.start(App,'#box');
        //6. 跳转
        router.redirect({
            '/':'home'
        });
    </script>

image.png

新增news的子组件路由

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

    <template id="news">
        <h3>我是新闻</h3>
        <div>
            <a v-link="{path:'/news/detail/001'}">新闻001</a>
            <a v-link="{path:'/news/detail/002'}">新闻002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
        {{$route.params | json}}
    </template>

准备子组件Detail

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

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

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

image.png

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


    <template id="detail">
        //参数对象
        {{$route.params | json}}
        <br>
        //激活的链接路径
        {{$route.path}}
        <br>
        {{$route.query | json}}
    </template>

image.png

zns登录和strive注册

    <template id="home">
        <h3>我是主页</h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登录</a>
            <a v-link="{path:'/home/reg/strive'}">注册</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>

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

image.png

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

先介绍一下bower包管理器

vue动画

animate.css官网

vue自定义组件

全局组件

等同

局部组件

等同

组件模板

等同

动态组件

父子组件

父组件传数据给子组件

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

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

自定义属性props是数组

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

子组件传数据给父组件

$emit

slot—组件中的标签

插入标签组件化

插入标签组件化的分类

路由

单层组件路由

基本的路由实例

默认路径获取的组件数据

多层组件路由

新增news的子组件路由

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

zns登录和strive注册

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读