Data
Now that our Vue app is hooked up to our HTML, we are ready to generate and display dynamic data. As discussed in Introduction to Vue, displaying and updating dynamic data for users is essential functionality for most front-ends.
Most values on the web can change at any moment, such as the number of likes on a post or the current set of posts to display. We call constantly-changing data values like this dynamic data. We need a place to store dynamic data values so that we can still use them in our HTML even when we don’t know what their values will be at any given moment. There are many different ways to do this in Vue.
The simplest way is the data
property on the options object. The value of data
is an object. Each key-value pair in this object corresponds to a piece
of data to be displayed in the template. The key is the name of the
data to use in the template and the value is the value to display when
the template is rendered.
We then use mustache syntax to display this data in our HTML template.
const app = new Vue({
el: '#app',
data: {
language: 'Spanish',
hoursStudied: 274
}
});
<div id="app">
<p>You have been studying {{ language }} for {{ hoursStudied }} hours</p>
</div>
Looking at this example, we see that two pieces of dynamic data were added to
data
on our Vue instance:language
andhoursStudied
with values of'Spanish'
and274
respectively. These values are then displayed in our template using mustache syntax, displaying the textYou have been studying Spanish for 274 hours
to our user. If these values are changed later on by our app, such as if the language is changed or the number of hours studied increases, our template will automatically display this new value for the user.
- Get link
- Other Apps
Labels
VUE- Get link
- Other Apps
Comments
Post a Comment
Thank you :)