Vue学习笔记 - 技术栈

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

html 复制代码

      <tbody>
        <tr v-for="(emp, index) in empList" :key="index">
          <td>{{ emp.name }}</td>
          <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
          <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td>
          <td>
            <span v-if="emp.job === '1'">班主任</span>
            <span v-else-if="emp.job === '2'">讲师</span>
            <span v-else-if="emp.job === '3'">学工主管</span>
            <span v-else-if="emp.job === '4'">教研主管</span>
            <span v-else-if="emp.job === '5'">咨询师</span>
          </td>
          <td>{{ emp.entrydate }}</td>
          <td>{{ emp.updatetime }}</td>
          <td class="btn-group">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
          </td>
        </tr>
      </tbody>

定义在data中的数据

html 复制代码

    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            searchEmp: {
              name: '',
              gender: '',
              job: ''
            },
            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-07-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": "2023-07-01T00:00:00"
              },
              {
                "id": 3,
                "name": "黛绮丝",
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
                "gender": 2,
                "job": "2",
                "entrydate": "2021-06-01",
                "updatetime": "2023-07-01T00:00:00"
              }
            ]
          }
        }
</script>

v-bind

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

错例，不能使用插值表达式

v-if & v-show

v-if例子

css 复制代码

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

v-show例子（都会渲染）

v-model & v-on

v-model

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

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

html 复制代码

   <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
      <select name="gender" v-model="searchEmp.gender">
          <option value="">性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
      </select>
      <select name="job" v-model="searchEmp.job">
          <option value="">职位</option>
          <option value="1">班主任</option>
          <option value="2">讲师</option>
          <option value="3">学工主管</option>
          <option value="4">教研主管</option>
          <option value="5">咨询师</option>
      </select>
      <button type="submit">查询</button>
      <button type="reset" class="clear">清空</button>
    </form>

v-on

作用：为html标签绑定事件（添加时间监听）

语法：

v-on:事件名="方法名"
简写为 @事件名="..."
<input type="button" value="点我一下试试" v-on:click="handle">
<input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。

css 复制代码

        methods: {
          search() {
            console.log(this.searchEmp)
            
          },
          clear() {
            this.searchEmp = {
              name: '',
              gender: '',
              job: ''
            }
          }
        }

methods:{}要与data平齐

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