So I have added a Vue instance in advance which simply contains my full name in two data properties, and a div element which just contains some text. What I want to do now, is to use the v-bind directive to bind an expression to the title attribute. The expression is simply going to concatenate the two data properties.
<div v-bind:title="firstName + ' ' + lastName">Hover to see my name</div>
What’s very interesting, is that Vue.js automatically keeps track of which properties a given expression depends on. If one of the dependencies are updated, the directive is refreshed, i.e. the expression is re-evaluated. Now that’s pretty cool, isn’t it?
While you can indeed add expressions within your template, you should avoid putting too much logic in there. It’s fine to use expressions, but you should try to keep them simple – otherwise you are better off placing the code within a method on the Vue instance instead.
Learn Vue.js today!
Take an online course and become an Vue.js champion!
Here is what you will learn:
- How to build advanced Vue.js applications (including SPA)
- How Vue.js works under the hood
- Communicating with services through HTTP
- Managing state of large applications with Vuex
- ... and much more!