标签: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>
如果我们需要给子组件添加事件,达到父子组件进行沟通的效果,应该怎么来实现呢,这就需要用到$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>
除了上面我们说到的知识点,组件还有其他的知识点,我这里就先不说了,以后用到再补充吧,上面是组件基本的使用方法。
标签:tor template vue.js 带来 补充 app 页面 娱乐 log
原文地址:https://www.cnblogs.com/jiangtengteng/p/10401497.html