<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>methods方法选项</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="add(2,$event)">add</button> <!--点击事件 调用函数方法，传值 实参-->
<p><btn @click.native="add(5)"></btn></p> <!--native意思是调用构造器里的原始方法-->
</div>
<button onclick="app.add(10)">作用域外点击</button> <!--作用域外原生方法调用 vue里的函数方法-->
</body>
<script type="text/javascript">
var btntmp={
template:`<button>点我加</button>` //模版
}
var app=new Vue({
el:"#app",
data:{
num:0,
},
components:{ // 组件
'btn':btntmp // btn组件名 btntmp模版变量 在外定义了
},
methods:{
add:function(numb,event){ // 函数方法 形参
console.log(event); //鼠标操作的属性
if(num=!''){
this.num+=numb; // 左加右付给左
}else{
this.num++ // num 自己 加一
}
}
}
})
</script>
</html>
