From the course: Learning Vue.js
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Binding to inner text and HTML - Vue.js Tutorial
From the course: Learning Vue.js
Binding to inner text and HTML
- [Narrator] In this video, we'll start to get a sense of Vue's reactivity system and observe how the UI changes when the underlying data changes. First, to get rid of that flash of curly braces when the page loads. One we can do that is just to not put anything between the "h1" tags, to not use the curly braces, and instead opt to use the "v-text" directive which is a special attribute that we can use to bind the inner text to our "deckName" data property. So now when we refresh, there's no sign of curly braces because we aren't using them anymore. Now let's take a step toward displaying some flashcard data by adding our cards array to our view data. So, we'll add a new property in our data object called "cards" that will initialize with the value "cards" from the data file. And, this type of property declaration, where the name and the value are the same is so common that we've had a shortcut for it since ES 2015…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.