Vue notes

vue-notes.md

Directives

• v-bind/:: Pass data from vue instance to html
• v-on/@: Listen for DOM events e.g. v-on:click="doSomething"
• v-once: Only render once
• v-html: Output raw html

We cannot use {{}} syntax inside a html element, use a directive instead e.g:

<a v-bind:href="link">My Link</a>

v-on

// Access the event object when we have customer args
<button v-on:click="doSomething('hello', $event)">My Button</button>

Event modifiers

// Stop propagation
<button v-on:click.stop="">My Button</button>
<button v-on:click.prevent="">My Button</button>

Key modifiers

// Stop propagation
<input v-on:keyup.enter="doSomething"/>

Two way data binding

// Stop propagation
<input type="text" v-model="name"/>

Computed props don't get re-rendered, they are cached

// Add vue to app
import Vue from 'vue';
import App from './App;
Vue({
  render: h => h(App)
}).$mount('#app');

new Vue({
  data: {},
  methods: {},
  computed: {},  
});

<template>
  <div></div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
</style>