FSWB LAB PRACTICALS
NAME: Samraat Pratap Singh
ROLL NO.: 22BCM055 (E4)
COURSE CODE: 2CS201
COURSE NAME: Full Stack Web Development
PRACTICAL-7
Demonstrate how to create a custom directive
and how to use it through HTML web pages
:
1. Create a custom directive to transform text to uppercase
when clicked.
<!DOCTYPEhtml>
<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="[Link]
.[Link]/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-uppercase
>Hello, thistext will be uppercased when clicked!</p>
</div>
<script>
[Link]('uppercase', {
bind: function(el) {
[Link] = 'pointer';
[Link]('click', function() {
[Link] = [Link]();
});
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
2. Creating a Dynamic List with [Link] Custom Directive
<!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="[Link]
</head>
<body>
<div id="app">
<ul v-list="items"></ul>
</div>
<script>
[Link]('list', { bind(el, binding) { const ul =
[Link]('ul'); // Create a new <ul> element
[Link](item => { // Iterate over each item in the binding
value const li = [Link]('li'); // Create a new <li>
element [Link] = item; // Set the text content of the <li>
element to the current item [Link](li); // Append the <li>
element to the <ul> element
}); [Link](ul); // Append the <ul> element to the bound
element (the element the directive is applied to)
}
});
// Create a new Vue instance new Vue({ el: '#app', // Mount the
Vue instance to the element with the ID 'app' data: {
items: ['physics', 'chemistry', 'maths'] // Sample list of items
}
});
</script>
</body>
</html>
3. Create a directive that formats and displays dates in a
human-readable format
<!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="[Link]
</head>
<body>
<div id="app">
<p v-format-date="date">
</p>
</div>
<script>
[Link]('format-date', {
inserted: function(el, binding) {
const date = [Link];
const formattedDate = formatDate(date);
[Link] = formattedDate;
}
});
new Vue({
el: '#app',
data: {
date: '2022-03-05T[Link]'
}
});
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
}
</script>
</body>
</html>