分享5个关于 Vue 的小知识，希望对你有所帮助（五）

前端达人

发布于 2023-09-21 20:16:35

1.5K0

文章被收录于专栏：前端达人前端达人

大家好，今天我继续分享5个关于 Vue 的小知识，希望对你有所帮助。

1、如何使 Map 和 Set 类型的数据具有响应性？

有时候，我们想在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 ] ]

2、如何过滤文本输入，只接受数字和小数点。

有时候，我们想要使用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()会阻止该字符的输入，从而确保输入框只能包含数字和小数点。

3、如何在某个元素上触发另一个元素的事件

我们可以通过给我们想要触发事件的元素分配一个 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' 已输出。

4、如何在HTTP请求时传递自定义头部

应用程序编程接口（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>

5、如何使用定时器自动刷新数据

有时候，我们想在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 。