Vue.js 如何在页面加载时调用一个Vue.js函数

在本文中，我们将介绍如何在Vue.js中调用一个函数来处理页面的加载事件。在Vue.js中，可以使用created生命周期钩子来实现这一功能。

在Vue.js中使用created生命周期钩子

Vue.js提供了一系列的生命周期钩子，这些钩子函数允许我们在组件不同的生命周期阶段执行自定义代码。其中之一就是created生命周期钩子，在组件被创建和挂载到DOM后立即调用。

通过在Vue组件的methods对象中定义一个方法，并将该方法绑定到created钩子上，我们可以在页面加载时调用这个方法。下面是一个示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      this.message = 'Hello, Vue.js!'
    }
  }
}
</script>

在上面的示例中，我们定义了一个Vue组件，其中包含一个message的数据属性和一个getMessage的方法。在created钩子中，我们调用了getMessage方法，将其结果赋值给message属性。当页面加载时，getMessage方法会被自动调用，将消息”Hello, Vue.js!”赋值给message，然后通过插值表达式显示在页面上。

示例说明

在上面的示例中，我们简单地将一个字符串赋值给message属性并在页面上显示出来。实际上，我们还可以在created钩子中执行更复杂的操作，例如发送请求获取数据，或者调用其他的Vue组件方法等。

下面是一个更复杂的示例，我们在页面加载时通过API发送一个请求，并将返回的数据显示在页面上：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          this.message = data.message
        })
    }
  }
}
</script>