Vue instance options
- el: connect to DOM
- data: store data to be used
- methods: methods of current Vue instance
- computed: dependent properties
- watch: execute code upon data change
html:
<div id="app"> <p>Variable: {{ title }}</p> <input type="text" v-on:input="changeTitle" placeholder="Type to change title..."> <p>Function: {{ sayHello() }}</p> </div>
js:
new Vue({ el: '#app', data: { title: 'Custom Title!' }, methods: { changeTitle: function(event) { this.title = event.target.value; }, sayHello: function(event) { return this.title; } } });