vue网络应用

vue网络应用

1.axios

1.导入axios

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用get或post请求数据
get请求？num传参

// get请求
      document.querySelector(".get").onclick = function () {
        axios.get("https://autumnfish.cn/api/joke/list?num=6").then(
          (res) => {
            console.log(res);
          },
          (err) => {
            console.log(err);
          }
        );
      };
  

post请求通过{username：‘’}对象传参

 document.querySelector(".post").onclick = function () {
        axios
          .post("https://autumnfish.cn/api/user/reg", { username: "jack" })
          .then((res) => {
            console.log(res);
          });
      };

其中的then函数会在回调成功或失败时调用。

2.axios+vue

将axios拿到的数据渲染到页面
var that = this;将数据先保存在that中

 <div id="app">
      <input type="button" value="获取笑话" @click="getjock" />
      <p>{{jock}}</p>
    </div>

 getjock() {
            var that = this;
            axios.get("https://autumnfish.cn/api/joke").then((res) => {
              console.log(res.data);
              that.jock = res.data;
            });
          },

that.jock = res.data;修改data中的数据。