Hey babes! The easiest way to understand a bit of how to dynamically change things with Vue is with something as big as a full background color change. This project will use a Vue instance as it is the simplest way to start with Vue.
First let’s start with our index.html:
Create HTML:
We make the basic structure (! or html5 - in VSCode).
Then we add a div with the id=”app”. This is where our Vue instance will be mounted.
Then we add the scripts. We will use the Vue CDN (<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>) and then we link our own script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>BG Change</title>
</head>
<body>
<div id = "app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="script.js"></script>
</body>
</body>
</html>
Create JS:
Now we will create our instance.
All we need is to make the variable as a new Vue and then give it where we will mount the instance in our html. We called our div app previously so that’s what we will write.
As data, we will only need the variable bgColor and we assign it the color white in hex.
var app = new Vue({
el:'#app',
data:{
bgColor: '#ffffff',
},
})
Now we go back to our HTML:
We now add another div to have the background in it, we will bind the style with our variable bgColor. Note how the attribute style has a colon before, it is the shortcut for v-bind. Inside style we { }, and we use camelCase for the terms that have - dashes in it. We put a simple h1 with the typical “Hello World!” and then our label and color input to change the color.
Inputs, select, textareas and other components are the only that should use v-model, otherwise use v-bind.
Our color selector is an input so we use v-model without variable bgColor.
I also added the variable in the :style of the input to avoid getting that ugly border but you can ignore it if you want.
<div id = "app">
<div class="full-height " :style="{backgroundColor: bgColor }">
<h1>Hello World!</h1>
<label for="head">Background Color
<input type="color" id="head" name="head"
:value="bgColor" v-model="bgColor" :style="{backgroundColor: bgColor, borderColor: bgColor }" >
</label>
</div>
CSS:
As an extra you can also add CSS to the html with the link and add the following code to get it fully centered.
*{
margin: 0;
padding: 0;
}
.full-height{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
At the end you will end up getting something like this! I tried to explain a bit of how you can do it dynamically and at the same time explain a tad of Vue.
For more information you can go read the Vue Documentation:
Vue Instance
Vue Docs
Top comments (1)
Hi Michelle, thanks for your post.
In dev.to (I see your post was originally written in Medium), you could use this sintaxis to embed a codepen with your code :)