Using multiple Vue instances on the same page

April 18, 2017 by
Part 34 of 55 in the Vue.js: From Beginner to Professional series

We have created a lot of Vue instances in this course so far, but did you ever wonder if you could use multiple Vue instances on the same page? Indeed you can, as you can probably tell based on the below example. <div id="vm1"> <h1>{{ name }}</h1> </div> <div id="vm2"> <button @click="showName">Show name</button> </div> var… read more

Accessing a Vue instance outside of its declaration

April 18, 2017 by
Part 33 of 55 in the Vue.js: From Beginner to Professional series

Until now, we have done all of our work within the Vue instances themselves. But we can also reference these Vue instances by storing them in variables. I have prepared a super simple example which just displays a data property. <div id="vm1"> <h1>{{ name }}</h1> </div> new Vue({ el: '#vm1', data: { name: 'Vue Instance… read more

Filters

March 13, 2017 by
Part 29 of 55 in the Vue.js: From Beginner to Professional series

In this post we’ll be talking about something called filters. Filters provide a way to perform text transformation such as capitalizing letters or doing virtually anything we’d like. Filters can be used both within string interpolation, but also within the v-bind directive’s expression. As always, let’s dive straight into an example. I have a message… read more

Vue.js Watchers

March 13, 2017 by
Part 28 of 55 in the Vue.js: From Beginner to Professional series

Sometimes you may want to watch data for changes and react to them. Typically all you need is computed properties, but there are some scenarios where you need to implement a custom watcher. Before we talk more about when to use watchers, let’s first see an example of how to use them. We will build… read more