3.2 组件的构成

这一节我们来看看HelloWorld组件。
组件由三部分，html模板、javascript代码以及css规则，这三部分并非一定要存在的，有些情景不需要某些部分，也是可以的。
首先是template（模板）部分，这部分实际上是HTML。所有组件都是以template（模板）来标注的。
这段代码和HTML基本没有区别。第3行有一个{{msg}}，后面script部分会提到。
<template>
    <div class="hello">
        <h1>{{msg}}</h1>
        <p>
            Foraguideandrecipesonhowtoconfigure/customizethisproject,
            <br/>
            checkoutthe
            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-clidocumentation</a>
            .
        </p>
        <h3>InstalledCLIPlugins</h3>
        <ul>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a>
            </li>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a>
            </li>
        </ul>
        <h3>EssentialLinks</h3>
        <ul>
            <li><a href="https://vuejs.org" target="_blank" rel="noopener">CoreDocs</a>
            </li>
            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
            </li>
            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">CommunityChat</a>
            </li>
            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
            </li>
            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
            </li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
            </li>
            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
            </li>
            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
            </li>
            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
            </li>
            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
            </li>
        </ul>
    </div>
</template>
接下来是script部分：
<script>
export default{
    name:'HelloWorld',
    props:{
        msg:String
    }
}
</script>
script部分没有data部分，但是有props。两者的异同是什么呢？
首先，data和props里面的变量都可以在template（模板）部分用双大括号引用，例如{{msg}}
然后，data是页面内部的数据，页面在运行的时候随时可以更改里面的值；props是外部给的值，它的值只能读取不能改动。props的值在使用组件的时候给定，如HelloWorld的使用：
就要给出msg的值，也就是说msg的值，是在使用HelloWorld组件的那个页面指定的。
最后是style部分：
<style scoped> 
h3 {
      margin: 40px 0 0;
}
ul {
      list-style-type: none;
      padding: 0;
}
li {
      display: inline-block;
      margin: 0 10px;
}
a {
      color: #42b983;
}
</style>    
这部分没有特别，就是样式，其中scoped代表样式只在本页面生效。

练习题

  • 在文件夹components下创建组件Footer.vue，然后在Login和Home页面中使用
    1.style部分 [阅读] 
    <style scoped> div.footer{    clear:both;    position:relative;    padding:50px 0 30px 0;    width:100%;    margin-bottom:0;    background:#000;    z-index:10;    bottom:0;}div.footer p{    margin-bottom:0em;    text-align:center;    line-height:normal;    font-size:0.8em;    color:#BABABA;}div.footer a{    padding:0 20px;    text-decoration:none;    color:#DDDDDD;}div.footer a:hover{    color:#FFFFFF;}div.footer.legal a{    padding:0;}</style> 
    2.template部分 [阅读] 
    <template>    <div class="footer hidden-xs">        <p class="legal">            <a href="/#/about">xxxx网络科技有限公司</a>            ©2016-{{year}}版权所有.            <a href="http://beian.miit.gov.cn">粤ICP备09084978号-2</a>            <br/>            •Designby            <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a>            •Iconsby            <a href="http://famfamfam.com/">FAMFAMFAM</a>            <br/>            <br/>        </p>    </div></template>
    3.script部分 [阅读] 
    export default{    name:'Footer',data(){        return{            year:new Date().getFullYear(),}    }}
    4.在Login和Home页面引用Footer组件，位置都在页面下方 [编程(无自动批改)]
    现在Login就有两个组件，一个是HelloWorld，一个是Footer