VueJS Basics (Install, Template Syntax and Instance)

Using Vue on Windows

Vue JS can be installed with several package managers. I installed node and npm with a windows package manager with eventual success. The only reason I’m even making note of this is because I had difficulty using the frequently recommended method of starting a Vue application.

  1. Install with chocolatey (terminal, this installed Node and npm)
    • cinst nodejs.install
  2. Install Vue
    • npm install -g @vue/cli
  3. Navigate to project directory (terminal) and run Vue UI tool
    • vue ui

    From here you have all the same options you would normally have under the Vue CLI3 tool, but some added statistics and helpful visual components. To begin a project navigate to the “Tasks” page and select “Serve.” This starts a development server, default address is http://localhost:8080/

Or you can select “open app” in the right corner.

Accessing the Vue Instance inside HTML

    Properties and methods stored in the  Vue instance can be accessed as seen in the above HTML. Just like that! No need for a this.title or anything to access the title property in the data object written in the JS section on the right. This makes output very easy, because we don’t need to manually get items from the vue instance, or save it into memory somehow just to read the values, Vue does all of that for us behind the scenes. This is one reason Vue templates are so powerful! No wasted time writing our own functions to do all of that accessing the DOM manually, Vue just takes care of that bit for us.

    As seen, we can also use functions() inside {{  curly braces  }} in our template. It’s perfectly fine, the only thing to keep in mind is that the function must return something that can be output by the DOM. AKA something that can be converted to a string, so no complex or null objects or similar cases.

So what is the Vue template?

    Vue JS creates a template based on our html code, stores that internally and then basically uses this template to create the REAL HTML code, which is then rendered as the DOM and presented to the browser. There is a layer between HTML we write, and then final output to browser in the end, which is the Vue JS instance, which takes our code, creates a template, renders this template. For example entering a title, and then outputs the final HTML code which is rendered in the browser.

    The Vue template is like a marriage between JavaScript and HTML code using template expressions and the Vue instance. It makes it easier to write powerful and user friendly applications with a natural connection between HTML and JS, all managed by Vue JS.

Accessing the Vue Instance inside JavaScript code

    If we want direct access to all the properties inside a method of a Vue instance, this is a different case. In the Vue Template, we have direct access to all these properties and methods, but in the JS instance, Vue will proxy both methods and properties for us using the ‘this’ keyword (e.g. this.title). Using ‘this’ will access properties and methods inside the instance, which is all handled by Vue.

Leave a Comment