Vue.js起步

在我们的第一章有提到过我的第一个示例，

1. <div id="app">
2. {{ message }}
3. </div>

1. var app = new Vue({
2. el: '#app',
3. data: {
4. message: 'Hello Vue!'
5. }
6. })

输出结果：Hello Vue!

我们这章节主要讲如何在npm初始化的项目中创建一个模块。

创建一个模块MyTemplate.vue

代码：

MyTemplate.vue

1. <template>
2. <div>
3. 名称：{{userName}}<br>
4. 地址：{{address}}
5. </div>
6. </template>
7. <script>
8. export default {
9. name: 'MyTemplate',
10. data () {
11. return {
12. userName: '云 Vue.js 教程',
13. address: 'www.dandelioncloud.cn'
14. }
15. }
16. }
17. </script>

修改App.vue代码

1. <template>
2. <div id="app">
3. <MyTemplate/>
4. </div>
5. </template>
7. <script>
8. import MyTemplate from './components/MyTemplate'
10. export default {
11. name: 'App',
12. components: {
13. MyTemplate
14. }
15. }
16. </script>
18. <style>
19. #app {
20. font-family: 'Avenir', Helvetica, Arial, sans-serif;
21. -webkit-font-smoothing: antialiased;
22. -moz-osx-font-smoothing: grayscale;
23. text-align: center;
24. color: #2c3e50;
25. margin-top: 60px;
26. }
27. </style>

查看效果图：