Vue是一種流行的JavaScript框架,用于在web應用程序中構建用戶界面。其中,created函數是Vue生命周期函數的一部分,它在組件創建時被調用。 在created中,我們可以初始化數據,調用方法和執行其他任務。
created() { this.data = [1, 2, 3, 4, 5]; this.newData = this.data.map(num =>num * 2); this.fetchData(); }
在上面的代碼示例中,我們初始化了一個數組為 [1, 2, 3, 4, 5] 并將數組新建為一個新數組 newData,其中包含原始數組中每個數字的兩倍。 在created函數中,我們還調用了一個名為fetchData的函數,這個函數是用來從后端API獲取數據。
created () { this.getWeatherData(); }, methods: { async getWeatherData () { let response = await axios.get('http://api.openweathermap.org/data/2.5/weather?q=Paris&APPID=YOUR_APP_ID'); this.weatherData = response.data; } }
在上面的代碼中,我們使用axios庫從OpenWeatherMap API獲取天氣數據。 該函數是異步的,因此使用async和await關鍵字來等待API響應。 一旦我們成功獲取數據,我們將其存儲在weatherData變量中。 使用Vue的響應式數據系統,我們可以在視圖中輕松地訪問weatherData。
雖然created是Vue生命周期的重要部分,但是需要記住的是不能在此函數中修改DOM或使其他異步請求。在mounted生命周期過程中,Vue會將組件掛載到DOM中,這可能是進行這類操作的更合適的時機。