Vue.js起步-向日葵屋

# Vue.js起步

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

```html
<div id="app">
  {{ message }}
</div>
```

```javascript
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```

输出结果：Hello Vue!

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

创建一个模块MyTemplate.vue

![](/images/1593179264659.png)

代码：

MyTemplate.vue

```html
<template>
    <div>
        名称：{{userName}}<br>
        地址：{{address}}
    </div>
</template>
<script>
export default {
  name: 'MyTemplate',
  data () {
    return {
      userName: '蒲公英云 Vue.js 教程',
      address: 'www.dandelioncloud.cn'
    }
  }
}
</script>
```

修改App.vue代码

```html
<template>
  <div id="app">
    <MyTemplate/>
  </div>
</template>

export default {
  name: 'App',
  components: {
    MyTemplate
  }
}
</script>

```

查看效果图：

![](/images/1593179250273.png)

总结：所有的参数都可以以`{{参数}}`方式动态展示。