Vue总结3-组件相关

1.定义全局组件

  • 1.1 方法一

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>37-Vue组件-自定义全局组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
Vue两大核心: 1.数据驱动界面改变 2.组件化
1.什么是组件? 什么是组件化?
1.1在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件
1.2将大界面拆分成小界面就是组件化

2.组件化的好处
2.1可以简化Vue实例的代码
2.2可以提高复用性

3.Vue中如何创建组件?
3.1创建组件构造器
3.2注册已经创建好的组件
3.3使用注册好的组件
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <!--// 3.3使用注册好的组件-->
    <abc></abc>
</div>
<script>
    // 3.1创建组件构造器
    let Profile = Vue.extend({
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: `
           <div>
                <img src="images/fm.jpg"/>
                <p>我是描述信息</p>
            </div>
        `
    });
    // 3.2注册已经创建好的组件
    // 第一个参数: 指定注册的组件的名称
    // 第二个参数: 传入已经创建好的组件构造器
    Vue.component("abc", Profile );

    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
 
</body>
</html>

  • 1.2 方法二

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-Vue组件-自定义全局组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.创建组件的其它方式
1.1在注册组件的时候, 除了传入一个组件构造器以外, 还可以直接传入一个对象
1.2在编写组件模板的时候, 除了可以在字符串模板中编写以外, 还可以像过去的art-template一样在script中编写
1.3在编写组件模板的时候, 除了可以在script中编写以外, vue还专门提供了一个编写模板的标签template(推荐)
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <!--// 3.3使用注册好的组件-->
    <abc></abc>
</div>
<!--
<script id="info" type="text/html">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</script>
-->
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>
<script>
    Vue.component("abc", {
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: "#info"
    });

    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>

2.定义局部组件

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>39-Vue组件-自定义局部组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定义全局组件特点
在任何一个Vue实例控制的区域中都可以使用

2.自定义局部组件特点
只能在自定义的那个Vue实例控制的区域中可以使用

3.如何自定义一个局部组件
在vue实例中新增components: {}
在{}中通过key/vue形式注册组件
components:{
   abc: {}
}
-->
<!--这里就是MVVM中的View-->
<div id="app1">
    <abc></abc>
</div>
<div id="app2">
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <p>我是描述信息</p>
    </div>
