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> |
<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;
}
}
}); |
new Vue({
el: '#app',
data: {
title: 'Custom Title!'
},
methods: {
changeTitle: function(event) {
this.title = event.target.value;
},
sayHello: function(event) {
return this.title;
}
}
});