Vue.component('simple-counter', {
 template: '<div id="inputBox"><input type="text"></div>',
 data () {   // 數(shù)據(jù)
 return {
  counter: 0
 }
 },
 methods: {
 // 寫(xiě)點(diǎn)方法
 },
 created () {
 // 生命鉤子
 },
 computed: {
 // 計(jì)算屬性
 }
})

<template>
 <div id="inputBox">
 <input type="text">
 </div>
</template>
<!--
template就是這個(gè)組件的html，也就是下面部分（vue-loader會(huì)將template標(biāo)簽下的內(nèi)容解析出來(lái)）：
-->
<div id="inputBox">
 <input type="text">
</div>
<!--
 對(duì)應(yīng)原生寫(xiě)法的話，就是template內(nèi)的dom字符串
-->

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命鉤子
 },
 computed: {
 // 計(jì)算屬性
 }
}
// 在這里很明顯js部分就是對(duì)應(yīng)的原生寫(xiě)法內(nèi)的非template部分了。
// export default這個(gè)是es6的模塊寫(xiě)法，不懂的可以先去了解es6的模塊化

<style lang="scss" scoped>
...樣式
</style>

<template>
 <div class="button">
 <button @click="onClick">{{text}}</button>
 </div>
</template>
<script>
export default {
 props: ['text'],   // 獲取父組件的傳值
 data () {
 return {

 }
 },
 methods: {
 onClick () {
  console.log('點(diǎn)擊了子組件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

<template>
 <div class="box">
 <v-button :text="text"></v-button>    <!--使用組件并傳值（text）-->
 </div>
</template>
<script>
import Button from './button.vue'  // 引入子組件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按鍵的name'
 }
 },
 methods: {

 }
}
</script>