Vue CLI

This is Vue Command Line Interface

Vue Loader

將每一個components放置在.vue的檔案裡。
檔案裡面包含所需要的template(HTML)components設定(Javascript)還有CSS

App.vue

頁面的view model，一個頁面，只需要一個view model!!!，剩下的都是component組在view model上。

基本的結構長這樣

< template>< /template>
< script>< /script>
< style lang="scss">< /style>

放在< template>裡面

< div id="app">
  < headbox v-on:queryItem="updateItem"
           v-on:queryList="initialList">< /headbox>
  < contentbox v-bind:content="contentboxData" v-bind:contentList="contentboxDataList">< /contentbox>
  < footerbox>< /footerbox>
< /div>

在此可以看見components的自定義HTML

< 自定義tagName>< /自定義tagName>

有設定自定義事件(v-on:自定義事件)，將components的資料傳向App.vue

< 自定義tagName v-on:自定義事件="App.vue的Methods">< /自定義tagName>

有設定資料單向綁定(v-bind:props)，將App.vue的資料傳到components

< 自定義tagName v-bind:props="App.vue的data">< /自定義tagName>

若沒有設定v-bind，直接寫props="App.vue的data"的話，Vue不會這樣認定
它會當作是開發者給元件的屬性設定常數htmlAttr="const string"

放在< style>裡面

在此就不特別貼程式碼

放在< script>裡面

import headbox from "./headbox.vue"
import contentbox from "./content.vue"
import footerbox from "./footerbox.vue"

export default {
  name: 'app',
  components: { headbox, contentbox, footerbox },
  data () {
    return {
      contentboxData: '',
      contentboxDataList: [],
    }
  },
  methods: {
      updateItem: function (item) {
          this.contentboxData = item
          this.contentboxDataList = []
      },
      initialList: function (list = [])  {
          this.contentboxDataList = list
      }
  }
}

在Vue loader裡的「引入」要使用import-from，進來的東西直接就是components.vue定義的export default

在components裡，直接寫入要加進來的物件(名稱用import後的自訂名稱)