Creating your first Vue.js appInstallation for Vue.js is as simple as including the library: Now like I mentioned a Vue.js app is composed of a data object and an HTML template in which to embed the data. So for our first app to see Vue.js in action lets add to the
body: First we define a
divwhich will be our HTML template for our Vue.js app. Inside we use the double braces for data interpolation into the HTML. Inside the actual Vue.js app we simply define the data and connect the
divas the element for the app to both render to and use as the template. Next, for added flare, we increment the count variable on our app once per second. That's all there is to creating a Vue.js application, opening this in your browser, you will see the page automatically updates every-time we update the data property.
Events and MethodsNow in most applications having the DOM react to the data being changed is only half the story, you also need a way to update the data, Vue.js takes care of this with events and methods. Methods are stored functions run in the context of your Vue.js app. Let's update our counter example to add the ability to start and stop the timer instead of it simply running: In the HTML template, we added a button to start and stop the counter, to accomplish this we need the text on the button to be dynamic and we need an event handler for when the button is clicked. To declare an event in Vue.js on an element, you prefix the name of any standard HTML DOM events with
v-on:, so the
v-on:keyup. In our example we are using the
v-on:clickattribute to handle the
clickevent. Something you may have noticed is that for button's text we are calling a method as opposed to just referencing a stored property. In many situations the data you store is not necessarily in the format you want to display it on the page. Methods can be used here to process the data, and all the reactivity you get from properties applies when using methods, if the underlying data changes the template will update accordingly. In the Vue.js app, we now have a new property holding the timer variable, and some methods. The
togglemethod which is bound to the button's click event checks whether or not the
timerproperty is set, starting or stoping the timer respectively and the
counterActionmethod is used to display the correct action in the button, again based on the timer variable. Since the toggle method changes the timer property, and the counterAction method—which is in the Vue.js template—uses the timer property, any time toggle is called the template will re-render the button's text. It is worth noting that even though we don't have an initial value for the timer property, it still needs to be declared when creating the Vue.js app. If you don't declare the property from the beginning the property won't be reactive and won't cause the HTML to re-render when changed. In our example, the view gets updated once a second while the timer is running, and so once a second our counterAction method will also be called when the button is redrawn. Vue.js lets us optimize this by caching the result of a method and only recalling the method if the underlying data specifically used in the method are changed. This is also useful if you use the same computed property in multiple places on the page, instead of processing the value multiple times, by caching the value, you can reduce a lot of overhead. Let's update the example to include cached properties: The main difference besides for the caching, is that methods under
computedare referenced as properties as opposed to methods, so in the HTML template we had to remove the brackets from counterAction.
Gabriel is a software engineer and consultant, you can check out his site here.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…