Scribd
Upload
17 views

Vue Js

The document discusses three practical examples of creating custom directives in Vue.js: 1) A directive to transform text to uppercase on click. 2) A directive to dynamically generate a list. 3) A directive to format dates into a human readable format.

Uploaded by

Roshni Rana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Vue Js

The document discusses three practical examples of creating custom directives in Vue.js: 1) A directive to transform text to uppercase on click. 2) A directive to dynamically generate a list. 3) A directive to format dates into a human readable format.

Uploaded by

Roshni Rana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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>

<meta charset="UTF-8">

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


initial-scale=1.0">

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

<script
src="https://cdn.jsdelivr.net/npm/vue@2"></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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
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> <!-- Apply the
custom directive -->
<!-- The content will be manipulated by the custom
directive -->
</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/vue@2"></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>

You might also like