码迷,mamicode.com
首页 > 其他好文 > 详细

vue 组件

时间:2019-02-26 16:50:15      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:tor   template   vue.js   带来   补充   app   页面   娱乐   log   

  什么是组件:组件是可复用的vue实例,它的特点是独立、可复用且整体化。

  为什么要组件化:为了实现功能模块的复用,高执行率,便于开发单页面复杂应用。

  组件化带来的问题:组件状态管理(vuex);

           多组件的混合使用,多页面,复杂逻辑(vue-router);

           组件间的传参、消息、事件处理(props,emit/on,bus)。

  下面,我们来看看怎么创建组件以及使用组件,先注册组件:Vue.component(‘componentName‘,{data:...,template:...}),componentName是你的组件名称,data是组件的数据,切记data必须是一个函数,如果data只是一个对象,那我们在复用组件到的时候,组件和组件之间的数据是会受到彼此的影响的,template则是我们要建立的DOM模板内容。然后我们需要在哪里使用到这个组件,就把组件名当标签使用在html里就可以来,我们来看一个小栗子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
    <div class="myApp">
        <button-groups></button-groups>
        <button-groups></button-groups>
        <button-groups></button-groups>
    </div>
    <script>
    Vue.component(button-groups, {
        data: function() {
            return {
                count: 0
            }
        },
        template: "<div><button @click=‘count++‘>点击了{{count}}次</button></div>"
    });
    new Vue({
        el: .myApp
    });
    </script>
</body>

</html>

  前文提到的vuex,后面的文章会单独将,它一种响应式的状态管理,很重要,需要单独来说。现在,我们看一下组件之间的通信,vue通过prop向子组件传递数据。看下下面的例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件 props</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
    .myApp p {
        display: inline-block;
        width: 150px;
    }
    </style>
</head>

<body>
    <div class="myApp">
        <msg-info v-bind:msg=‘msg‘></msg-info>
    </div>
    <script>
    Vue.component(msg-info, {
        props: [msg],
        template: "<div><p>{{msg}}</p></div>"
    });
    new Vue({
        el: .myApp,
        data: {
            msg: hello world!
        }
    });
    </script>
</body>

</html>

  上面的例子中,使用props给子组件传递了一条动态的数据。那么,如果有多条数据怎么办呢?比如一篇文章,有作者有标题,有发布时间有正文的,而且我们会请求很多条文章的时候怎么渲染展示呢,看看下面的例子:

