Day03Code

汤小洋Vue课程代码记录
课程连接地址：http://edu.51cto.com/course/10543.html
抄录至简书仅方便自己查阅，小伙伴们可以去学院支持该课程

code01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义组件的两种方式</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <hello></hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 方式1：先创建组件构造器，然后由组件构造器创建组件
         */
        //1.使用Vue.extend()创建一个组件构造器
        var MyComponent=Vue.extend({
            template:'<h3>Hello World</h3>'
        });
        //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件
        Vue.component('hello',MyComponent);
        
        /**
         * 方式2：直接创建组件(推荐)
         */
        // Vue.component('world',{
        Vue.component('my-world',{
            template:'<h1>你好，世界</h1>'
        });

        var vm=new Vue({ //这里的vm也是一个组件，称为根组件Root
            el:'#itany',
            data:{
                msg:'网博'
            }
        }); 
    </script>
</body>
</html>

code02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的分类</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <script>
        /**
         * 全局组件，可以在所有vue实例中使用
         */
        Vue.component('my-hello',{
            template:'<h3>{{name}}</h3>',
            data:function(){ //在组件中存储数据时，必须以函数形式，函数返回一个对象
                return {
                    name:'alice'
                }
            }
        });

        /**
         * 局部组件，只能在当前vue实例中使用
         */
        var vm=new Vue({
            el:'#itany',
            data:{
                name:'tom'
            },
            components:{ //局部组件
                'my-world':{
                    template:'<h3>{{age}}</h3>',
                    data(){
                        return {
                            age:25
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

code03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用模板</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
        <my-hello></my-hello>
    </div>

    <template id="wbs">
        <!-- <template>必须有且只有一个根元素 -->
        <div>
            <h3>{{msg}}</h3>
            <ul>
                <li v-for="value in arr">{{value}}</li>
            </ul>
        </div>
    </template>

    <script>
        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    name:'wbs17022',  //指定组件的名称，默认为标签名，可以不设置
                    template:'#wbs',
                    data(){
                        return {
                            msg:'欢迎来到南京网博',
                            arr:['tom','jack','mike']
                        }
                    }
                }
                
            }
        }); 
    </script>
</body>
</html>

code04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>


        <div>
            <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 -->
            <keep-alive>
                <component :is="flag"></component>  
            </keep-alive>
        </div>
    </div>

    <script>
        var vm=new Vue({
            el:'#itany',
            data:{
                flag:'my-hello'
            },
            components:{
                'my-hello':{
                    template:'<h3>我是hello组件：{{x}}</h3>',
                    data(){
                        return {
                            x:Math.random()
                        }
                    }
                },
                'my-world':{
                    template:'<h3>我是world组件：{{y}}</h3>',
                    data(){
                        return {
                            y:Math.random()
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

code05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件及组件间数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-hello></my-hello>
    </div>
    
    <template id="hello">
        <div>
            <h3>我是hello父组件</h3>
            <h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
            <h3>访问子组件的数据：{{sex}},{{height}}</h3>
            <hr>

            <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
        </div>
    </template>

    <template id="world">
        <div>
            <h4>我是world子组件</h4>
            <h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
            <h4>访问自己的数据：{{sex}},{{height}}</h4>
            <button @click="send">将子组件的数据向上传递给父组件</button>
        </div>
    </template>

    <script>
        var vm=new Vue({ //根组件
            el:'#itany',
            components:{
                'my-hello':{  //父组件
                    methods:{
                        getData(sex,height){
                            this.sex=sex;
                            this.height=height;
                        }
                    },
                    data(){
                        return {
                            msg:'网博',
                            name:'tom',
                            age:23,
                            user:{id:9527,username:'唐伯虎'},
                            sex:'',
                            height:''
                        }
                    },
                    template:'#hello',
                    components:{
                        'my-world':{ //子组件
                            data(){
                                return {
                                    sex:'male',
                                    height:180.5
                                }
                            },
                            template:'#world',
                            // props:['message','name','age','user'] //简单的字符串数组
                            props:{ //也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
                                message:String,
                                name:{
                                    type:String,
                                    required:true
                                },
                                age:{
                                    type:Number,
                                    default:18,
                                    validator:function(value){
                                        return value>=0;
                                    }
                                },
                                user:{
                                    type:Object,
                                    default:function(){ //对象或数组的默认值必须使用函数的形式来返回
                                        return {id:3306,username:'秋香'};
                                    }
                                }
                            },
                            methods:{
                                send(){
                                    // console.log(this);  //此处的this表示当前子组件实例
                                    this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件，发送数据
                                }
                            }
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

code06

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单向数据流</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <h2>父组件：{{name}}</h2>
        <input type="text" v-model="name">
        <h2>父组件：{{user.age}}</h2>

        <hr>

        <my-hello :name.sync="name" :user="user"></my-hello>
    </div>
    
    <template id="hello">
        <div>
            <h3>子组件：{{name}}</h3>
            <h3>子组件：{{user.age}}</h3>
            <button @click="change">修改数据</button>
        </div>
    </template>

    <script>
        var vm=new Vue({ //父组件
            el:'#itany',
            data:{
                name:'tom',
                user:{
                    name:'zhangsan',
                    age:24
                }
            },
            components:{
                'my-hello':{ //子组件
                    template:'#hello',
                    props:['name','user'],
                    data(){
                        return {
                            username:this.name //方式1：将数据存入另一个变量中再操作
                        }
                    },
                    methods:{
                        change(){
                            // this.username='alice';
                            // this.name='alice';
                            // this.$emit('update:name','alice'); //方式2：a.使用.sync，需要显式地触发一个更新事件
                            this.user.age=18;
                        }
                    }
                }
            }
        }); 
    </script>
</body>
</html>

code07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件间的通信</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>

    <template id="a">
        <div>
            <h3>A组件：{{name}}</h3>
            <button @click="send">将数据发送给C组件</button>
        </div>
    </template>

    <template id="b">
        <div>
            <h3>B组件：{{age}}</h3>
            <button @click="send">将数组发送给C组件</button>
        </div>
    </template>
    
    <template id="c">
        <div>
            <h3>C组件：{{name}}，{{age}}</h3>
        </div>
    </template>

    <script>
        //定义一个空的Vue实例
        var Event=new Vue();

        var A={
            template:'#a',
            data(){
                return {
                    name:'tom'
                }
            },
            methods:{
                send(){
                    Event.$emit('data-a',this.name);
                }
            }
        }
        var B={
            template:'#b',
            data(){
                return {
                    age:20
                }
            },
            methods:{
                send(){
                    Event.$emit('data-b',this.age);
                }
            }
        }
        var C={
            template:'#c',
            data(){
                return {
                    name:'',
                    age:''
                }
            },
            mounted(){ //在模板编译完成后执行
                Event.$on('data-a',name => {
                    this.name=name;
                    // console.log(this);
                });

                Event.$on('data-b',age => {
                    this.age=age;
                });
            }
        }

        var vm=new Vue({
            el:'#itany',
            components:{
                'my-a':A,
                'my-b':B,
                'my-c':C
            }
        }); 
    </script>
</body>
</html>

code08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot内容分发</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="itany">
        <!-- <my-hello>wbs17022</my-hello> -->
        <my-hello>
            <ul slot="s1">
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
            <ol slot="s2">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </my-hello>
    </div>

    <template id="hello">
        <div>
            <slot name="s2"></slot>
            <h3>welcome to itany</h3>
            <!-- <slot>如果没有原内容，则显示该内容</slot> -->
            <slot name="s1"></slot>
        </div>
    </template>

    <script>

        var vm=new Vue({
            el:'#itany',
            components:{
                'my-hello':{
                    template:'#hello'
                }
            }
        }); 
    </script>
</body>
</html>

code09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由基本用法</title>
    <style>
        /* .router-link-active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        } */
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <div>
            <!-- 使用router-link组件来定义导航，to属性指定链接url -->
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <!-- router-view用来显示路由内容 -->
            <router-view></router-view>
        </div>
    </div>

    <script>
        //1.定义组件
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var News={
            template:'<h3>我是新闻</h3>'
        }

        //2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'} //重定向
        ]

        //3.创建路由实例
        const router=new VueRouter({
            routes, //简写，相当于routes:routes
            // mode:'history', //更改模式
            linkActiveClass:'active' //更新活动链接的class类名
        });

        //4.创建根实例并将路由挂载到Vue实例上
        new Vue({
            el:'#itany',
            router //注入路由
        });
    </script>
</body>
</html>

code10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套和参数传递</title>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .active{
            font-size:20px;
            color:#ff7300;
            text-decoration:none;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="itany">
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/user">用户</router-link>
        </div>
        <div>
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <router-view></router-view>
            </transition>
        </div>

        <hr>
        <button @click="push">添加路由</button>
        <button @click="replace">替换路由</button>
    </div>

    <template id="user">
        <div>
            <h3>用户信息</h3>
            <ul>
                <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
                <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <script>
        var Home={
            template:'<h3>我是主页</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'
        }
        var Regist={
            template:'<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'
        }

        const routes=[
            {
                path:'/home',
                component:Home
            },
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component:Login
                    },
                    {
                        path:'regist/:username/:password',
                        component:Regist
                    }
                ]
            },
            {
                path:'*',
                redirect:'/home'
            }
        ]

        const router=new VueRouter({
            routes, //简写，相当于routes:routes
            linkActiveClass:'active' //更新活动链接的class类名
        });

        new Vue({
            el:'#itany',
            router, //注入路由
            methods:{
                push(){
                    router.push({path:'home'}); //添加路由，切换路由
                },
                replace(){
                    router.replace({path:'user'}); //替换路由，没有历史记录
                }
            }
        });
    </script>
</body>
</html>

code11

code12

code13

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

Day03Code

code01

code02

code03

code04

code05

code06

code07

code08

code09

code10

code11

code12

code13

推荐阅读更多精彩内容