Vue

什么是Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（http://cn.vuejs.org/）
- 构建用户界面
- 渐进式
- 框架：就是一套完整的项目解决方案，用于快速构建项目
  - 优点：大大提升前端项目的开发效率
  - 缺点：需要理解记忆框架的使用规则

1.Vue快速入门

准备
- 引入Vue模块
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素（div），被Vue控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue快速入门</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h1>{{count}}</h1>
</div>

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

2.Vue常用指令

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

案例：

v-for

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

语法：

<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 指令。

<body>
<!-- 头部区域 -->
<div id = "container">
  <div class="header">
    <h1>Tlias智能学习辅助系统</h1>
    <a href="#" class="logout">退出登录</a>
  </div>

  <!-- 搜索区域 -->
  <div class="search-area">
    <label>姓名：</label>
    <input type="text" placeholder="请输入姓名">
    <label>性别：</label>
    <select>
      <option value="">请选择</option>
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
    <label>职位：</label>
    <select>
      <option value="">请选择</option>
      <option value="1">职位1</option>
      <option value="2">职位2</option>
    </select>
    <button>查询</button>
    <button>清空</button>
  </div>

  <!-- 表格区域 -->
  <div class="table-area">
    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>头像</th>
        <th>职位</th>
        <th>入职日期</th>
        <th>最后操作时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for = "(e,index) in empList" :key="e.id">
        <td>{{index + 1}}</td>
        <td>{{e.name}}</td>
        <td>{{e.gender == 1 ? '男' : '女'}}</td>
<!--        插值表达式是不能出现在标签内部的-->
        <td><img class="avatar" src="{{e.image}}" alt="e.name"></td>
        <td>{{e.job}}</td>
        <td>{{e.entrydate}}</td>
        <td>{{e.updatetime}}</td>
        <td class="action-buttons">
          <button type="button">编辑</button>
          <button type="button">删除</button>
        </td>

      </tr>
      </tbody>
    </table>
  </div>

  <!--初始化Vue实例-->
  <script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
      data(){
        return{
          empList:[
            {
              "id": 1,
              "name": "谢逊",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2023-06-09",
              "updatetime": "2024-09-30T14:59:38"
            },
            {
              "id": 2,
              "name": "韦一笑",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2020-05-09",
              "updatetime": "2024-09-01T00:00:00"
            },
            {
              "id": 3,
              "name": "黛绮丝",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 2,
              "job": "2",
              "entrydate": "2021-06-01",
              "updatetime": "2024-09-01T00:00:00"

            }
          ]
        }
      }
    }).mount('#container')
  </script>

效果：

v-bind

作用：动态为HTML标签绑定属性值，如设置herf，src，style样式等。
语法：v-bind：属性名 = “属性值”
```
<img v-bind:src="item.image" width="30px">
```
简化：：属性名=“属性值”
```
<img :src="item.image" width="30px">
```

注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据，必须在data中定义、

在上面我们提到插值表达式是不能出现在标签内部的

这时候就可以使用v-bind指令了上图我们知道图片无法显示，因为插值表达式用在了标签内部，将上面的代码稍加修改，改为：

<tr v-for = "(e,index) in empList" :key="e.id">
        <td>{{index + 1}}</td>
        <td>{{e.name}}</td>
        <td>{{e.gender == 1 ? '男' : '女'}}</td>
        <td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>
        <td>{{e.job}}</td>
        <td>{{e.entrydate}}</td>
        <td>{{e.updatetime}}</td>
        <td class="action-buttons">
          <button type="button">编辑</button>
          <button type="button">删除</button>
        </td>
      </tr>

效果：

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
- 语法：v-if=“表达式”，表达式值为true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，适用于不频繁切换的场景
- 其他：可以配合v-else-if / v-else 进行链式调用条件判断
```
<span v-if="gender == 1">男生</span>
<span v-else-if="gender == 2">女生</span>
<span v-else>未知</span>
```
v-show
- 语法：v-show=“表达式”，表达式值为 true，显示；false，隐藏
- 原理：==基于CSS样式display来控制显示与隐藏
- 场景：适用于频繁切换显示隐藏的场景

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

展示职位：

