for…in
for…in 循环用于遍历对象属性（自身的+原型链上的）
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';
// An highlighted block
var foo = 'bar';
展开操作符在对象上只复制对象的自身可枚举属性，不会包含继承的属性。
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };console.log(obj2); // 输出：{ a: 1, b: 2, c: 3 }对象展开不会复制对象的原型链上的属性，只会复制自身的属性。如果您希望深度复制对象，您可能需要使用其他方式，例如递归遍历对象的属性。
在vue2中使用refs
<!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 来访问 refthis.$refs.myInput.focus();}}});</script>
</body>
</html>AJAX 请求的示例，使用 XMLHttpRequest 发送 GET 请求
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
- 安装axios
npm install axios
- 引入axios
// 使用 CommonJS 模块语法
const axios = require('axios');// 或者使用 ES6 模块语法
import axios from 'axios';
- axiosGET请求
axios.get('https://api.example.com/data').then(response => {// 请求成功，处理响应数据console.log(response.data);}).catch(error => {// 请求失败，处理错误console.error(error);});
- axios POST请求
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使用方法
- 循环数组元素：
<ul><li v-for="item in items">{{ item }}</li>
</ul>- 获取索引值：
<ul><li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
</ul>- 遍历对象的属性：
<ul><li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>- 循环嵌套数据：
<ul><li v-for="category in categories">{{ category.name }}<ul><li v-for="product in category.products">{{ product.name }}</li></ul></li>
</ul>- 使用索引值作为 id：
<ul><li v-for="(item, index) in items" :key="index"><!-- 使用索引值作为 id --><span :id="'item-' + index">{{ item }}</span></li>
</ul>- 使用数据对象中的唯一属性作为 id：
<ul><li v-for="item in items" :key="item.id"><!-- 使用数据对象中的唯一属性作为 id --><span :id="'item-' + item.id">{{ item.name }}</span></li>
</ul>vue中传递props
在父组件中定义 props：
Vue.component('child-component', {props: ['message'],template: '<div>{{ message }}</div>'
});在父组件中使用子组件并传递 props：
<template><div><child-component :message="parentMessage"></child-component></div>
</template><script>
export default {data() {return {parentMessage: 'Hello from parent!'};}
};
</script>在子组件中使用 props：
<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%20Tutorials
描述：编码查询参数用于在 URL 中包含特殊字符或空格。在上面的示例中，%20 代表空格。
组合查询参数：
示例：https://example.com/api/products?category=electronics&priceMin=50
描述：可以同时使用多个查询参数来组合不同的过滤条件。
查询参数的使用取决于服务器端的 API 设计和文档，客户端通常需要遵循 API 的规范来正确构建和发送请求。在前端开发中，您可以使用 JavaScript 来动态生成 URL，包括查询参数，并使用库（如 Axios）来发送 HTTP 请求以与服务器通信。查询参数对于实现搜索、过滤、分页和配置 API 请求非常重要。
