(三) methods中的方法(给组件绑定事件)
2018-02-15 本文已影响0人
我拥抱着我的未来
本节知识点
- methods方法
- v-on:click 也可以写成@click
简易demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<button @click="add">点击增加</button>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:1
},
methods:{
add:function(){
this.message++;
}
}
})
</script>
</html>
methods中参数的传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<button @click="add(2)">点击增加</button>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:1
},
methods:{
add:function(num){
this.message = this.message+parseInt(num)
}
}
})
</script>
</html>
组件里面调用构造器的方法
- 就是在自定义标签里面绑定事件 调用native @click.native="add(2)" 即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<btn @click.native="add(2)"></btn>
</div>
</body>
<script>
Vue.component("btn",{
template:`<button>点击我增加</button>`
})
var app = new Vue({
el:"#app",
data:{
message:1
},
methods:{
add:function(num){
this.message = this.message+parseInt(num)
}
}
})
</script>
</html>
还有一种就是在作用域外部调用构造器的方法
<button onclick="app.add(2)">外部点击增加</button>
