前端学习——Web API (Day4)

最新推荐文章于 2024-07-08 18:51:22 发布
最新推荐文章于 2024-07-08 18:51:22 发布
阅读量247 收藏
点赞数
分类专栏： 前端 文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46574748/article/details/131651801
版权

日期对象

在这里插入图片描述

实例化

在这里插入图片描述

日期对象方法

在这里插入图片描述

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 40px;
      border: 1px solid pink;
      text-align: center;
      line-height: 40px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDay()}日 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)


  </script>

</body>

</html>

在这里插入图片描述

时间戳

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

案例

在这里插入图片描述

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2023年7月11日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="second">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    // 函数封装
    function getCountTime() {
      // 1. 得到当前时间戳
      const now = +new Date()

      // 2. 得到将来时间戳
      const last = +new Date('2023-7-11 18:30:00')

      // 3. 得到剩余的时间戳 转换为秒数
      const count = (last - now) / 1000

      // let d = parseInt(count / 60 / 60 / 24) // 计算天数
      // 4. 转换为时分秒
      let h = parseInt(count / 60 / 60 % 24) // 计算小时
      h = h < 10 ? '0' + h : h
      let m = parseInt(count / 60 % 60) // 计算分数
      m = m < 10 ? '0' + m : m
      let s = parseInt(count % 60) // 计算当前秒数
      s = s < 10 ? '0' + s : s

      // 把时分秒写进盒子
      const hour = document.querySelector('#hour')
      const minutes = document.querySelector('#minutes')
      const second = document.querySelector('#second')

      hour.innerHTML = h
      minutes.innerHTML = m
      second.innerHTML = s
    }

    getCountTime()
    setInterval(getCountTime, 1000)
    
  </script>
</body>

</html>

在这里插入图片描述

节点操作

DOM节点

在这里插入图片描述在这里插入图片描述

查找节点

在这里插入图片描述
在这里插入图片描述

案例

