# Vue Options-API

vue3 also has the composition-API (more similar to react)

<script>
	export default {
  	name: 'Home',
    //
	},
</script>

# Access variables

use this

methods: {
    changeTitle() {
      this.title = 'A new Title';
    },
  },

Array

props: ['prop1', 'prop2'];

is, where the state of the application is

Remember: "A Function, that returns an Object"

 data() {
    return {
      message: 'This is Vue.js'
    }
  },

data() {}
// is the same as
data: function() {}

 methods: {
    clearMessage(){
      this.message=''
    }
  },

-> always recalculates, if something changes

computed: {
    messageUppercase () {
      return this.message.toUpperCase();
    }
  },

watch if values change.

watch: {
	firstName (value, oldValue) {
    //
  }
},

only Vue2

filters: {
    messageLowercase(value) {
      return value.toLowerCase()
    }
  },

directives: {
    autofocus: {
      inserted(el) {
        el.focus()
      }
    }
  },

in template:

v-autofocus

import Component1 from '@/components/Component1'
...
export default {
	components: {
		Component
	},
}

or like this:

	components: {
  	'test': require('components/Test.vue').default
	}