Day_04_Vue框架入门 | 原生Ajax与Axios

繁_
76 阅读3分钟

Vue基础概念

Vue简介

1、Vue是什么?

Vue 是一款用于构建用户界面的渐进式的JavaScript框架，是一套完整的项目解决方案，用于快速构建项目

2、Vue的核心特性

数据驱动视图
组件化开发

3、Vue的适用场景

单页面应用
复杂前端界面

image.png

Vue快速入门

image.png

image.png

效果

image.png

指令

介绍
HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
常见指令

image.png

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for入门</title>
  </head>
  <body>
    <div id="app">
      <!-- {{模型数据}}用于放在标签体里面显示文本数据,:key="index"用于区别每个遍历的元素,只要设置唯一值即可 -->
      <p v-for="(item,index) in names" :key="index">{{item}}</p>
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      createApp({
        data() {
          return {
            names: ["张无忌", "张三丰", "韦一笑", "殷天正"],
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

image.png

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind入门</title>
  </head>
  <body>
    <div id="app">
      <!--V-bind绑定属性设置vue数据完整写法-->
      <a v-bind:href="url">链接1</a>
      <br /><br />
      <a :href="url">链接2</a>
      <br /><br />
      <img :src="imgUrl" width="400px" />
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      createApp({
        data() {
          return {
            url: "https://www.itcast.cn",
            imgUrl: "../img/1.jpg",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

image.png

v-else-if 必须出现在v-if之后，可以出现多个；v-else 必须出现在v-if/v-else-if之后

image.png

image.png

v-model 中绑定的变量，必须在data中定义

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-model入门</title>
  </head>
  <body>
    <div id="app">
      <!-- 
          v-model：实现数据双向绑定
          数据《=》视图
          数据更改，视图也更改
          视图更改，数据也更改 
      -->
      <input type="text" v-model="name" /> {{name}}
      <!-- 双向绑定 -->
      <br />
      <input type="text" :value="name" /> {{name}}
      <!-- 单向绑定 -->
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      createApp({
        data() {
          return {
            name: "Tom",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on入门</title>
  </head>
  <body>
    <div id="app">
      <input
        type="button"
        value="点我一下试试"
        v-on:click="console.log('试试就试试')"
      />
      <input type="button" value="再点我一下试试" v-on:click="handle" />
      <!-- v-on:简写为@ -->
      <input type="button" value="再点我一下试试2" @click="handle(1,2)" />
      <!-- 传统方式点击事件绑定的函数必须要带() -->
      <input type="button" value="再点我一下试试2" onclick="handle()" />
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      createApp({
        data() {
          return {
            name: "Vue",
          };
        },
        methods: {
          handle(a, b) {
            console.log("试试就试试~");
            // let result = a + b;
            // console.log(result);
            console.log(a + b);
          },
        },
      }).mount("#app");
    </script>
    <script>
      function handle() {
        alert("传统方式js");
      }
    </script>
  </body>
</html>

Vue实例与生命周期

介绍

image.png

image.png

image.png

Vue生命周期钩子
beforeCreate ——— 创建前
created ——— 创建后
beforeMount ——— 载入前
mounted ——— 挂载完成
beforeUpdate ——— 数据更新前
updated ——— 数据更新后
beforeUnmount ——— 组件销毁前
unmounted ——— 组件销毁后
典型应用场景
在页面加载完毕时，发起异步请求，加载数据，渲染页面 —— 调用mounted钩子函数

同步和异步

image.png

Ajax

介绍

Asynchronous JavaScript And XML，异步的Javascript与XML
XML：（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

image.png

image.png

Axios

Axios 对原生的Ajax进行了封装，简化书写，快速开发

官网

www.axios-http.cn/

使用步骤

image.png

image.png

image.png

请求方式别名

image.png

image.png

解决回调地狱问题

image.png

回调地狱
//获取省份、城市、区域列表数据
          init() {
            //1.异步获取省份列表数据
            axios.get("https://web-server.itheima.net/province").then((res) => {
              //将获取到的省份列表数据赋值给模型数据provinces
              this.provinces = res.data.data;
              //默认省份列表数据第一个省份选中
              this.province = this.provinces[0].id;

              //2.异步获取城市列表数据
              axios
                .get(`https://web-server.itheima.net/city?pid=${this.province}`)
                .then((res) => {
                  //将获取到的城市列表数据赋值给模型数据cities
                  this.cities = res.data.data;
                  //默认城市列表数据第一个城市选中
                  this.city = this.cities[0].id;

                  //3.异步获取区域列表数据
                  axios
                    .get(`https://web-server.itheima.net/area?cid=${this.city}`)
                    .then((res) => {
                      //将获取到的区域列表数据赋值给模型数据areas
                      this.areas = res.data.data;
                      //默认区域列表数据第一个区域选中
                      this.area = this.areas[0].id;
                    });
                });
            });
          },
解决方案实例
//获取省份、城市、区域列表数据
          async init() {
            //1.异步获取省份列表数据
            const provinceResult = (this.provinces = await axios.get(
              "https://web-server.itheima.net/province"
            ));
            //将获取到的省份列表数据赋值给模型数据provinces
            this.provinces = provinceResult.data.data;
            //默认省份列表数据第一个省份选中
            this.province = this.provinces[0].id;

            //2.异步获取城市列表数据
            const cityResult = await axios.get(
              `https://web-server.itheima.net/city?pid=${this.province}`
            );
            //将获取到的城市列表数据赋值给模型数据cities
            this.cities = cityResult.data.data;
            //默认城市列表数据第一个城市选中
            this.city = this.cities[0].id;

            //3.异步获取区域列表数据
            const areaResult = await axios.get(
              `https://web-server.itheima.net/area?cid=${this.city}`
            );
            //将获取到的区域列表数据赋值给模型数据areas
            this.areas = areaResult.data.data;
            //默认区域列表数据第一个区域选中
            this.area = this.areas[0].id;
          },
avatar
文章
阅读
粉丝