李伟兴 09:31:13
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      position: relative;
      width: 1000px;
      height: 200px;
      background-color: pink;
      margin: 100px auto;
      text-align: center;
      font-size: 50px;
      line-height: 200px;
      font-weight: 700;
    }

    .box1 {
      position: absolute;
      right: 20px;
      top: 10px;
      width: 20px;
      height: 20px;
      background-color: skyblue;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <div class="box">
    我是广告
    <div class="box1">X</div>
  </div>
  <script>
    // // 1. 获取事件源
    // const box1 = document.querySelector('.box1')
    // // 2. 事件侦听
    // box1.addEventListener('click', function () {
    //   this.parentNode.style.display = 'none'
    // })

    // 1. 获取三个关闭按钮
    const closeBtn = document.querySelectorAll('.box1')
    for (let i = 0; i < closeBtn.length; i++) {
      closeBtn[i].addEventListener('click', function () {
        // 关闭我的爸爸 所以只关闭当前的父元素
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

增加节点

在这里插入图片描述
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>我是老大</li>
  </ul>
  <script>
    // // 1. 创建节点
    // const div = document.createElement('div')
    // // console.log(div)
    // 2. 追加节点  作为最后一个子元素
    // document.body.appendChild(div)
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    // ul.appendChild(li)
    // ul.children
    // 3. 追加节点
    // insertBefore(插入的元素, 放到哪个元素的前面)
    ul.insertBefore(li, ul.children[0])
  </script>
</body>

</html>

案例

在这里插入图片描述
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>学车在线首页</title>
  <link rel="stylesheet" href="./css/style.css">
  <style>

  </style>
</head>

<body>

  <!-- 4. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">

      </ul>
    </div>
  </div>
  <script>
    // 1. 重构  
    let data = [
      {
        src: 'images/course01.png',
        title: 'Think PHP 5.0 博客系统实战项目演练',
        num: 1125
      },
      {
        src: 'images/course02.png',
        title: 'Android 网络动态图片加载实战',
        num: 357
      },
      {
        src: 'images/course03.png',
        title: 'Angular2 大前端商城实战项目演练',
        num: 22250
      },
      {
        src: 'images/course04.png',
        title: 'Android APP 实战项目演练',
        num: 389
      },
      {
        src: 'images/course05.png',
        title: 'UGUI 源码深度分析案例',
        num: 124
      },
      {
        src: 'images/course06.png',
        title: 'Kami2首页界面切换效果实战演练',
        num: 432
      },
      {
        src: 'images/course07.png',
        title: 'UNITY 从入门到精通实战案例',
        num: 888
      },
      {
        src: 'images/course08.png',
        title: 'Cocos 深度学习你不会错过的实战',
        num: 590
      },
    ]

    const ul = document.querySelector('.box-bd ul')

    // 1. 根据数据个数创建对应li
    for (let i = 0; i < data.length; i++) {
      // 2. 创建新li
      const li = document.createElement('li')

      // 把内容给li
      li.innerHTML = `
          <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
          `
      // 3. ul追加li
      ul.appendChild(li)
    }
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 1 克隆节点  元素.cloneNode(true)
    // const li1 = ul.children[0].cloneNode(true)
    // console.log(li1)
    // 2. 追加
    ul.appendChild(ul.children[0].cloneNode(true))
  </script>
</body>

</html>

删除结点

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <ul>
    <li>没用了</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 删除节点  父元素.removeChlid(子元素)
    ul.removeChild(ul.children[0])
  </script>
</body>

</html>

M端事件

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    // 1. 触摸
    div.addEventListener('touchstart', function () {
      console.log('开始摸我了')
    })
    // 2. 离开
    div.addEventListener('touchend', function () {
      console.log('离开了')
    })
    // 3. 移动
    div.addEventListener('touchmove', function () {
      console.log('一直摸，移动')
    })
  </script>
</body>

</html>

JS插件

在这里插入图片描述

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/swiper.min.css">
  <style>
    .box {
      position: relative;
      width: 800px;
      height: 300px;
      background-color: pink;
      margin: 100px auto;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

</head>

<body>
  <div class="box">
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>


  </div>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      // 小圆点
      pagination: {
        el: ".swiper-pagination",
      },
      // 自动播放
      autoplay: {
        delay: 1000,//1秒切换一次
        disableOnInteraction: false,  // 鼠标点击 触摸之后，自动继续播放
      },
      // 可以键盘控制
      keyboard: {
        enabled: true,
        onlyInViewport: true,
      },
    });
  </script>
</body>

</html>

综合案例

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;

    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input,
    .info select {
      width: 80px;
      height: 27px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
      box-sizing: border-box;
      margin-right: 15px;
    }

    .info button {
      width: 60px;
      height: 27px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>
    // 获取元素
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
    const items = document.querySelectorAll('[name]')

    // 声明一个空数组，增加和删除都是对这个数组进行操作
    const arr = []

    // 1. 录入模块
    // 1.1 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {

      // 阻止默认行为 不跳转
      e.preventDefault()

      // 这里进行表单验证  如果不通过，直接中断，不需要添加数据
      // 先遍历循环
      for (let i = 0; i < items.length; i++) {
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
      }

      // 创建新对象
      const obj = {
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }

      // 追加给数组里面
      arr.push(obj)

      // 清空表单
      this.reset()

      // 调用渲染函数
      render()

    })

    // 2. 渲染函数
    function render() {

      //先清空tbody，把最新数组里面的数据渲染完毕 
      tbody.innerHTML = ''

      for (let i = 0; i < arr.length; i++) {

        // 生成tr
        const tr = document.createElement('tr')
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        // 追加元素
        tbody.appendChild(tr)
      }

      // 3. 删除操作
      // 3.1 事件委托
      tbody.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {

          //得到当前元素自定义属性
          arr.splice(e.target.dataset.id, 1)
          console.log(arr)
          // 重新渲染一次
          render()
        }
      })
    }

  </script>

</body>

</html>

在这里插入图片描述

