Go for launch

What is this blog about?

This blog is where I shall share with you, dear reader, all of the delicious little Vue.js nuggets I have to offer. (Try them with the dipping sauces)

Why Vue.js?

I come from a .NET background. In fact, C# is my first love. But variety is the spice of life. And I like me some seasoning! So like any good developer I realized I needed to learn JavaScript if I wanted to keep up with the rest of the world and it would be a good idea to have at least one modern framework under my belt as well. At the urging of a few developer friends I tried to learn React.js. But in spite of my best efforts it just didn’t click for me. Coincidentally, the CTO at my current job mentioned he had been playing around with a new-ish JavaScript library called Vue.js. I checked it out later that evening and immediately fell in love with it. The biggest draw for me was how quickly I picked up the core concepts of Vue. It felt like I already knew what to do next and there was no guessing when I read through the examples in the documentation. After looking around for some dedicated Vue blogs, I came up empty and decided to fill the void.

Why choose Vue?

There are a ton of JavaScript frameworks out there these days and each one has its pros and cons. But as I stated above, for me, the familiarity I felt when trying out Vue was the biggest draw for me. If you already know HTML and JavaScript, then you’re halfway there. The syntax is very intuitive and reads easily for developers at all levels. I am confident I can share some Vue code with the average developer and get them up to a level where they can be effective very quickly. I will get into more technical reasons to choose Vue in another post.

So you’re probably sitting there thinking, “Alright dude, you keep talking about Vue. Show me some damn code already! Prove to me it’s easy to use.” And to you I say, “I knew it, you are drunk. Just sit there and look at this code.”

Here is a super simple example on how to get started with Vue.js. First we add a reference to the Vue.js library. Then we add a div with an id of “app”. We can then add some JavaScript to instantiate our Vue instance and bind to the div we just created.

<html>
<head>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Yooooo!'
        }
      });
  </script>
</body>
</html>

Open this codepen to see the magic happen. Technically, we just created a tiny little Vue.js app. This looks a lot like JS template literals but there is more going on here than just outputting a string. The data in our Vue instance is now bound to the DOM and everything is reactive.

In codepen, open the console section and enter app.message = "something else"; and see the message in the output section change. Neat!