Edvinas Urbasius


Front-end developer. Interested in IT, history and economics. The life-long learner.


Using VueJS to Interact with the DOM

I decided to postpone learning Angular.js and chose Vue.js instead. Then, I bought Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) course by Maximilian Schwarzmüller. Here are takeaways, notes from the course and my own code samples (CodePen).

These notes are from Section 2.

  • The {{ }} Syntax is also called "Interpolation" or "String Interpolation"
  • Vue.js creates a template based on our HTML code, stores that internally and uses it to create a real HTML code, which then it's rendered as a DOM.
  • To access data object properties, we don't need to use this keyword, just use the name of the property.
  • In Vue instance, we not only store data, but we can also store methods.
  • It's important to provide something in {{ }} that can be returned in DOM. For example, the string. No complex stuff.
  • Using this anywhere in Vue instance gives us the ability to access to properties, methods and so on.
  • We can't use curly braces in any HTML element attribute.
  • The v-bind directive tells Vue.js: Don't use a normal HTML attribute, instead bind it.
  • We pass arguments to v-bind directive like this v-bind:href. Where href is an argument.
  • Directives are instructions placed in code.
  • The v-once directive will render elements once.
  • By default, Vue.js escapes HTML.
  • The v-HTML directive allows passing a property that holds HTML.
  • https://codepen.io/edvinasurbasius1/pen/xeNbJY (Optional assignment code. Template syntax and how to output Data to the template).
  • The v-on directive allows listening to receive 'something' from our template. For example v-on:click, but there are more types of events.
  • We can pass our own arguments to a function. <button v-on:click="increase(2, $event)">Increase</button>
  • $event simply allows you to access the data dispatched by an event (e.g. the default event object for the built-in events or your custom data for your custom events) in the template. 
  • https://codepen.io/edvinasurbasius1/pen/mYdMOr (Another assigment code).
  • We can write a valid JavaScript code as long as it has one expression and does not contain if or else, or a loop.
  • What's reactivity?
  • Two-way binding.
  • The v-model directive tells Vue setup two-way binding for input and property.
  • Data is not reactive.
  • Reacting to Changes with Computer Properties
  • Everything stored in computed can be used just like you use the property in a data object.

You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: