Scribd
Upload
23 views15 pages

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
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
23 views15 pages

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