web第六次

获取数据,进行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>

总结

  • created 适用于在实例初始化完成后,还未进行 DOM 挂载时进行数据请求和初始化操作。
  • mounted 适用于在 DOM 挂载完成后,对真实的 DOM 元素进行操作和初始化第三方库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值