Fetch list Vue是一種常見的Vue.js技術,它用于獲取和顯示數據列表。通過使用Fetch API,可以輕松地獲取數據并將其渲染到Vue應用程序中。
下面是一個基本的Fetch list Vue實例:
Vue.component('fetch-list',{ data: function() { return { items: [] } }, created: function() { this.fetchData(); }, methods: { fetchData: function() { fetch('https://jsonplaceholder.typicode.com/photos') .then(response =>response.json()) .then(data =>{ this.items = data; }); } }, template: '<ul>' + ' <li v-for="item in items">' + ' {{ item.title }}' + ' </li>' + '</ul>' }); new Vue({ el: '#app' })
在上面的代碼中,我們創建了一個名為"fetch-list"的Vue組件。在該組件創建時,我們會自動調用fetchData()方法,該方法使用Fetch API從URL中獲取數據,并將數據賦值給items。我們還為組件指定了一個簡單的模板,以便為每個數據項顯示其標題。
最后,我們使用new Vue()方法來創建一個新的Vue實例,該實例將在HTML的#app元素中進行渲染。我們可以在HTML中通過添加<fetch-list></fetch-list>標記來使用我們新創建的組件。