Vue.js 3.0 Tutorial
Vue.js 3.0 Component Advanced
Vue.js 3.0 Transitions & Animations
Vue.js 3.0 Reusable & Combinable
Vue.js 3.0 Advanced
Vue.js 3.0 Tools
Vue.js 3.0 Scale
Vue.js 3.0 Accessibility
Vue.js 3.0 Migrating from Vue2
Vue.js 3.0 Contribute Documentation
Vue.js 3.0 API References
Vue.js 3.0 Style Guide
The list rendering in Vue.js helps to create lists of items in a fluid and flexible way. It is primarily done using the v-for directive.
For our tutorial, we will create a simple component that lists out an array of user data.
Here's a step-by-step guide:
Step 1: Initialize your Vue project.
If you have not created your Vue 3 project yet, you can do it using Vue CLI.
vue create my-project
Choose Vue 3 when asked which version of Vue to use.
Step 2: Go to your App.vue file, or whichever component you would like to render your list in.
<template>
<div class="app">
<div
v-for="(user, index) in users"
:key="index"
>
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ name: 'John Doe', email: 'john@doe.com' },
{ name: 'Jane Doe', email: 'jane@doe.com' },
{ name: 'Bob Smith', email: 'bob@smith.com' },
],
};
},
};
</script>
<style scoped>
</style>
In the template, we're using v-for to loop over each user in the users array. user is the current item we're looping over, and index is the current index in the array.
The :key is necessary to give each rendered item a unique identifier so Vue can keep track of each node's identity. This will help Vue optimize re-rendering processes. While using the index as key is not recommended for lists that might change, it's okay for static lists like this.
Step 3: Style your rendered list as per your requirements.
You can add CSS to the <style> section of your component to give your rendered list a specific look.
Step 4: Run your application.
You can run your Vue 3 application using the following command:
npm run serve
And that's it! You should now see a list of users rendered in your application. This is a basic example, but you can extend this to include any kind of data you would like to render in a list.
v-for Directive in Vue 3.0:
v-for is used for rendering lists by iterating over an array or object.<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
};
},
};
</script>
Vue 3.0 Dynamic List Rendering:
<template>
<ul>
<li v-for="item in dynamicItems" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
dynamicItems: [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' },
{ id: 3, name: 'Item C' },
],
};
},
};
</script>
Conditional Rendering in Vue 3.0 Lists:
<template>
<ul>
<li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item A', visible: true },
{ id: 2, name: 'Item B', visible: false },
{ id: 3, name: 'Item C', visible: true },
],
};
},
};
</script>
Vue 3.0 v-for Index Usage:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
};
},
};
</script>
Iterating Over Objects in Vue 3.0:
<template>
<ul>
<li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
myObject: { key1: 'Value 1', key2: 'Value 2', key3: 'Value 3' },
};
},
};
</script>
Filtering and Sorting in Vue 3.0 Lists:
<template>
<ul>
<li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item C' },
{ id: 2, name: 'Item A' },
{ id: 3, name: 'Item B' },
],
};
},
computed: {
sortedItems() {
return this.items.slice().sort((a, b) => a.name.localeCompare(b.name));
},
},
};
</script>
Handling Click Events in Vue 3.0 Lists:
<template>
<ul>
<li v-for="item in items" :key="item.id" @click="handleItemClick">{{ item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }],
};
},
methods: {
handleItemClick(item) {
console.log(`Clicked: ${item.name}`);
},
},
};
</script>
Vue 3.0 List Transition Effects:
<template>
<transition-group name="fade" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</transition-group>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }],
};
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
Lazy Loading Images in Vue 3.0 Lists:
<template>
<ul>
<li v-for="item in items" :key="item.id">
<img :src="item.imageSrc" alt="Item Image" loading="lazy" />
{{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item A', imageSrc: 'itemA.jpg' },
{ id: 2, name: 'Item B', imageSrc: 'itemB.jpg' },
{ id: 3, name: 'Item C', imageSrc: 'itemC.jpg' },
],
};
},
};
</script>
Infinite Scrolling with Vue 3.0 Lists:
<template>
<div ref="scrollContainer" @scroll="handleScroll">
<ul>
<li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
allItems: /* ... */,
visibleItems: /* ... */,
itemsPerPage: 10,
currentPage: 1,
};
},
methods: {
handleScroll() {
const container = this.$refs.scrollContainer;
if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
this.loadMoreItems();
}
},
loadMoreItems() {
// Logic to load more items
},
},
};
</script>
Vue 3.0 Scoped Slots in List Rendering:
<template>
<ul>
<template v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</template>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' },
{ id: 3, name: 'Item C' },
],
};
},
};
</script>