肉松拿铁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记——WebAPI
Duanjiani的博客
03-14 570
这段时间开始了第一次实习和毕业论文的开始，身边的人都陆续开始查重修改了，我也要加紧时间了，故而笔记的更新只能蹭着周末才开始。话不多说，开始这场Java Script的学习 API的概念 API（application programming interface）是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或某硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API 浏览器提供了一套操作浏览器功能和页面元素的API(BOM/DOM) 这里的Web API特指浏览
easyui 1.3.2中文API
07-03
EasyUI 是一款基于 jQuery 的轻量级前端框架，它提供了一系列的UI组件，如窗口、表格、下拉框等，用于快速构建美观且功能丰富的Web应用界面。本文将详细介绍EasyUI 1.3.2版本中的几个核心组件——窗口（Window）、...
前端学习——Web API (Day2)
qq_46574748的博客
07-10 178
【代码】前端学习——Web API (Day2)
前端学习——Web API（Day1）
qq_46574748的博客
07-07 201
小练习 其他获取DOM元素方法 识别标签 小练习 小练习 操作元素样式属性 小练习 小练习 小练习
前端学习——Web API (Day5)
qq_46574748的博客
07-12 167
【代码】前端学习——Web API (Day5)
前端学习——Web API (Day6)
qq_46574748的博客
07-13 210
【代码】前端学习——Web API (Day6)
前端学习——Web API (Day3)
qq_46574748的博客
07-10 265
事件流 事件流和两个阶段说明 事件捕获 事件冒泡 阻止冒泡 解绑事件 事件委托 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=de
Web APIs第01天笔记——Web API介绍
m0_55879104的博客
08-09 375
  API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 举例解释什么是API。例如，  C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。​   javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框
信息传递——Web学习day8
weixin_44453019的博客
09-30 70
@[toc]# 项目播放功能需求展示 1、每点入该歌曲的播放页面时，播放页面的中心旋转图案与主页低透明背景图片，必须和该页播放歌曲原有图片一致。 2、每点入该歌曲的播放页面时，播放主页中心得有其歌曲对应的歌名歌星信息。 3、播放新歌曲时，自动将上一首正在播放的歌曲暂停并播放新歌曲。 信息传递问题注意点 “地址目录？id名=”+res.currentTarget.dataset.id名 ？与 = 千万别忘记 wx.navigateTo({ url: '/pages/play/play?m
Web前端学习笔记——Ajax
唯恋殊雨的博客
09-25 916
1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新 特定元素的 href 或 src 属性 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应）， 如果我们可以...
Day19:竞技场Day19
03-27
总的来说，"竞技场Day19"可能是一个学习或实践JavaScript的挑战活动，涵盖了各种JavaScript基础和进阶概念，有助于提升开发者的技术水平和项目经验。如果你想要深入学习JavaScript，可以从上述各个方向出发，逐步...
老男孩教育前端笔记
03-20
【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料，主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源，尤其对于初学者或者想要提升前端技能的开发者来说...
Day18
03-26
在第18天的学习中，你可能会深入学习变量声明（var、let和const的区别）、数据类型（原始类型和引用类型）、控制流程（if...else、switch、for循环、while循环）以及函数——JavaScript中的重要模块化工具。...
Day10
03-18
在JavaScript学习的第十天，我们将深入探讨这个广泛应用于Web开发的动态编程语言的关键知识点。JavaScript是一种解释型、弱类型、基于原型的语言，它为网页添加交互性和动态功能，使其不仅仅是一份静态文档。 1. ...
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 922
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1119
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
HTML_表单 和 表单案例
secret010的博客
07-05 235
【代码】HTML_表单 和 表单案例。
WebGIS面试题
最新发布
热爱WebGIS的博客
07-08 262
文章目录1. 前端1.1. 选择器的优先级1.2. CSS 中它的布局有哪些？1.3. CSS3 的新特性1.4. CSS 的两种盒子模型1.5. CSS 的伪元素选择器和伪类选择器有哪些？1.6. ES6 的新特性1.7. 谈谈你对 promise 的理解1.8. 简单说一下原型链1.9. 简单说一下深浅拷贝1.10. 去掉一个数组的重复元素，你是怎么做的，请具体说说1.11. 说说同步和异步的区别？1.12. 立即执行函数是什么？1.13. 说说 this 的指向1.14. 请你说说 new 操作符具体
藏经阁WEB框架0day漏洞的发掘及分析经验分享.pdf
09-04
藏经阁WEB框架0day漏洞的发掘及分析经验分享.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值