<!--        v-if:控制元素的显示与隐藏-->
        <td>
          <span v-if="e.job == 1">班主任</span>
          <span v-else-if="e.job == 2">讲师</span>
          <span v-else-if="e.job == 3">学工主管</span>
          <span v-else-if="e.job == 4">教研主管</span>
          <span v-else-if="e.job == 5">咨询师</span>
          <span v-else>其他</span>
        </td>

<td>
          <span v-show="e.job == 1">班主任</span>
          <span v-show="e.job == 2">讲师</span>
          <span v-show="e.job == 3">学工主管</span>
          <span v-show="e.job == 4">教研主管</span>
          <span v-show="e.job == 5">咨询师</span>
        </td>

可以观察到v-show通过将display属性置为none来管理是否显示该属性

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-momel=“变量名”

注意：v-model中绑定的变量，必须在data中定义。

首先在Vue实例中更新：

<script type="module">
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
      data(){
        return{
          empList:[
            {
              "id": 1,
              "name": "谢逊",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2023-06-09",
              "updatetime": "2024-09-30T14:59:38"
            },
            {
              "id": 2,
              "name": "韦一笑",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 1,
              "job": "1",
              "entrydate": "2020-05-09",
              "updatetime": "2024-09-01T00:00:00"
            },
            {
              "id": 3,
              "name": "黛绮丝",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 2,
              "job": "2",
              "entrydate": "2021-06-01",
              "updatetime": "2024-09-01T00:00:00"

            }
          ],
          searchForm:{ //封装用户输入的查询条件
            name:'',
            gender:'',
            job:''
          }
        }
      }
    }).mount('#container')
  </script>

可见我们添加了一个searchForm 用来封装用户输入的查询条件这个与上面的empList平级

然后我们用v-model来绑定数据

将封装的姓名性别职位从上面的搜索区域用v-model进行封装

我们可以

显示一下searchForm里面的内容

可以看到我们从视图中输入数据时，数据模型中的数据

发生变化；当我们从数据模型中输入数据时，视图中的数据也会发生变化。这就是v-model将数据进行了双向数据绑定！

v-on

作用：为html标签绑定事件（添加事件监听）
语法：
- v-on：事件名=“方法名”
- 简写为 @事件名=“...”
```
<div id="app">
    <button type="button" v-on:click="handle">
        点我
    </button>
    <button type="button" @click="handle">
        再点我
    </button>
</div>
```
注意：methods 与 data平级

在相应按钮上添加v-on指令，指定哪个按钮，方法名为search
```
<button v-on:click = "search">查询</button>
```
编写对应方法：

可以看到，我们输入相应信息，点击查询后，右下角的控制台中出现了对应信息。

同样，将清空按钮添加指令：
```
<button @click = "clear">清空</button>
```

点击清空后，可将数据置为空

注意：methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。

3.Ajax

什么是Ajax？

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

作用：

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

右侧显示邮箱不可注册，这便是异步交互，网页并没有重新加载，而是更新部分。

同步和异步

Axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-Axios</title>
</head>
<body>


  <input type="button" value="获取数据GET" id="btnGet">
  <input type="button" value="操作数据POST" id="btnPost">

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    //发送GET请求
    document.querySelector('#btnGet').addEventListener('click',() => {
        //axios发起异步请求
        axios({
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
            method:'GET'
        }).then((result) => { //成功回调函数
            console.log(result.data);
        }).catch((err) => { //失败回调函数
            console.log(err);
        })
    })

    //发送POST请求
    document.querySelector('#btnPost').addEventListener('click', () =>{
        //axios发起异步请求
        axios({
            url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
            method:'POST',
            data:'id = 1' //POST请求方式，请求体
        }).then((result) => { //成功回调函数
            console.log(result.data);
        }).catch((err) => { //失败回调函数
            console.log(err);
        })
    })

  </script>


</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    //发送GET请求
    document.querySelector('#btnGet').addEventListener('click',() => {
        axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
            console.log(result.data);
        })

    })

    //发送POST请求
    document.querySelector('#btnPost').addEventListener('click', () =>{
        axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
            console.log(result.data);
        })
    })

  </script>

问题：

先输出2，后输出1 异步操作不会等待服务器响应

posted on 2025-11-07 20:19 齐天大圣951 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部