Scribd
Upload
29 views

Practical 7

The document demonstrates how to create custom directives in Vue.js. It shows three examples - a directive to uppercase text on click, a directive to format dates for display, and a directive used in a todo list application.

Uploaded by

nidz2245
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
29 views

Practical 7

The document demonstrates how to create custom directives in Vue.js. It shows three examples - a directive to uppercase text on click, a directive to format dates for display, and a directive used in a todo list application.

Uploaded by

nidz2245
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/ 6

PRACTICAL-7

NAME: - Nidhi Bangar


ROLL NO.: - 22bcm044
COURSE CODE & NAME: - 2CS201 FSWD
AIM: - 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>Practical 7a</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-uppercase>This text will turn into uppercase when clicked.</p>
</div>
<script src="app.js"></script>
</body>
</html>
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'
});
II. Creating a Dynamic List with Vue.js Custom Directive

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management App</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>
<body>
<div id="app" class="container">
<h1 class="title">Task Management App</h1>

<!-- Task Input Form -->


<div class="box">
<h2 class="subtitle">Add New Task</h2>
<div class="field is-grouped">
<div class="control">
<input class="input" type="text" v-model="newTask" placeholder="Enter
task description">
</div>
<div class="control">
<input class="input" type="date" v-model="newDeadline" :min="today"
@change="checkDate">
</div>
<div class="control">
<div class="select">
<select v-model="priority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="control">
<button class="button is-primary" @click="addTask">Add Task</button>
</div>
</div>
</div>

<!-- Task List -->


<div class="box">
<h2 class="subtitle">Task List</h2>
<ul>
<li v-for="(task, index) in tasks"
:class="getPriorityClass(task.priority)">
<span v-uppercase @click="toggleCase(task)">Task: {{ task.description
}} - Deadline: {{ formatDate(task.deadline) }} - Priority: {{ task.priority
}}</span>
<button class="button is-small is-success"
@click="markAsDone(index)">Done</button>
</li>
</ul>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
Vue.directive('uppercase', {
bind(el) {
el.style.cursor = 'pointer';
},
update(el) {
if (el.tagName === 'SPAN') {
el.innerText = el.innerText.toUpperCase();
}
}
});

new Vue({
el: '#app',
data: {
newTask: '',
newDeadline: '',
tasks: [],
priority: 'low',
today: new Date().toISOString().split('T')[0]
},
methods: {
addTask() {
if (this.newTask && this.newDeadline) {
this.tasks.push({ description: this.newTask, deadline:
this.newDeadline, priority: this.priority });
this.newTask = '';
this.newDeadline = '';
this.priority = 'low';
}
},
toggleCase(task) {
task.description = task.description === task.description.toUpperCase() ?
task.description.toLowerCase() : task.description.toUpperCase();
},
formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
},
getPriorityClass(priority) {
return {
'has-text-danger': priority === 'high',
'has-text-warning': priority === 'medium',
'has-text-success': priority === 'low'
};
},
checkDate(event) {
const selectedDate = new Date(event.target.value);
const today = new Date();
if (selectedDate < today) {
event.target.value = '';
alert('Please select a future date.');
}
},
markAsDone(index) {
this.tasks.splice(index, 1);
}
}
});
</script>
</body>
</html>
III. 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="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-format-date="date">
</p>
</div>
<script>
Vue.directive('format-date', {
inserted: function(el, binding) {
const date = binding.value;
const formattedDate = formatDate(date);
el.textContent = formattedDate;
}
});
new Vue({
el: '#app',
data: {
date: '2022-03-05T12:00:00'
}
});
function formatDate(dateString) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(dateString).toLocaleDateString('en-US', options);
}
</script>
</body>
</html>

You might also like