A progressive framework for building user interfaces

Topics: tools, development

Author: Maitrik




Vue Introduction [FEM]






  • clean
  • semantic
  • declarative
  • legible
  • easy to maintain
  • reactive


V-MODEL - Creates a relationship between the data in the instance/component and a form input, so you can dynamically update values.

  • v-model.trim will strip any leading or trailing whitespace from the bound string
  • v-model.number changes strings to number inputs
  • v-model.lazy won’t populate the content automatically, it will wait to bind until an event happens. (It listens to change events instead of input)

V-IF / V-SHOW - Is a conditional that will display information depending on meeting a requirement. This can be anything- buttons, forms, divs, components

  • V-IF: mounting and remounting in DOM
  • v-SHOW: toggling visibility by display:none

V-IF / V-ELSE - Pretty straightforward- you can conditionally render one thing or another. There's also v-else-if

V-BIND or : - One of the most useful directives so there's a shortcut! We can use it for so many things- class and style binding, creating dynamic props, etc...

V-ONCE and V-PRE - Not quite as useful, v-once will not update once it's been rendered. v-pre will print out the inner text exactly how it is, including code (good for documentation)

V-HTML - Great for strings that have html elements that need to be rendered!

  • Not the same as templates: inserted as plain HTML.Don't use on user-rendered content, avoid XSS attacks

V-TEXT - Similar to using mustache templates

V-ON or @ - Extremely useful so there's a shortcut! v-on is great for binding to events like click and mouseenter. You're able to pass in a parameter for the event like (e). We can also use ternaries directly

// <div @="
<div v-on="
  click   : onClick,
  keyup   : onKeyup,
  keydown : onKeydown


@mousemove.stop is comparable to e.stopPropagation() @mousemove.prevent this is like e.preventDefault() @submit.prevent this will no longer reload the page on submission @click.once not to be confused with v-once, this click event will be triggered once. @click.native so that you can listen to native events in the DOM