vimwiki/tech/vue.js.wiki

= Vue.js =

Vue.js is a front end reactive framework

== Design ==

Parts of the single page application are made of *components*.
Components are pieces of an application that can be reused and placed together
to build a full application. A component has a few typical parts

{{{
export myComponent {
    data() {
        return {
            data1: 0,
            data2: "string",
            // etc...
        }
    },
    methods: {
        increment() {
            this.data1++
        }
    }
    computed: { //short had for accessing data, useful for building dom
        strLen(){ //this will be called anytime that data2 is changed
            return this.data2.length > 0 ? 'Full' : 'Empty'
        }
    }
    mounted() { //this is basically a constructor
        this.increment()
    }
}
  }}}

When you declare methods in the methods section, they will be accessible via
`this`. If you use arrow syntax they will not be.

Something else to not is *computed* functions are cached and do not need to be
called constantly to update display. They will only be called when the data
they depend on updates. Computed functions are also const, meaning they can
only be used as getters

== HTML Directives ==

=== v-if ===

`v-if` is used to conditionally render a block. The block is only rendered if
the argument is truthy. For example,

`<h1 v-if="awesome">Thats cool</h1>`

This will render if `awesome` is truthy.

=== v-else ===

`v-else` is used with `v-if` to demonstrate an if-else block. It must be placed
in a tag after a `v-if`. It takes no argument.

=== v-else-if ===

`v-else-if` is an `else if` statement from any other language. It can be
chained multiple times.

== Event handling ==

Vue can handle events that occur on certain tags in the DOM. This is done with
the `v-on` directive, or shorthand, `@`.

=== inline ===

Used for simple cases. For example,

{{{
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
  }}}

=== method handler ===

Calls a method to do complex logic

{{{
<button @click="greet">Greet</button>
  }}}

Vue component

{{{
methods: {
    greet(event){
        alert('Hello!')
    }
}
  }}}


=== Event modifiers ===

Sometimes we want to call some modifier on an event. This can be done with a
`.modifier` syntax on the `v-on` call. The list of modifiers that are valid
include

* `.stop`
* `.prevent`
* `.self`
* `.capture`
* `.once`
* `.passive`

== v-model ==

`v-model` allows us to bind some value in the DOM to some value in the
component in two directions. This means updates in the DOM update the component
state, and vice versa.

`<input v-model="input">` will update the state of `this.input`.