Scribd
Upload
17 views4 pages

FSPR7

This document demonstrates how to create custom directives in Vue.js. It shows an example of a directive to transform text to uppercase on click, a directive to dynamically generate a list from data, and a directive to format dates into a human-readable string.

Uploaded by

Aayush Sarda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views4 pages

FSPR7

This document demonstrates how to create custom directives in Vue.js. It shows an example of a directive to transform text to uppercase on click, a directive to dynamically generate a list from data, and a directive to format dates into a human-readable string.

Uploaded by

Aayush Sarda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

2CS201-Full Stack Web Development

Practical-7: (Vue JS)


Demonstrate how to create a custom directive and how to use it through
HTML web pages.:

I. Create a custom directive to transform text to uppercase when clicked.


II. Creating a Dynamic List with Vue.js Custom Directive
III. Create a directive that formats and displays dates in a human-
readable format

I. Create a custom directive to transform text to uppercase when


clicked.
File: capitalize.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Directive Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
<p v-uppercase>Hello, this text will be uppercased when clicked!</p>
</div>

<script src="app.js"></script>
</body>
</html>
File: app.js
Vue.directive('uppercase', {
bind(el) {
el.style.cursor = 'pointer';
el.addEventListener('click', () => {
const text = el.innerText;
el.innerText = text.toUpperCase();
});
}
});

new Vue({
el: '#app'
});

Output:
2CS201-Full Stack Web Development

II. Creating a Dynamic List with Vue.js Custom Directive


File: index.htlm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Directive Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
<ul v-list="items"></ul>
</div>

<script src="app.js"></script>
</body>
</html>
File: app.js
Vue.directive('list', {
bind(el, binding) {
const ul = document.createElement('ul');
binding.value.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
el.appendChild(ul);
}
});

new Vue({
el: '#app',
2CS201-Full Stack Web Development

data: {
items: ['Subject-1', 'Subject-2', 'Subject-3'] // Sample list of items
}
});
Output:

III. Create a directive that formats and displays dates in a human-


readable format
File: v-format.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Directive for Date Formatting</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
<p v-format-date="date"> <!-- Apply the custom directive -->
<!-- The content will be manipulated by the custom directive -->
</p>
</div>

<script>
// Define the custom directive named 'format-date'
Vue.directive('format-date', {
// When the bound element is inserted into the DOM...
inserted: function(el, binding) {
// Get the date from the binding value
const date = binding.value;

// Format the date into a human-readable format


const formattedDate = formatDate(date);

// Update the element's content with the formatted date


el.textContent = formattedDate;
}
});
2CS201-Full Stack Web Development

// Create a new Vue instance


new Vue({
el: '#app',
data: {
date: '2022-03-05T12:00:00' // Sample date
}
});

// Helper function to format the date


function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
}
</script>

</body>
</html>

Output:

You might also like