Javascript笔记

用于测试的API接口

网址:https://jsonplaceholder.typicode.com/

javascript 复制代码
//获取10个users的数据的接口
https://jsonplaceholder.typicode.com/users
//示例数据:
{
	 "id": 1,
	   "name": "Leanne Graham",
	   "username": "Bret",
	   "email": "Sincere@april.biz",
	   "address": {
	       "street": "Kulas Light",
	       "suite": "Apt. 556",
	       "city": "Gwenborough",
	       "zipcode": "92998-3874",
	       "geo": {
	           "lat": "-37.3159",
	           "lng": "81.1496"
	       }
	   },
	   "phone": "1-770-736-8031 x56442",
	   "website": "hildegard.org",
	   "company": {
	       "name": "Romaguera-Crona",
	       "catchPhrase": "Multi-layered client-server neural-net",
	       "bs": "harness real-time e-markets"
	   }
	},

for...in

for...in 循环用于遍历对象属性(自身的+原型链上的)

javascript 复制代码
const person = {
    name: 'Alice',
    age: 25,
    occupation: 'Engineer'
};

for (const key in person) {
    console.log(key, person[key]); // 输出属性名和属性值
}

只遍历对象自身的属性,而不包括继承的属性,使用 hasOwnProperty 。

下面展示一些 内联代码片

// A code block
var foo = 'bar';
javascript 复制代码
// An highlighted block
var foo = 'bar';

展开操作符在对象上只复制对象的自身可枚举属性,不会包含继承的属性。

javascript 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // 输出:{ a: 1, b: 2, c: 3 }

对象展开不会复制对象的原型链上的属性,只会复制自身的属性。如果您希望深度复制对象,您可能需要使用其他方式,例如递归遍历对象的属性。

在vue2中使用refs

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Vue 2 Ref 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" ref="myInput">
        <button @click="focusInput">Focus Input</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            methods: {
                focusInput() {
                    // 使用 this.$refs 来访问 ref
                    this.$refs.myInput.focus();
                }
            }
        });
    </script>
</body>
</html>

AJAX 请求的示例,使用 XMLHttpRequest 发送 GET 请求

javascript 复制代码
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const responseData = xhr.responseText;
        // 处理响应数据
    }
};
xhr.send();

使用axios

  1. 安装axios
powershell 复制代码
npm install axios
  1. 引入axios
javascript 复制代码
// 使用 CommonJS 模块语法
const axios = require('axios');

// 或者使用 ES6 模块语法
import axios from 'axios';
  1. axiosGET请求
javascript 复制代码
axios.get('https://api.example.com/data')
    .then(response => {
        // 请求成功,处理响应数据
        console.log(response.data);
    })
    .catch(error => {
        // 请求失败,处理错误
        console.error(error);
    });
  1. axios POST请求
javascript 复制代码
const data = {
    username: 'john_doe',
    password: 'secret123'
};

axios.post('https://api.example.com/login', data)
    .then(response => {
        // 请求成功,处理响应数据
        console.log(response.data);
    })
    .catch(error => {
        // 请求失败,处理错误
        console.error(error);
    });

vue中v-for使用方法

  1. 循环数组元素:
html 复制代码
<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>
  1. 获取索引值:
html 复制代码
<ul>
  <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
</ul>
  1. 遍历对象的属性:
html 复制代码
<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
  1. 循环嵌套数据:
html 复制代码
<ul>
  <li v-for="category in categories">
    {{ category.name }}
    <ul>
      <li v-for="product in category.products">
        {{ product.name }}
      </li>
    </ul>
  </li>
</ul>
  1. 使用索引值作为 id:
html 复制代码
<ul>
  <li v-for="(item, index) in items" :key="index">
    <!-- 使用索引值作为 id -->
    <span :id="'item-' + index">{{ item }}</span>
  </li>
</ul>
  1. 使用数据对象中的唯一属性作为 id:
html 复制代码
<ul>
  <li v-for="item in items" :key="item.id">
    <!-- 使用数据对象中的唯一属性作为 id -->
    <span :id="'item-' + item.id">{{ item.name }}</span>
  </li>
</ul>

vue中传递props

在父组件中定义 props:

javascript 复制代码
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

在父组件中使用子组件并传递 props:

html 复制代码
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

在子组件中使用 props:

html 复制代码
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

查询参数的种类,区别和用法

查询参数(Query Parameters)是在 URL 中包含的键值对,用于向服务器传递数据或配置请求。它们通常用于在客户端(浏览器、应用程序等)和服务器之间传递信息,以便执行特定的操作或获取特定的数据。查询参数通常出现在 URL 的问号 ? 后面,多个参数之间使用 & 分隔。

以下是一些常见的查询参数的种类、区别和用法:

单一查询参数:

示例:https://example.com/api/resource?id=123

描述:单一查询参数包含一个键值对,用于传递单个数据项,如资源的唯一标识符。

多个查询参数:

示例:https://example.com/api/search?query=keyword\&page=1\&sort=asc

描述:多个查询参数允许一次传递多个键值对,通常用于搜索、分页和排序等操作。

布尔查询参数:

示例:https://example.com/api/products?featured=true

描述:布尔查询参数通常用于启用或禁用特定功能或过滤数据。在上面的示例中,featured 参数可以用来获取特色产品。

数字查询参数:

示例:https://example.com/api/items?priceMin=20\&priceMax=50

描述:数字查询参数用于传递数字值,通常用于过滤或排序数据。在上面的示例中,它们用于获取价格在指定范围内的物品。

字符串查询参数:

示例:https://example.com/api/search?category=electronics

描述:字符串查询参数用于传递文本数据,通常用于过滤、搜索或配置选项。

日期和时间查询参数:

示例:https://example.com/api/events?startDate=2023-09-01\&endDate=2023-09-30

描述:日期和时间查询参数用于传递日期和时间信息,通常用于筛选或获取在特定日期范围内的事件。

数组查询参数:

示例:https://example.com/api/products?colors=red\&colors=blue\&colors=green

描述:数组查询参数允许传递多个相同键的值,通常用于多选过滤器或多个选项。

编码查询参数:

示例:https://example.com/api/search?q=JavaScript Tutorials

描述:编码查询参数用于在 URL 中包含特殊字符或空格。在上面的示例中,%20 代表空格。

组合查询参数:

示例:https://example.com/api/products?category=electronics\&priceMin=50

描述:可以同时使用多个查询参数来组合不同的过滤条件。

查询参数的使用取决于服务器端的 API 设计和文档,客户端通常需要遵循 API 的规范来正确构建和发送请求。在前端开发中,您可以使用 JavaScript 来动态生成 URL,包括查询参数,并使用库(如 Axios)来发送 HTTP 请求以与服务器通信。查询参数对于实现搜索、过滤、分页和配置 API 请求非常重要。

相关推荐
永乐春秋22 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿24 分钟前
【前端】CSS
前端·css
ggdpzhk26 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue