vlambda博客
学习文章列表

上一篇，我们讲了 Vue 的文件以及组件架构，并动手插入了两个小组件，实现了一个简单的阉割版的前端界面。

这一篇本来说要实现和接口的一个狠狠交互，但是今天因为要和小医生出去玩，只能趁她还没起床花个半小时浅浅写一下了，下篇再狠狠，祝大家五一快乐！

基础命令

需要知道的两个操作，一个是对文本和对象值的动态修改，另一个是对 DOM 事件的监听，这是使用 Vue 进行开发时最最常见的两个操作

绑定 text attribute 使用 v-bind 命令，绑定 DOM 事件使用 v-on 监听

v- 前缀是视觉提示，用来识别模板中 Vue 特定的 attribute。但当我们使用 Vue 来构建整个项目时，这个用于区分的前缀也没什么必要了，因此 Vue 为 v-bind 和 v-on 提供了特定简写，如下

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:事件名称="发生时候做什么">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

实现事件绑定

看了基础命令之后，我们尝试搞一个 alert("Click~") 试一下

先给咱们的搜索按钮绑定一个事件，指定事件为 handleClick

<el-button icon="el-icon-search" @click="handleClick" circle></el-button>

先在 Vue 的实例中，加入 handleClick 这个函数对应「发生时候做什么事情」

export default {
    name: 'GoSearch',
    data() {
      return {
        input: ''
      }
    },
    methods:{
      handleClick: function(){
          alert("Click~");
      }
    }
}

解释一下为什么这么写：Vue 里约定俗成 「data」 就是用来放资料的，我们可以使用 Vue 里的 「methods」 的选项，它专门来存放方法

实现结果如下：

alert 成功

配置 axios 相关

实现了事件点击之后，我们希望是发送一个请求

精挑细选之后发现，目前最好上手且功能最强的就是 axios —— 可以发送 http 请求，而且 API 和 requests 很像，今天使用它来和 Vue 结合发送异步请求。

先安装 axios，vue-axios，在 package.json 添加这两个，添加完之后执行 npm install

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "element-ui": "^2.15.6",
    "axios": "^0.21.1",
    "vue-axios": "^3.2.1"
},

接着是在 main.js 声明后，使用 Vue.use 方法全局注册这个库的方法，这里把 axios 的基础 URL 设为爬虫常用的看 headers 的站点，方便调试

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
axios.defaults.baseURL = 'https://httpbin.org'

我们再修改一下 Search.vue 文件，使其输出我们返回值的内容

import axios from 'axios'

export default {
    name: 'GoSearch',
    data() {
      return {
        input: ''
      }
    },
    methods:{
      handleClick: function(){
          axios.get('/get')
            .then(function (response) {
              console.log(response.data);
              console.log(response.status);
              console.log(response.statusText);
              console.log(response.headers);
              console.log(response.config);
            })
            .catch(function (error) {
              console.log(error);
              alert(error)
            });
      }
    }
}

结果如下图所示，很完美，控制台输出啦！

axios 发送网络请求成功

总结

总结一下这半个小时哈，其实就是学一下 Vue 中绑定时间的语法为 @click="method"，其中这个 method 被定义在这个文件 export 出去的 vue 对象的 methods 里，发送 http 请求也是动作，自然也可以写在这里 —— 引入 axios 库，然后使用其中的方法即可。

明天再和请求后端 API 结合，小医生要起床了，我要去玩了，祝大家五一快乐！