<div id="my_view">
Name: <input type="text" v-model="name">
<button v-on:click="myClickHandler">Say Hello</button>
</div>
var myModel = {
name: "Ashley",
age: 24,
friends: [
{ name: "Bob", age: 21 },
{ name: "Jane", age: 20 },
{ name: "Anna", age: 29 }
]
};
var myViewModel = new Vue({
el: '#my_view',
data: myModel,
// A click handler inside methods
methods: {
myClickHandler: function(e) {
// "this" here refers to the model
alert("Hello " + this.name);
}
}
});
This Pen doesn't use any external CSS resources.