In this article, we will discuss how to use Vue CDN on the go and just get started with a simple HTML and CSS file and use vue in it.
What is CDN? - Basically, a package script file that is used to reduce overhead time so that there the load time of the website is much lesser and the dropoff of the number of a user is less. You can find about this more here.
Now we will start how to include the CDN in a normal HTML file. Here you ho how we can achieve the same Vue behavior in HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueJS - Part1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
You can see the script tag at the bottom as the CDN import for VueJS.
Now that you have added Vue to the HTML file let's see how we make a new Vue instance and use the data to render data on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueJS - Part1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
{{header}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: "#app",
data: {
header: 'Vue has been integrated!'
}
})
</script>
</body>
</html>
Now you can see that the header data is rendered on the webpage and now you can any data by this method on the webpage. Also, let me show how reactivity works in VueJS and how we can use the v-model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueJS - Part1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
{{header}}
<input type="text" v-model="header" >
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: "#app",
data: {
header: 'Vue has been integrated!'
}
})
</script>
</body>
</html>
Just try to run the above code and see how the vue model works! This article is just the beginning of many articles. Just stay tuned for more such articles!