VueJS Simple Quickstart

Home » VueJS Simple Quickstart

So I’m building a stupid webpage that looks like a trashy magazine. The idea is you can change the headlines and images and get an image of it. But rather than vanilla JS which I was all about last week, I have grown bored of typing document.getElementById and now I want to cut corners again. Plus I have used Vue a few times and for some reason I really enjoy it. I never really got into React at all – maybe the one man show nature of my work never leant itself to React and it’s modular, team-orientated approach. I don’t know, but I feel like every time I sit down to fall in love with it, I keep feling nothing in my pants. It feels like there aren’t any quick wins and if something has broken, you just get a blank screen.*** However with Vue, the docs are great. you get a development version with debugging messages and you’re in like Flynn in no time at all. Plus the syntax just seems easier to get your head around? This is a tiny example of how to get going and see the magic happening within 2 minutes.

***Edit: I have since changed my mind and have in fact fallen in love, slightly, with React. For now.

So here, I am just going to demonstrate a simple input field example. I want to type and see what I’m typing instantly on screen. If this was any other day, I’d use Jquery on KeyUp, and the function might get a bit hairy. Well look at this example. Get yourself a html page (and use this boilerplate, not that other bloated one!) and do this:

The ‘v-model’ handles the data and as you change the input the html will update.

To bind to an image, use this:

img v-bind:src="bluebox_a" width="200px"

Then after your app div, call Vue and your app script.

var app = new Vue({ el: '#app', data: { bluebox_a: 'Butter' } });

That’s it! Don’t add ‘app’ to the body, make sure it’s in a div inside the body tag. Isn’t that great?

Double Marvellous provides web design in Cork, Ireland