Day One
We are going to take on this 10 day vue challenge and try to cover as much as possible regarding Vue js which is a JavaScript framework for building user interfaces by providing a declarative, component-based programming model that helps you efficiently develop user interfaces of any complexity. So lets get started.
1. Let us display dynamic text inside an HTML page
This code below sets up a very basic Vue 3 application that displays dynamic text inside an HTML page. Vue takes over the <div id="app"> section and replaces with the value provided in the setup() function. In this case, it shows the text “Welcome to the 10 Day vue challenge” inside the <h1> element. Essentially, it demonstrates how Vue can bind JavaScript data directly to the HTML, making the content dynamic instead of hard-coded.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Makes sure the page scales well on all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Import Vue 3 (global build, so we can use Vue directly without modules) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Document</title>
</head>
<body>
<!-- Vue app root element where Vue will take control -->
<div id="app">
<!-- Vue will replace {{ message }} with the value from the setup function -->
<h1>{{ message }}</h1>
</div>
<script>
// Pull createApp out of the Vue object
const { createApp } = Vue;
// Create a Vue application
createApp({
// setup function defines the data we want to expose to the template
setup() {
return {
// The text shown in {{ message }}
message: "Welcome to the 10 Day vue challenge",
};
},
})
// Mount Vue app on the div with id="app"
.mount("#app");
</script>
</body>
</html>2. functions
Inside setup(), in vue we can define functions just like in plain JavaScript and if we return those functions, they become available to your template (HTML) as seen in the below example.
<!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">
<h1>{{myMessage()}}</h1>
</div>
</body>
<script>
const { createApp } = Vue;
createApp({
setup() {
const message = "Welcome to the 10 Day vue challenge";
function myMessage(){
return message.toUpperCase();
}
return {
myMessage
};
},
}).mount("#app")
</script>
</html>In the above example setup() function is a special function in Vue 3’s Composition API. It runs once when the Vue app starts and whatever it returns becomes available inside the HTML template (the <h1> in this case).Here, it returns an object with one property: the myMessage function myMessage() function, a plain JavaScript function defined inside setup() which when called, takes the local variable message and applies .toUpperCase() to transform the string into all capital letters. Since it’s returned by setup(), Vue exposes it to the template, allowing myMessage() to be used directly in the HTML.
3. Vue ref
In Vue, a ref is a special way of creating a reactive variable that Vue automatically tracks for changes. Unlike a normal JavaScript variable, a ref keeps a .value property that Vue watches, so whenever .value changes, the DOM is updated instantly without needing manual refreshes. In this code, message is defined as a ref, which means when the myMessage() function updates message.value after 2 seconds, Vue detects the change and automatically re-renders the <h2> to show the new text. This makes ref useful here because it keeps the displayed content in sync with the underlying data, showing how Vue’s reactivity works in action.
<!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">
<h2>Title: {{message}}
<h3>{{myMessage()}}</h3>
</div>
</body>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
let message = ref("Welcome to the 10 day vue challenge");
function myMessage(){
setTimeout(()=>{
message.value = "We will cover everything we can";
}, 2000);
}
return {
myMessage,
message
};
},
}).mount("#app")
</script>
</html>4. reactive in Vue
In Vue 3, reactive is a function that takes an object and makes all its properties reactive. That means Vue watches every property inside it, and if any property changes, Vue will automatically update the DOM wherever that property is used. Unlike ref, which is for a single value, reactive is best when you have a group of related values (like an object or state). Unlike ref we don't have to explicitly access .value (with ref this example could be challenge.value.noOfDays ) when changing the property value.
<!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">
<h2>Title: {{challenge.name}}, {{challenge.description}} , in {{challenge.noOfDays}} days</h2>
<h3>{{myMessage()}}</h3>
</div>
</body>
<script>
const { createApp, ref, reactive } = Vue;
createApp({
setup() {
const challenge = reactive({
name: "Vue Day challenge",
description : "cover everything possible in Vue Js",
noOfDays : 20
});
function myMessage(){
setTimeout(()=>{
challenge.noOfDays = 10;
}, 1000);
}
return {
myMessage,
challenge,
};
},
}).mount("#app")
</script>
</html>5. v-html in Vue
In Vue, the v-html directive is used to render raw HTML inside an element instead of treating it as plain text. Normally, when you bind data with , Vue automatically escapes any HTML tags, meaning they appear on the page as text rather than being rendered as actual HTML elements. With v-html, however, Vue inserts the string value directly into the DOM, allowing tags like <h1> or <b> to render as real HTML. In your code, challenge.name initially contains <h1>Vue Day challenge</h1>, and because it’s bound with v-html, the text is displayed as a proper <h1> heading instead of a raw string. After 1 second, the myMessage() function updates challenge.name to "<h1>10 Day Vue challenge</h1>", and Vue automatically re-renders it. This demonstrates how v-html can make dynamic HTML rendering possible, though it should be used carefully since directly injecting HTML can expose security risks if the content comes from untrusted sources.
<!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">
<div v-html="challenge.name"></div>
<p>Description: {{challenge.description}} , in {{challenge.noOfDays}} days</p>
<h3>{{myMessage()}}</h3>
</div>
</body>
<script>
const { createApp, ref, reactive } = Vue;
createApp({
setup() {
const challenge = reactive({
name: '<h1>Vue Day challenge</h1>',
description : "cover everything possible in Vue Js",
});
function myMessage(){
setTimeout(()=>{
challenge.name = "<h1>10 Day Vue challenge</h1>";
}, 1000);
}
return {
myMessage,
challenge,
};
},
}).mount("#app")
</script>
</html>6. v-once in Vue
In Vue, the v-once directive is used to render an element or component only once and then treat it as static content, meaning Vue will not update it even if the underlying data changes. In the example below, the first <div v-html="challenge.name"></div> is reactive, so when challenge.name changes after one second, it updates to show “10 Day Vue challenge.” However, the second <div v-once v-html="challenge.name"></div> is rendered only the first time, so it stays fixed at “Vue Day challenge”and ignores future changes. This makesv-once` useful for performance optimization when you know certain parts of the template will never need to update, avoiding unnecessary re-renders.
<!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">
<div v-html="challenge.name"></div>
<div v-once v-html="challenge.name"></div>
<p>Description: {{challenge.description}} , in {{challenge.noOfDays}} days</p>
<h3>{{myMessage()}}</h3>
</div>
</body>
<script>
const { createApp, ref, reactive } = Vue;
createApp({
setup() {
const challenge = reactive({
name: '<h1>Vue Day challenge</h1>',
description : "cover everything possible in Vue Js",
});
function myMessage(){
setTimeout(()=>{
challenge.name = "<h1>10 Day Vue challenge</h1>";
}, 1000);
}
return {
myMessage,
challenge,
};
},
}).mount("#app")
</script>
</html>7. v-bind in Vue
In Vue, the v-bind directive is used to dynamically bind values from your data or state to HTML attributes, making them reactive instead of hardcoded. In our example, the link’s href attribute is written as v-bind:href="challenge.url", which tells Vue to take the value of the url property from the reactive challenge object and insert it into the <a> tag. This means that instead of always pointing to a fixed link, the anchor tag’s destination changes automatically if challenge.url is updated in JavaScript. For instance, the link initially points to https://codesantara.devsip.tech , but if the url property is modified later, Vue will instantly update the href in the DOM without reloading the page. This demonstrates how v-bind makes attributes reactive and keeps your UI in sync with the underlying data, making it very useful for links, classes, styles, IDs, or any other dynamic attribute.
<!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">
<div v-html="challenge.name"></div>
<p>Everything will be posted at <a v-bind:href="challenge.url">Codesantara</a></p>
</body>
<script>
const { createApp, ref, reactive } = Vue;
createApp({
setup() {
const challenge = reactive({
name: '<h1>Vue Day challenge</h1>',
description : "cover everything possible in Vue Js",
url: "https://codesantara.devsip.tech"
});
return {
challenge
};
},
}).mount("#app")
</script>
</html>javascript book
If this interested you, check out my Javascript Book