来源于技术胖的视频讲解
1.Methods方法里面的传值
这里的$event是与鼠标相关的一些事件,具体为在控制台打印的东西
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>methods options</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>methods options</h1>
<hr />
<div id="app">
{{a}}</br>
<button @click='add(5,$event)'>点我升值</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
a:1
},
methods:{
add(num,event){
console.log(event)
if(num!=undefined){
this.a+=num
}else{
this.a++
}
}
}
})
</script>
</body>
</html>
2..native
修饰符的使用:调用构造器的原始方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>methods options</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>methods options</h1>
<hr />
<div id="app">
{{a}}</br>
<btn @click.native="add(6)"></btn>
</div>
<script>
var btn={
template:`<button>组件Add升值++</button>`
}
var app = new Vue({
el:'#app',
data:{
a:1
},
components:{
btn:btn
},
methods:{
add(num,event){
if(num!=undefined){
this.a+=num
}else{
this.a++
}
}
}
})
</script>
</body>
</html>
3.作用域外面调用构造器里面的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>methods options</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>methods options</h1>
<hr />
<div id="app">
{{a}}</br>
</div>
<button onclick="app.add(10)">外部调用构造器内部的方法</button>
<script>
var app = new Vue({
el:'#app',
data:{
a:1
},
methods:{
add(num,event){
if(num!=undefined){
this.a+=num
}else{
this.a++
}
}
}
})
</script>
</body>
</html>