vuejs的單文件組件.vue文件與前後端交互

vuejs的單文件組件.vue文件與前後端交互

• vuejs自定義的.vue文件實現了對一個單獨的組件的封裝；
• .vue文件包含三部分html、js、css，分別放在template、script、style標籤中，模板定義了在頁面中顯示的內容、script中定義了組件中需要的數據和操作、style中定義了組件的樣式，scoped表明只適用於該組件，講明作用域；
• 瀏覽器不識別.vue文件，需要在vue.config.js中配置使用vue-loader去解析；

我們將重點放在script標籤中的內容：

• 不使用.vue 單文件時，用Vue創建實例啓動vue服務
• 使用.vue單文件時，直接在export defalut中定義對象

script 標籤中export defalut後面的對象實際上就是html中new vue()裏面塞的內容：
網上有好多教程的代碼|包括官網的代碼沒有給予我們的項目中的.vue單文件組件的方式，需要自己去多寫一寫。

<template>
  <div id="test">
    <label>
      <input v-model="msg" type="text" placeholder="請輸入文本" @keypress.enter="enterFun" @mouseover="overFun" @mouseleave="leaveFun" @mousedown="downFun" @drag="console.log('拖拽')">
    </label>
    <p>{{ upperFun }}</p>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
    <button style="background-color: #808074" @click="reverseMsg">讓大局逆轉吧</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '初始文本',
      todos: [
        { text: '學習 JavaScript' },
        { text: '學習 Vue' },
        { text: '整個牛項目' }
      ],
      groceryList: [
        { id: 0, text: 'qq' },
        { id: 1, text: 'qqqq' },
        { id: 2, text: 'qqqqqq' }
      ]
    }
  },
  computed: {
    upperFun() {
      return this.msg.toUpperCase()
    }
  },
  methods: { // 方法
    enterFun() {
      alert(this.msg)
    },
    overFun() {
      this.msg = '老了老弟~'
    },
    leaveFun() {
      if (this.msg === '') {
        this.msg = '你怎麼不輸？'
      } else {
        console.log('do nothing')
      }
    },
    downFun() {
      this.msg = ''
    },
    reverseMsg: function() {
      this.msg = this.msg.split('').reverse().join('')
    }
  }
}
</script>

<style scoped>
  input {
    width: 200px;
    height: 20px;
  }
  p {
    color: green;
    font-size: x-large;
  }
</style>

<template>
  <div id="app">
    <p v-if="show">{{ msg }}</p>
    <button @click="closeOpen">{{ btn_msg }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      msg: '歡迎下載',
      btn_msg: '點擊隱藏',
    }
  },
  computed: {
    upperFun() {
      return this.msg.toUpperCase()
    }
  },
  methods: { // 方法
    enterFun() {
      alert(this.msg)
    },
    closeOpen() {
      if (this.show === true) {
        this.show = false
        this.btn_msg = '點擊顯示'
      } else {
        this.show = true
        this.btn_msg = '點擊隱藏'
      }
    }
  }
}
</script>

<style scoped>
  input {
    width: 200px;
    height: 20px;
  }
  p {
    color: green;
    font-size: x-large;
  }
</style>

ajax請求 url

<template>
  <div id="app">
    <div v-if="loading">請求...</div>
    <input type="button" value="get請求" @click="getdata()">
    <div v-if="errored">
      <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
    </div>
    <div v-for="currency in info" v-else class="currency">
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol" />{{ currency.rate_float | currencydecimal }}
      </span>
    </div>
  </div>
</template>

<script>

export default {
  filters: {
    currencydecimal(value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  methods: {
    getdata() {
      this.$axios
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
          (this.info = response.data.bpi)
          console.log('請求成功')
          this.loading = false
        })
        .catch(error => { // 請求錯誤處理
          console.log(error)
          this.errored = true
        })
        .finally(loading => {
          console.log(loading)
          this.loading = false
        })
    }
  }
}
</script>