Day Two
Let's dive into covering as much as we can in vue Js for this day 2 of 10
1. Difference between v-show and v-if
v-show and v-if are used to show elements on the DOM based on a given condition, In the code below day1Complete is true so in the DOM we show two paragraphs with text Day 1 of 10 completed based on the value of day1complete. To see the difference between v-show and v-if we set day2Complete as false where both elements do not show in the DOM but upon inspecting the element that had v-if was removed but the the one with v-show was there with display set to none.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p v-show="day1Complete"> Day 1 of 10 completed </p>
<p v-if="day1Complete"> Day 1 of 10 completed </p>
<!-- with v-show nothing shows when we inspect in DOM element removed completely-->
<p v-show="day2Complete"> (v-show) Day 2 of 10 completed </p>
<!-- with v-if inspecting DOM we see <p style="display: none;"> (v-show) Day 2 of 10 completed </p>-->
<p v-if="day2Complete"> (v-if) Day 2 of 10 completed </p>
</body>
<script>
const { createApp } = Vue;
createApp({
setup() {
let day1Complete= true ;
let day2Complete= false ;
return {
day1Complete,
};
},
}).mount("#app")
</script>
</html>2. v-else-if
v-else-if directive works as a chain to v-if, allowing us to check multiple conditions in sequence. In the example below if our 10 day challenge is between 1 and 4 we output Vue 10 Day challenge in red, if it is between 5 and 8 we output in green otherwise we output in green.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>v-else</title>
</head>
<body>
<div id="app">
<div v-if = "dayNumber >= 1 && dayNumber < 4">
<span v-html="challenge.beginner"></span>
</div>
<div v-else-if = "dayNumber > 4 && dayNumber <= 8">
<span v-html="challenge.intermediate"></span>
</div>
<div v-if = "dayNumber > 8 && dayNumber <= 10">
<span v-html="challenge.advanced"></span>
</div>
</div>
</body>
<script>
const { createApp, ref, reactive } = Vue;
createApp({
setup() {
const dayNumber = ref(10) ;
const challenge = reactive({
advanced: '<h1 style="color:green">Vue 10 Day challenge</h1>',
intermediate: '<h1 style="color:yellow">Vue 10 Day challenge</h1>',
beginner: '<h1 style="color:red">Vue 10 Day challenge</h1>'
});
return {
challenge,
dayNumber,
};
},
}).mount("#app")
</script>
</html>3. v-for
v-for is a loop that we can use to iterate. In the example below we iterate over prorperties of an object. The value (color) is an HTML string injected into the DOM with v-html wher the key (index) is the color name, though here we are not displaying it.The result: a list of <div>s, each containing a colored square + its name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>v-for</title>
</head>
<body>
<div id="app" style="display: grid; grid-template-rows: repeat(auto-fit, 35px);
gap: 0; height: 100vh; overflow: hidden;">
<div v-for="(color, index) in colors">
<div v-html="color" style="display:flex; gap: 2px; align-items: center;"></div>
</div>
</div>
</body>
<script>
const { createApp, reactive } = Vue;
createApp({
setup() {
const colors = reactive({
white: '<span style="background-color:#FFFFFF; width:50px; height:50px; display:inline-block;"> </span> <span> White </span>',
silver: '<span style="background-color:#C0C0C0; width:50px; height:50px; display:inline-block;"> </span> <span> silver </span>',
gray: '<span style="background-color:#808080; width:50px; height:50px; display:inline-block;"> </span> <span> Gray </span>',
black: '<span style="background-color:#000000; width:50px; height:50px; display:inline-block;"> </span><span> Black </span>',
red: '<span style="background-color:#FF0000; width:50px; height:50px; display:inline-block;"> </span><span> Red </span>',
maroon: '<span style="background-color:#800000; width:50px; height:50px; display:inline-block;"> </span><span> Maroon </span>',
yellow: '<span style="background-color:#FFFF00; width:50px; height:50px; display:inline-block;"> </span><span> Yellow </span>',
olive: '<span style="background-color:#808000; width:50px; height:50px; display:inline-block;"> </span><span> Olive </span>',
lime: '<span style="background-color:#00FF00; width:50px; height:50px; display:inline-block;"> </span><span> Lime </span>',
green: '<span style="background-color:#008000; width:50px; height:50px; display:inline-block;"> </span><span> Green </span>',
aqua: '<span style="background-color:#00FFFF; width:50px; height:50px; display:inline-block;"> </span><span> Aqua </span>',
teal: '<span style="background-color:#008080; width:50px; height:50px; display:inline-block;"> </span><span> Teal </span>',
blue: '<span style="background-color:#0000FF; width:50px; height:50px; display:inline-block;"> </span><span> Blue </span>',
navy: '<span style="background-color:#000080; width:50px; height:50px; display:inline-block;"> </span><span> Navy </span>',
fuchsia: '<span style="background-color:#FF00FF; width:50px; height:50px; display:inline-block;"> </span><span> Fuchsia </span>',
purple: '<span style="background-color:#800080; width:50px; height:50px; display:inline-block;"> </span><span> Purple </span>'
});
return {
colors
};
},
}).mount("#app")
</script>
</html>4. Lets improve #3 above with v:bind
We can improve our example in 3 above by just creating an object with colors then we bind those styles to our style property as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>lets redo previous example in v-bind</title>
</head>
<body>
<div id="app" style="display: grid; grid-auto-rows: 40px; gap: 4px; padding: 8px; height: 100vh;">
<div v-for="(color, index) in colors"
style="display: flex; align-items: center; gap: 8px;">
<!-- Color box -->
<div :style="[color, {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '40px',
height: '40px',
border: '1px solid #ccc',
borderRadius: '4px'
}]">
</div>
<span>{{ color.name || index }}</span>
</div>
</div>
</body>
<script>
const { createApp, reactive } = Vue;
createApp({
setup() {
const colors = reactive({
white: 'background-color:#FFFFFF;',
silver: 'background-color:#C0C0C0;',
gray: 'background-color:#808080;',
black: 'background-color:#000000;',
red: 'background-color:#FF0000;',
maroon: 'background-color:#800000;',
yellow: 'background-color:#FFFF00;',
olive: 'background-color:#808000;',
lime: 'background-color:#00FF00;',
green: 'background-color:#008000;',
aqua: 'background-color:#00FFFF; ',
teal: 'background-color:#008080;',
blue: 'background-color:#0000FF;',
navy: 'background-color:#000080;',
fuchsia: 'background-color:#FF00FF;',
purple: 'background-color:#800080;'
});
return {
colors
};
},
}).mount("#app")
</script>
</html>5. Two-way data binding, event handling and reactive class binding
In the code below we demonstrate three main concepts first, two-way data binding is implemented using v-model, which links the input field to the reactive variable userInput, ensuring that any text typed in the input automatically updates the underlying state. Second, event handling is showcased with v-on directives, including click events on the button and parent div, as well as v-on:keyup.enter on the input; the .stop modifier is used to prevent event propagation, allowing precise control over which element responds to user interactions. Third, reactive class binding is applied through the :class directive, where the colorClass reactive variable dynamically changes the button’s CSS class, enabling visual feedback—switching from green-color to lime-color in response to user actions. Together, these three features illustrate the core of Vue’s reactive and declarative programming model, combining state management, event-driven behavior, and dynamic styling in a simple, interactive interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Two-way data binding, event handling and reactive class binding</title>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="userInput" v:on-keyup.enter="codesantara(userInput)" style="margin-bottom: 5px;">
</div>
<div v-on:click="codesantara('developers hanging point')">
Codesantara div
<button :class="colorClass" style="padding:3px; color:white;" v-on:click.stop="codesantara(userInput)">codesantara</button>
</div>
</div>
</body>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
let colorClass = ref('green-color');
let userInput = ref('')
function codesantara(message){
alert(message);
colorClass.value = 'lime-color'
}
return {
codesantara,
colorClass,
};
},
}).mount("#app")
</script>
<style>
.green-color{
background-color:#008000;
}
.lime-color{
background-color: #00FF00;
}
</style>
</html>javascript book
If this interested you, check out my Javascript Book