Vue+Ajax

Vue

一种用于构建用户界面的渐进式的 JavaScript 框架。
官方：https://cn.vuejs.org/

vue使用步骤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  
  <div id="app">      <!--定义div标签，交给vue控制 -->
    <h1>{{message}}</h1>  <!-- 用插值表达式渲染 -->
    <h1>{{count}}</h1>
  </div>
  

  <script type="module">
    import { createApp } from //引入vue模块（createApp）
'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

    createApp({ //调用函数创建Vue实例
      data() {   //定义数据
        return {
          message: 'Hello Vue',
          count: 100
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

Vue常用指令

指令:HTML标签上带有 V-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

指令	作用
`v-for`	列表渲染，遍历容器的元素或对象的属性
`v-bind`	为 HTML 标签绑定属性值，如设置 `href`、`css`样式等
`v-if / v-else-if / v-else`	条件渲染某元素，判断为 `true` 时渲染，否则不渲染
`v-show`	根据条件展示元素，区别在于切换的是 `display` 属性
`v-model`	在表单元素上创建双向数据绑定
`v-on`	为 HTML 标签绑定事件

v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法：

1	<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

参数：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = “item in items”
key：
作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法： v-bind:属性名="属性值"
简化：:属性名="属性值"
注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。
v-if & v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if：

语法：v-if=”表达式”，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后。
v-show：
语法：v-show=”表达式”，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model=”变量名”
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。
**注意：**v-model 中绑定的变量，必须在data中定义。

v-on
作用：为html标签绑定事件（添加时间监听）
语法：

v-on:事件名=”方法名”
简写为 @事件名=”…”

1 2	<input type="button" value="点我一下试试" v-on:click="handle"> <input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。
注意：
methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。

Ajax

介绍:Asynchronous JavaScript And XML，异步的JavaScript和XML。

XML:(英语:Extensible Markup Language)可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。
作用

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

同步与异步

同步请求发送过程：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
异步请求发送过程：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/
步骤：
-引入axios的js文件（参考官网）
-使用axios发送请求，并获取响应结果

Axios-请求方法别名

Axios还针对不同的请求，提供了别名方式的api
具体格式如下：
axios.请求方式(url [, data [, config]])

后面听不懂，没记了…

Britney 发布于 2025-07-23

文章访问量

Vue