自定义vue入门项目流程

VUE

先把自定义的vue需要导入首页显示的vue中

导入axios，再用axios发送异步请求去获取网页数据

import axios from "axios";

axios

  .get("http://localhost:8080/article/getAll")

  .then((result) => {

    articleList.value = result.data;

  })

  .catch((err) => {

    console.log(err);

  });

const searchConditions = ref({

  category: "",

  state: "",

})；

再定义响应式函数ref

import { ref } from "vue";

并命名articleList接收响应式数据: const articleList = ref([]);

用v-for渲染数据

article是遍历出来的元素，index是索引，articleList是获取的数据，插值表达式的后缀是idea里定义的属性。

再用ref函数定义响应式数据searchConditions

用v-model双向绑定响应式数据

定义search函数：

然后用v-on绑定按钮

最后启动项目

这边是idea那边的部分代码

tips：

vue安装axios：

npm install axios

npm run dev：启动vue