Vue Js

Lab Practical Submission
Date: 04/02/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical-7:
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.
<!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>
<link rel="stylesheet" href="style7a.css">
<script
src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app" class="center-container">
<p v-uppercase>Hello, this text will be uppercased

when clicked!</p>
<button @click="changeTextColor">Change Text

Color</button>
</div>
<script src="app.js"></script>
</body>
</html>
II. Creating a Dynamic List with Vue.js.
<!DOCTYPE html>
<html lang="en">
<head>

initial-scale=1.0">
<title>Dynamic List Example with Custom Directive</title>
<script
<style>
body {
font-family: Arial, sans-serif;

margin: 0;
padding: 0;
background-color: #f8dada;
#app {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #db6363;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h2 {
text-align: center;
color: #333;
ul {
list-style-type: none;
padding: 0;
li {
margin-bottom: 8px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 4px;
input[type="text"] {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 8px;
button {
padding: 8px 16px;
font-size: 16px;
background-color: #a12836;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: #741c27;
</style>
</head>
<body>
<h2>Add Items to the following list!</h2>
<div id="app">
<ul v-list="items"></ul>
<div>
<input type="text" v-model="newItem" placeholder="Add
new item">
<button @click="addItem">Add Item</button>
</div>
</div>
<script>
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);
},
update(el, binding) {
const ul = el.querySelector('ul');
ul.innerHTML = '';
binding.value.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
});
new Vue({
el: '#app',
data: {
items: ['Science', 'Math', 'English'], // Initial

list of items
newItem: '' // New item to be added
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem.trim());
this.newItem = ''; // Clear the input field after

adding
}
}
});
</script>
</body>
</html>
III. Custom Directive Create a directive that formats and displays dates in a
human readable format.
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
<title>Custom Directive for Date Formatting</title>
<style>
/* Apply modern styles to the body */
body {
font-family: 'Times New Roman', sans-serif;
background: linear-gradient(to top, #aaefd2,#ffffff,
#aaefd2); /* Gradient background */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Style the container */

.container {
text-align: center;
}
/* Style the paragraph */

.custom-date {
font-size: 24px;
color: #333;
margin-top: 20px;
animation: fadeIn 1s ease-in-out;
}
/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Custom Directive for Date Formatting</h1>
<p class="custom-date" v-format-date> 

</p>
</div>
<script
<script>
// Define the custom directive named 'format-date'
Vue.directive('format-date', {
// When the bound element is inserted into the DOM...
inserted: function(el) {
// Get the current date
const currentDate = new Date();
// Format the date into a human-readable format
const formattedDate = formatDate(currentDate);
// Update the element's content with the formatted date
el.textContent = formattedDate;
}
});
// Helper function to format the date

function formatDate(date) {
const options = { year: 'numeric', month: 'long', day:
'numeric' };
return date.toLocaleDateString('en-US', options);
}
// Create a new Vue instance
new Vue({
el: '.container'
});
</script>
</body>
</html>

Vue Js

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vue Js

Uploaded by

Copyright:

Available Formats

Lab Practical Submission

Demonstrate how to create a custom directive and how to use it through

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

<meta name="viewport" content="width=device-width,

<title>Custom Directive Example</title>

<link rel="stylesheet" href="style7a.css">

<p v-uppercase>Hello, this text will be uppercased

<button @click="changeTextColor">Change Text

<meta name="viewport" content="width=device-width,

<title>Dynamic List Example with Custom Directive</title>

font-family: Arial, sans-serif;

margin: 50px auto;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border: 1px solid #ccc;

<h2>Add Items to the following list!</h2>

<button @click="addItem">Add Item</button>

items: ['Science', 'Math', 'English'], // Initial

newItem: '' // New item to be added

if (this.newItem.trim() !== '') {

this.newItem = ''; // Clear the input field after

/* Style the container */

/* Style the paragraph */

// Helper function to format the date

You might also like