Vue Template Syntax and Expressions

We've already used Vue's templating syntax to bind data to the DOM. But it turns out that it's so much more powerful than that. Inside of those double mustaches, we can use the full power of JavaScript expressions. toLocaleUppercase.

Over on the right-hand side, 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 a few limitations. The biggest is that we can only evaluate one expression at a time, so trying to use more won't work. Notice this big error that the playground is showing us.

It's saying that we have an unexpected token, that is, the semicolon. We also can't declare new variables or evaluate if statements. But if needed, we can use a shorthand if statement, otherwise known as a ternary statement. We could shorten this even further still by using the OR operator.

Now, if I were to comment out message, we'd see welcome print to our H one. Very nice. By leveraging our current knowledge of JavaScript, we can wield the template syntax as a powerful tool for displaying and manipulating our data. Now that we have a better understanding of how to use it, let's remove that example input fill from our template.

Then let's update our message variable to be a header variable and say shopping list app. And we can remove the welcome fallback as well. I'll also add a style sheet to apply some nice styling for our shopping list application. We can do this in the playground by adding a new file with this plus button here.

css. And then I'll paste in some styles that will be available in the source code for this lesson. Awesome. Now we're ready to start adding items to our shopping list.