适合初学者的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动画

<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
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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容

  • Vue官方教程笔记（Vue 1.X）
    1.安装 可以简单地在页面引入Vue.js作为独立版本，Vue即被注册为全局变量，可以在页面使用了。 如果希望搭建...
    Awey阅读 11,002评论 4赞 129
  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,204评论 0赞 6
  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,046评论 0赞 29
  • Vue的特性精华
    以下内容是我在学习和研究Vue时，对Vue的特性、重点和注意事项的提取、精练和总结，可以做为Vue特性的字典； 1...
    科研者阅读 14,059评论 3赞 24
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,806评论 25赞 707