<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Methods Option Demo</title>
</head>
<body>
<h1>Methods Option Demo</h1>
<hr>
<div id="app">
{{a}}
<!-- $event用于传入Vue的事件对象 -->
<p><button @click.native="add(1,$event)">add</button></p>
<p>
<!-- .native后缀修饰符开发中很常用 -->
<btn v-on:click.native="add(2)"></btn>
</p>
</div>
<button οnclick="app.add(3)">外部访问构造器里的方法</button>
<script type="text/javascript">
var btn = {
template: '<button>外部组件</button>'
}
var app = new Vue({
el: '#app',
data: {
a: 1
},
methods: {
add: function(num,event) {
if(num){
this.a += num;
// return this.a += num;
}else{
this.a++;
}
console.log(event);
}
},
components: {
"btn": btn
}
})
</script>
</body>
</html>