技术图片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
    .blog-groups{
        background: #ffffcc;
        padding: 20px 50px;
        margin-bottom: 10px;
    }
    h1{
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .time{
        text-align: right;
    }
    .time p {
        font-size: 14px;
        display: inline-block;
        margin-right: 10px;
    }
    .content p{
        text-indent: 30px;
    }
    </style>
</head>

<body>
    <div class="myApp">
        <blog-groups v-for="items in blogs" v-bind:items=‘items‘></blog-groups>
    </div>
    <script>
    Vue.component(blog-groups, {
        props: [items],
        template: "<div class=‘blog-groups‘><h1>{{items.title}}</h1><div class=‘time‘><p>作者:{{items.autor}}</p><p>发布时间:{{items.times}}</p></div><div class=‘content‘><p>{{items.content}}</p></div></div>"
    });
    new Vue({
        el: .myApp,
        data: {
            blogs: [{
                title: 射手座的我,
                autor: jhon,
                times: 2019-02-15,
                content: 天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧,颇富直觉、拥有鼓舞他人的力量,思想开明、适应力强,有很好的判断力,有处理紧急事务的才能,擅长哲学思考,富崇高的正义感,非常敏感而聪慧,喜爱自由、诚恳、正直、可靠、慎重。
            }, {
                title: 狮子座的你,
                autor: lily,
                times: 2019-02-18,
                content: 人生如“秀”生活的每个角落都是舞台人生如秀,既然要秀,就要秀得漂亮,秀得痛快,秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台,他看起来好像非常爱“现”,殊不知他只是活得太认真太讲究罢了。凡有人在之处,他便无法完全松弛,藉助于表演性质的沟通方式,使他可以知悉在场的人是否相处得来,这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”,那便是他把你当自己人看,他喜欢娱乐朋友。当然啦,最重要的是,他真的很能“现”,可以从中获得人生至乐。在他秀过之后,记得给他掌声或献上玫瑰花,他会表现得很不在乎这些,他心中真正暗喜的是:“很好,没有人在我表演结束之前离席!”
            }, {
                title: 水瓶座的他,
                autor: zaya,
                times: 2019-02-19,
                content: 水瓶座人无法让别人一厢情愿地爱着他,他更不可能一厢情愿地缠着别人。当他吸引你时,你最好不要太快表现出你对他的好感或好奇,更千万保留你对他的赞美之词,因为万一你并不吸引他,他会觉得你对他的评价不值采信。
            }]
        }
    });
    </script>
</body>

</html>
View Code

  如果我们需要给子组件添加事件,达到父子组件进行沟通的效果,应该怎么来实现呢,这就需要用到$emit 方法,这个方法第一个传入一个事件名称,这个事件名称,我们能在父组件获取并控制,后面还何以传入其他参数,具体使用方法,可以看下官方文档哈,我这里没用就不说了。下面说个例子,我们在看小说的时候,有时候会用到放大字体或者缩小字体的功能,这里我们就通过给子组件添加两个按钮来实现一下这个功能:

技术图片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
    .blog-groups{
        background: #ffffcc;
        padding: 20px 50px;
        margin-bottom: 10px;
    }
    h1{
        text-align: center;
        font-weight: bold;
    }
    .time{
        text-align: right;
    }
    .time p {
        display: inline-block;
        margin-right: 10px;
    }
    .time span{
        display: inline-block;
        background: pink;
        border-radius: 5px;
        padding: 2px 5px;
        margin: 0 5px;
        cursor: pointer;
    }
    .content p{
        text-indent: 30px;
    }
    </style>
</head>

<body>
    <div class="myApp" :style="{ fontSize: postFontSize + ‘px‘ }">
        <blog-groups v-for="items in blogs" v-bind:items=‘items‘ v-on:enlarge-text="postFontSize += 1" v-on:reduce-text="postFontSize -= 1"></blog-groups>
    </div>
    <script>
    Vue.component(blog-groups, {
        methods:{
            bigFontSize(){
                this.$emit(enlarge-text);
            },
            reduceFontSize(){
                this.$emit(reduce-text);
            },
        },
        props: [items],
        template: "<div class=‘blog-groups‘><h1>{{items.title}}</h1><div class=‘time‘><p>作者:{{items.autor}}</p><p>发布时间:{{items.times}}<span v-on:click=‘bigFontSize‘>放大字体</span><span v-on:click=‘reduceFontSize‘>缩小字体</span></p></div><div class=‘content‘><p>{{items.content}}</p></div></div>"
    });
    new Vue({
        el: .myApp,
        data: {
            blogs: [{
                title: 射手座的我,
                autor: jhon,
                times: 2019-02-15,
                content: 天生乐观、对人生充满理想、正直坦率、丰富的幽默感、酷爱和平、待人友善、行动力强、有自己的处世哲学、经得起打击、救世救人的热情、乐观、活泼、坦率、自尊心强、多才多艺、有很高的智慧,颇富直觉、拥有鼓舞他人的力量,思想开明、适应力强,有很好的判断力,有处理紧急事务的才能,擅长哲学思考,富崇高的正义感,非常敏感而聪慧,喜爱自由、诚恳、正直、可靠、慎重。
            }, {
                title: 狮子座的你,
                autor: lily,
                times: 2019-02-18,
                content: 人生如“秀”生活的每个角落都是舞台人生如秀,既然要秀,就要秀得漂亮,秀得痛快,秀得令人难忘。狮座人把生活的每角落都当成自己表演的舞台,他看起来好像非常爱“现”,殊不知他只是活得太认真太讲究罢了。凡有人在之处,他便无法完全松弛,藉助于表演性质的沟通方式,使他可以知悉在场的人是否相处得来,这头狮子才会慢慢从警醒状态解放出来。接下来如果他还继续在“现”,那便是他把你当自己人看,他喜欢娱乐朋友。当然啦,最重要的是,他真的很能“现”,可以从中获得人生至乐。在他秀过之后,记得给他掌声或献上玫瑰花,他会表现得很不在乎这些,他心中真正暗喜的是:“很好,没有人在我表演结束之前离席!”
            }, {
                title: 水瓶座的他,
                autor: zaya,
                times: 2019-02-19,
                content: 水瓶座人无法让别人一厢情愿地爱着他,他更不可能一厢情愿地缠着别人。当他吸引你时,你最好不要太快表现出你对他的好感或好奇,更千万保留你对他的赞美之词,因为万一你并不吸引他,他会觉得你对他的评价不值采信。
            }],
            postFontSize: 14
        }
    });
    </script>
</body>

</html>
View Code

  除了上面我们说到的知识点,组件还有其他的知识点,我这里就先不说了,以后用到再补充吧,上面是组件基本的使用方法。

 

vue 组件

标签:tor   template   vue.js   带来   补充   app   页面   娱乐   log   

原文地址:https://www.cnblogs.com/jiangtengteng/p/10401497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!