We've already used Vue's templating syntax to bind data to the DOM, but it turns out that it's much more powerful than that. Inside of those double mustaches, we can use the full power of JavaScript expressions. So if we wanted to uppercase our header, we just have to add to locale uppercase. Hopping back over to our browser, we can see that our header really stands out now.
While we can do a lot of cool things inside of these double mustaches, there are some limitations. The biggest is that we can only evaluate one expression. So trying any more than that? Well, it just won't work.
Looking at this in our browser, we see that nothing is happening because Vue won't render it. It's failing. In our console, we get some helpful error messages about how to debug this. We also can't declare variables or evaluate if statements.
But if needed, we can use a shorthand if statement, otherwise known as a ternary statement. You'll see when we comment out header, the H1 falls back to the welcome message. We can shorten this even further still by using the or operator. By leveraging our current knowledge of JavaScript.
We can wield the template syntax as a powerful tool for displaying and manipulating all of our data. Now that we have a better understanding of how to use it, let's remove that input field from our template and update our header to say shopping list app. Awesome. Now we're ready to start adding items to our list.
We've already used Vue's templating syntax to bind data to the DOM, but it turns out that it's much more powerful than that. Inside of those double mustaches, we can use the full power of JavaScript expressions. So if we wanted to uppercase our header, we just have to add to locale uppercase. Hopping back over to our browser, we can see that our header really stands out now.
While we can do a lot of cool things inside of these double mustaches, there are some limitations. The biggest is that we can only evaluate one expression. So trying any more than that? Well, it just won't work.
Looking at this in our browser, we see that nothing is happening because Vue won't render it. It's failing. In our console, we get some helpful error messages about how to debug this. We also can't declare variables or evaluate if statements.
But if needed, we can use a shorthand if statement, otherwise known as a ternary statement. You'll see when we comment out header, the H1 falls back to the welcome message. We can shorten this even further still by using the or operator. By leveraging our current knowledge of JavaScript.
We can wield the template syntax as a powerful tool for displaying and manipulating all of our data. Now that we have a better understanding of how to use it, let's remove that input field from our template and update our header to say shopping list app. Awesome. Now we're ready to start adding items to our list.