大家好，今天我继续分享5个关于 Vue 的小知识，希望对你有所帮助。
有时候，我们想在Vue.js中将JavaScript的map和set作为响应式属性使用。
我们可以通过将JavaScript的maps和sets重新赋值为新值，在Vue.js中将它们作为响应式属性使用。
为了做到这一点，我们可以这样写：
<template>
<div id="app">
<p>{{ mapArr }}</p>
<p>{{ setArr }}</p>
</div>
</template>
<script>
export default {
name: "App",
computed: {
mapArr() {
return [...this.map.entries()];
},
setArr() {
return [...this.set.entries()];
},
},
data() {
return {
map: new Map([
["foo", 1],
["bar", 2],
]),
set: new Set([1, 2]),
};
},
mounted() {
this.map = new Map(this.map.set("baz", 3));
this.set = new Set(this.set.add(3));
},
};
</script>我们有 map 和 set 这两个反应属性，分别设置为一个映射和一个集合。
然后我们使用 this.map.set 方法，传入要添加到地图中的键和值。
然后我们将返回的集合传递给 Map 构造函数，并将其分配给 this.map 响应式属性以进行更新。
接下来，我们调用 this.set.add 来向 this.set 添加一个新的条目。
然后我们将返回的集合传递给 Set 构造函数，并将其赋值给 this.set 以更新它。
我们分别将 setArr 和 mapArr 中的集合和映射转换为数组（计算属性 computed），并在模板上进行渲染。
我们所得到的：
[ [ "foo", 1 ], [ "bar", 2 ], [ "baz", 3 ] ]mapArr
[ [ 1, 1 ], [ 2, 2 ], [ 3, 3 ] ]
有时候，我们想要使用Vue.js来过滤文本输入，只接受数字和小数点。
我们可以通过检查不是数字的键码并阻止默认操作来使用Vue.js过滤文本输入，只接受数字和小数点。
默认操作将是接受输入。例如，我们可以写成：
<template>
<div id="app">
<input v-model="num" @keypress="isNumber($event)" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
num: 0,
};
},
methods: {
isNumber(evt) {
const charCode = evt.which ? evt.which : evt.keyCode;
if (
charCode > 31 &&
(charCode < 48 || charCode > 57) &&
charCode !== 46
) {
evt.preventDefault();
}
},
},
};
</script>添加一个数字输入和 isNumber 方法，我们将其设置为 @keypress 指令的值，以检查按下的键。
我们从 evt.which 或 evt.keyCode 属性中获取键盘按键字符代码。然后检查该字符编码是否在数字键盘范围内（48到57之间）或者是否是小数点(46的字符编码)。如果不是数字或小数点，evt.preventDefault()会阻止该字符的输入，从而确保输入框只能包含数字和小数点。
我们可以通过给我们想要触发事件的元素分配一个 ref 来在 Vue.js 上触发事件。
然后我们可以调用分配给ref的元素上的方法来触发事件。
例如，我们可以写：
<template>
<div id="app">
<button type="button" @click="myClickEvent">Click Me!</button>
<button type="button" @click="myClickEvent2" ref="myBtn">
Click Me 2!
</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
myClickEvent($event) {
const elem = this.$refs.myBtn;
elem.click();
},
myClickEvent2() {
console.log("clicked");
},
},
};
</script>我们有两个按钮。我们想要触发第二个按钮的点击事件。
为了做到这一点，我们添加了 myClickEvent 方法，该方法获取分配给 myBtn 引用的按钮。
然后我们对其进行调用。
在第二个按钮中，我们将 @click 指令设置为 myClickEvent2 以记录点击。
现在当我们点击第一个按钮时，我们会看到 'clicked' 已输出。
应用程序编程接口（API）使我们的服务能够相互通信。在进行HTTP请求时，有时需要在请求头中传递自定义值。在本文中，我们将讨论如何在进行HTTP请求时传递自定义头部。
请查看下面的代码，了解如何在进行HTTP请求时向我们的API添加标头。
在下面的代码片段中，我们有一个异步的JavaScript函数getJokes，它向Chuck Norris API发出HTTP API请求，以获取一个随机笑话。
config对象用于为API请求设置自定义头部。在我们的情况下，它指定请求将包含JSON数据，并带有“Content-Type”：“application/json”头部，还包括一个“api_key”：“your-api-key-here”头部。如果您使用的API需要API密钥进行身份验证，您应该将“your-api-key-here”替换为您实际的API密钥。
在使用键值对进行请求时，您可以添加任意数量的标头。
<script setup>
async function getJokes() {
try {
const config = {
headers: {
"Content-Type": "application/json",
"api_key": "your-api-key-here",
},
};
const response = await fetch('https://api.chucknorris.io/jokes/random', config);
const res_json = await response.json();
console.log(res_json);
} catch (error) {
console.log("Error occurred:", error);
}
}
</script>
<template>
<div>
<h1>Click button to make API request with headers</h1>
<button @click="getJokes" style="padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; border-radius: 4px; hover:">Click Me </button>
</div>
</template>
有时候，我们想在Vue.js中使用定时器自动重新加载或刷新数据。
在Vue.js中，要使用定时器自动重新加载或刷新数据，我们可以使用 setInterval 方法。
template>
<div id="app">
{{ answer }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
answer: {},
timer: "",
};
},
created() {
this.fetchData();
this.timer = setInterval(this.fetchData, 5000);
},
methods: {
async fetchData() {
const res = await fetch("https://yesno.wtf/api");
const data = await res.json();
this.answer = data;
},
cancelAutoUpdate() {
clearInterval(this.timer);
},
},
beforeDestroy() {
this.cancelAutoUpdate();
},
};
</script>我们有一个从API获取数据的方法。
我们在 setInterval 钩子中创建计时器。
我们还要调用 fetchData 来获取初始数据。
我们传入 this.fetchData 以定期运行它。
我们将时间段设定为5000毫秒。
在 besforeDestroy 钩子中，我们调用 cancelAutoUpdate 来调用 clearInterval 以清除计时器，这样当我们卸载组件时，计时器将被移除并停止运行。
在模板中，我们渲染 answer 。
由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。