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>