Pol's Coding Notes

# VueJS

# Random notes

  • You can have multiple instances of Vue in the same page, just using adding Vue as a CDN and targeting different IDs in the HTML. It is not what you commonly use to build, mostly used in examples and docs.
  • => template. We can do simple expressions and ternary operators inside.
  • Always try to be as agnostic as possible and plan for common use cases. Make it reusable!
  • Use mocked data as close to reality when possible. Better to pull from a json as props than to work with data properties and have to refactor it later.
  • Start with mobile in mind and go bigger.

# Directives

  • v-if="string". The string may refer to a property in the Vue instance data. Even if it is a Boolean, number, we will write it as a string and Vue will understand.
  • v-bind:disabled="isTrue". We give it an argument, and tie it to an element in data.
  • v-on:click=''

# Computed properties

We can access data and props only by using this.myProp or this.myData, no need to do this.props.myProp.

Computed properties are a 'repackaging' of our original data. They are cached so they are really useful for data calculations, unlike methods.

# Methods

  • Basically function to interact with our templates. It could be an simple toggle, for example:
  methods: {
    toggleIsTrue: function () {
      this.isTrue = !this.isTrue
    }
  }
  • It is important to write methods as function() and NOT as arrow functions so that we correctly handle this.

# Handling user input with v-model

<input type="text" v-model="hello">. We need to attach v-model to an inital state, usually a filler text or an empty string.

  • We do all the JS inside script tags, even imports.
  • Directives have a shorthand. For example, v-bind:title => :title.

# Props and Components

Really similar to React. In Vue, we need to define a props object with their type (String, Boolean, ...)

# Looping

With the v-for directive. We place it in the item itself, like <li v-for="item in list"></li>.

We can easily loop through an object as well:

<li v-for="(value, key) in profile">
  {{ key }}: {{ value }}
</li>

If we loop over a component, we need to v-bind:key and specify a key (like in React).

# Children to parent communication: emitting events

Everything perfectly explained in David Egan's post.

# Styling

  • If we add a class to a component, it will add it to our component wrapper.

← TypeScript →