</template>
<script>
    // 这里就是MVVM中的View Model
    let vue1 = new Vue({
        el: '#app1',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
    // 这里就是MVVM中的View Model
    let vue2 = new Vue({
        el: '#app2',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
            "abc": {
                // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
                template: "#info"
            }
        }
    });
</script>
</body>
</html>

3.组件中的data和method

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>40-Vue组件-组件中的data和methods</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.自定义组件中的data和methods
Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中也能使用data和methods

2.自定义组件中data注意点
在自定义组件中不能像在vue实例中一样直接使用data
而是必须通过返回函数的方式来使用data

3.自定义组件中的datadata为什么是一个函数
因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <!--
    由于我们是在Vue实例控制的区域中使用的函数
    所以系统回去Vue实例中查找有没有对应的方法
    所以我们需要在Vue实例中实现对应的方法
    -->
    <button @click="appFn">我是按钮</button>
    <!--
    由于我们是在Vue实例控制的区域中使用了数据
    所以系统回去Vue实例中查找有没有对应的数据
    所以我们需要在Vue实例中添加对应的数据
    -->
    <p>{{appMsg}}</p>
    <abc></abc>
</div>
<template id="info">
    <div>
        <img src="images/fm.jpg"/>
        <!--
        由于我们是在自定义组件中使用了函数
        所以系统会去自定义的组件中查找有没有对应的方法
        所以我们需要在自定义的组件中实现对应的方法
        -->
        <button @click="abcFn">我是按钮</button>
        <p>{{abcMsg}}</p>
    </div>
</template>
<script>
    // 自定义全局组件
    Vue.component("abc", {
        // 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
        template: "#info",
        methods: {
            abcFn(){
                alert("abcFn");
            }
        },
       
        // 注意点: 虽然在自定义的组件中也可以使用data, 但是在使用的时候, 使用的方式和Vue实例中不太一样
        //         在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据
        /*
        组件中的data如果不是通过函数返回的, 那么多个组件就会公用一份数据, 就会导致数据混乱
        如果组件中的data是通过函数返回的, 那么每创建一个新的组件, 都会调用一次这个方法
        将这个方法返回的数据和当前创建的组件绑定在一起, 这样就有效的避免了数据混乱
        * */
        data: function () {
            return {
                abcMsg: "学院"
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            appMsg:"知播渔"
        },
        // 专门用于存储监听事件回调函数
        methods: {
            appFn(){
                alert("appFn");
            }
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>

4.组件切换

  • 4.1 通过v-if切换

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>42-Vue组件-组件切换</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.组件切换
对于普通的元素我们可以通过v-if来实现切换
对于组件我们也可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <button @click="toggle">切换</button>
    <!--<p v-if="isShow">我是首页</p>
    <img v-else src="images/fm.jpg" alt="">-->
    <home v-if="isShow"></home>
    <photo v-else></photo>
</div>
<template id="home">
    <div>
        <p>我是首页</p>
    </div>
</template>
<template id="photo">
    <div>
        <img src="images/fm.jpg" alt="">
    </div>
</template>
<script>
    // 自定义全局组件
    Vue.component("home", {
        template: "#home",
    });
    Vue.component("photo", {
        template: "#photo",
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            isShow: true
        },
        // 专门用于存储监听事件回调函数
        methods: {
            toggle(){
                this.isShow = !this.isShow;
            }
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>

  • 4.2 通过component切换

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43-Vue组件-动态组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是动态组件?
通过v-if/v-else-if/v-else确实能够切换组件
但是在Vue中切换组件还有一种更专业的方式
<component v-bind:is="需要显示组件名称"></component>
component我们称之为动态组件, 也就是你让我显示谁我就显示谁

2.为什么可以通过v-if切换还要有component
因为component可以配合keep-alive来保存被隐藏组件隐藏之前的状态
比如一个组件中定义了一个单选框,选中后切换组件后依然处于选中状态
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <button @click="toggle">切换</button>
    <keep-alive>
        <component :is="name"></component>
    </keep-alive>

</div>
<template id="home">
    <div>
        <p>我是首页</p>
        <input type="checkbox">
    </div>
</template>
<template id="photo">
    <div>
        <img src="images/fm.jpg" alt="">
    </div>
</template>
<script>
    // 自定义全局组件
    Vue.component("home", {
        template: "#home",
    });
    Vue.component("photo", {
        template: "#photo",
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            //isShow: true,
            name: "home"
        },
        // 专门用于存储监听事件回调函数
        methods: {
            toggle(){
                //this.isShow = !this.isShow;
                this.name = this.name === "home" ? "photo" : "home";
            }
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>

  • 4.3 切换动画

  • 也是通过transition和transition-group

5.父子组件

  • 5.1 基本概念

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>46-Vue组件-父子组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是父子组件?
在一个组件中又定义了其它组件就是父子组件
其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件
我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件

2.如何定义其它的父子组件
前面我们说过, 自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components
所以我们也可以在自定义组件中再定义其它组件
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--    <home></home>-->
    <father></father>
<!--    <son></son>-->
</div>
<template id="father">
    <div>
        <p>我是父组件</p>
        <son></son>
    </div>
</template>
<template id="son">
    <div>
        <p>我是子组件</p>
    </div>
</template>
<script>
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
            // "home": {
            //     template: "#home"
            // }
            "father": {
                template: "#father",
                components: {
                    "son": {
                        template: "#son"
                    }
                }
            }
        }
    });
</script>
</body>
</html>

  • 5.2 父子组件数据传递

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-Vue组件-父子组件数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.父子组件数据传递?
在Vue中子组件是不能访问父组件的数据的,
如果子组件想要访问父组件的数据, 必须通过父组件传递

2.如何传递数据
2.1在父组件中通过v-bind传递数据
   传递格式 v-bind:自定义接收名称 = "要传递数据"
2.2在子组件中通过props接收数据
   接收格式 props: ["自定义接收名称"]
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <!--注意点: 组件是可以使用自己的数据的-->
        <p>{{name}}</p>
        <p>{{age}}</p>
        <!--这里将父组件的name通过parentname传递给了子组件-->
        <son :parentname="name" :abc="age"></son>
    </div>
</template>
<template id="son">
    <div>
        <!--这里通过parentname使用了父组件传递过来的数据-->
        <p>{{parentname}}</p>
        <p>{{abc}}</p>
    </div>
</template>
<script>
    // 父组件
    Vue.component("father", {
        template: "#father",
        data: function(){
          return {
              name: "lnj",
              age: 33
          }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                // 这里通过parentname接收了父组件传递过来的数据
                props: ["parentname", "abc"]
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>

  • 5.3 父子组件方法传递

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-Vue组件-父子组件方法传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.父子组件方法传递?
在Vue中子组件是不能访问父组件的方法的,
如果子组件想要访问父组件的方法, 必须通过父组件传递

2.如何传递方法
2.1在父组件中通过v-on传递方法
   传递格式 v-on:自定义接收名称 = "要传递方法"
2.2在子组件中自定义一个方法
2.3在自定义方法中通过 this.$emit('自定义接收名称');触发传递过来的方法
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <button @click="say">我是按钮</button>
        <!--这里通过parentsay将父组件的say方法传递给了子组件-->
        <son @parentsay="say"></son>
    </div>
</template>
<template id="son">
    <div>
        <button @click="sonFn">我是按钮</button>
    </div>
</template>
<script>
    // 父组件
    Vue.component("father", {
        template: "#father",
        methods: {
            say(){
                alert("www.it666.com");
            }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                /*
                注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收
                        如果传递的是方法, 那么需要在子组件中自定义一个方法
                        如果传递的是方法, 那么在子组件中直接使用自定义的方法即可
                        如果传递的是方法, 那么需要在子组件自定义的方法中通过
                        this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法
                * */
                // props: ["parentsay"]
                methods: {
                    sonFn(){
                        this.$emit("parentsay");
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>

  • 5.4 组件命名注意点

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50-Vue组件-组件中的命名注意点</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.组件中的命名注意点
1.1注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"
例如: 注册时: myFather  ->  使用时: my-father
1.2在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
例如: 传递时: parent-name="name" ->  接收时: props: ["parentName"]
1.3在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
@parent-say="say"  -> this.$emit("parent-say");
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <my-father></my-father>
</div>
<template id="father">
    <div>
        <p>{{name}}</p>
        <button @click="say">我是按钮</button>
        <son :parent-name="name" @parent-say="say"></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{parentName}}</p>
        <button @click="sonFn">我是按钮</button>
    </div>
</template>
<script>
    // 父组件
    Vue.component("myFather", {
        template: "#father",
        data: function(){
            return {
                name: "lnj"
            }
        },
        methods: {
            say(){
                console.log("www.it666.com");
            }
        },
        // 子组件
        components: {
            "son": {
                template: "#son",
                props: ["parentName"],
                methods: {
                    sonFn(){
                        this.$emit("parent-say");
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>

  • 5.5 组件多级传递

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-Vue组件-数据和方法的多级传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.数据和方法的多级传递
在Vue中如果儿子想使用爷爷的数据, 必须一层一层往下传递
在Vue中如果儿子想使用爷爷的方法, 必须一层一层往下传递
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <grandfather></grandfather>
</div>
<template id="grandfather">
    <div>
        <p>{{name}}</p>
        <button @click="say">我是按钮</button>
        <father :gfname="name" @gfsay="say"></father>
    </div>
</template>
<template id="father">
    <div>
        <p>{{gfname}}</p>
        <button @click="fatherFn">我是按钮</button>
        <son :fname="gfname" @fsay="fatherFn"></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{fname}}</p>
        <button @click="sonFn">我是按钮</button>
    </div>
</template>
<script>
    // 爷爷组件
    Vue.component("grandfather", {
        template: "#grandfather",
        data: function(){
            return {
                name: "lnj"
            }
        },
        methods: {
            say(){
                console.log("我是爷爷的方法");
            }
        },
        // 爸爸组件
        components: {
            "father": {
                template: "#father",
                props: ["gfname"],
                methods:{
                    fatherFn(){
                        this.$emit("gfsay");
                    }
                },
                // 儿子组件
                components: {
                    "son": {
                        template: "#son",
                        props: ["fname"],
                        methods: {
                            sonFn(){
                                this.$emit("fsay");
                            }
                        },
                    }
                }
            }
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
        },
        // 专门用于存储监听事件回调函数
        methods: {
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • Vue1
    第一章 Vue概述 what? Vue是实现UI层的渐进式js框架，核心库关注视图层，简单的ui构建，复杂的路由控...
    fastwe阅读 681评论 0赞 0
  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,177评论 0赞 6
  • Vue.js学习
    一、了解Vue.js 1.1.1 Vue.js是什么？ 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,307评论 0赞 3
  • vue中相关概念
    vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 1,010评论 0赞 2
  • 【必看】谁→偷走了您的睡眠?
    睡眠对于人的健康，就像呼吸和心跳一样重要，是衡量一个人整体健康的重要指标。人的一生中有大概36%的时间在睡觉，然而...
    逸馨姐阅读 413评论 0赞 2