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代表样式只在本页面生效。