当前位置：首页 > news >正文

web第六次

news 来源：原创 2025/4/25 21:18:59

获取数据，进行forEach改造

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/3815/element-ui.css">
  <title>表格数据转换</title>
  <style>
    .container {width: 800px;margin: 0 auto;}
  </style>
</head>
<body>
  <div id="app">
    <el-card class="container">
      <h2>会员列表</h2>
      <el-table
        :data="tableData"
        stripe
        name="userTable"
        style="width: 700px">
        <el-table-column
          prop="username"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="datetime"
          label="注册时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="vip"
          label="会员">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <script src="https://labfile.oss.aliyuncs.com/courses/3815/vue.js"></script>
  <script src="https://labfile.oss.aliyuncs.com/courses/3815/element-ui.js"></script>
  <script src="https://labfile.oss.aliyuncs.com/courses/9203/axios.min.js"></script>
  <!-- 检测需要，请勿删除 -->
  <script>
    
    new Vue({
      el: '#app',
      data: function() {
        return {
          tableData: [],
        }
      },created() {
        axios.get('fetchTableData.json').then(res => {
          let data = res.data.data;
          data.forEach(item => {
            item.sex === 0 ? item.sex = '女' : item.sex = '男';
            item.vip === 0 ? item.vip = '否' : item.vip = '是';
            item.datetime = `${item.datetime.slice(0, 4)}-${item.datetime.slice(4, 6)}-${item.datetime.slice(6, 8)}`;
          });
          console.log(this);
          this.tableData = data;
        })
      },
      mounted() {
      },
      methods: {

      }
    })
</script>
</body>
</html>

1. `created` 钩子函数

含义

created 钩子函数会在 Vue 实例完成数据观测（将 data 选项中的数据转换为响应式数据）、property 和 method 的计算、watch/event 事件回调的配置之后被调用。但此时 Vue 实例还未进行 DOM 挂载，也就是说页面上还看不到 Vue 实例所控制的元素。

执行时机

在 Vue 实例的生命周期中，created 处于较早的阶段。其执行顺序大致如下：

初始化实例。
处理 data 选项，将数据转换为响应式数据。
计算 property 和 method。
配置 watch/event 事件回调。
触发 created 钩子函数。

使用场景

数据请求：由于在 created 阶段已经可以访问 data 和 methods，且还未进行 DOM 挂载，不会因数据请求的延迟而影响页面渲染，所以常在此阶段进行异步数据请求，例如从后端 API 获取数据并填充到组件中。
初始化操作：可以在 created 中进行一些初始化设置，像初始化定时器、绑定事件监听器等。

代码示例

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue created Hook Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            created() {
                console.log('created 钩子被调用');
                console.log('message 的值是:', this.message);
                // 模拟数据请求
                setTimeout(() => {
                    this.message = 'Data fetched successfully';
                }, 1000);
            }
        });
    </script>
</body>

</html>

2. `mounted` 钩子函数

含义

mounted 钩子函数会在 Vue 实例完成 el（挂载点）的 DOM 挂载之后立即被调用。这意味着在 mounted 钩子执行时，Vue 实例已经将其模板渲染为真实的 DOM 元素，并且这些元素已经插入到页面中，此时可以安全地访问和操作这些 DOM 元素。

执行时机

mounted 的执行顺序在 created 之后，大致如下：

触发 created 钩子函数。
模板编译，将 Vue 模板转换为渲染函数。
虚拟 DOM 生成，根据渲染函数生成虚拟 DOM 树。
真实 DOM 挂载，将虚拟 DOM 转换为真实 DOM 并插入到页面的挂载点（el）。
触发 mounted 钩子函数。

使用场景

DOM 操作：当需要对渲染后的 DOM 元素进行操作时，比如获取元素的尺寸、添加动画效果、绑定第三方插件等，可在 mounted 中进行。因为只有在 mounted 之后，DOM 元素才真正存在于页面中。
第三方库初始化：许多第三方库需要在 DOM 元素存在的情况下进行初始化，例如地图库（如 Leaflet、百度地图等）、图表库（如 Echarts、Chart.js 等），可以在 mounted 钩子中调用这些库的初始化方法。

代码示例

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue mounted Hook Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        #app {
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <p ref="myParagraph">{{ message }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            mounted() {
                console.log('mounted 钩子被调用');
                // 通过 $refs 访问 DOM 元素
                const paragraph = this.$refs.myParagraph;
                console.log('段落元素:', paragraph);
                // 操作 DOM 元素，例如修改文本内容
                paragraph.textContent = 'Modified in mounted hook';
            }
        });
    </script>
</body>

</html>