Methods Option 方法选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>methods Option</title>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{a}}
<p><button @click="add(2,$event)">add</button></p>
<!--.native修饰器来调用构造器里的add方法-->
<p><btn @click.native="add(3)"></btn></p>
<p><button onclick="app.add(4)" >外部调用构造器里的方法</button></p>
</div>
<script type="text/javascript">
//add按钮封装成组件
var btn={
template:`<button>组件Add</button>`
}
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
//传递的$event参数都是关于你点击鼠标的一些事件和属性。
add:function(num,evnet){
if(num !=''){
this.a=this.a+num;
}else {
this.a++;
}
console.log("evnet:"+evnet);
}
},
components:{
"btn":btn
}
})
</script>
</body>
</html>