Vue选项
Vue中methods选项
构造器里的methods选项在不同情况下有不一样的调用方式，有下面三种情况：
1.在Vue构造器内部调用方法—methods选项
点击按钮，实现数值相加的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在内部构造器中调用方法</h1>
<div id="app">
<p>数字相加结果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
</div>
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定义标签ADD'
}
}
}
var demo =new Vue({
el:'#app',
data:{
number:0
},
components:{
"btnn":butn
},
methods:{
addNumber:function(num){
this.number=this.number+num
}
}
})
</script>
</body>
</html>
运行结果：
附加：
methods传递参数：
1.在methods声明方法
2.调用方法时直接传递值
2.在自定义标签的情况下，Vue构造器内部调用方法—methods选项
自定义一个标签，并在构造器内部对其进行挂载，使用自定义标签时，需要调用native修饰器，它的作用是绑定构造器的原生事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在内部构造器中调用方法</h1>
<div id="app">
<p>数字相加结果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<!--<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>-->
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定义标签ADD'
}
}
}
var demo =new Vue({
el:'#app',
data:{
number:0
},
components:{
"btnn":butn
},
methods:{
addNumber:function(num){
this.number=this.number+num
}
}
})
</script>
</body>
</html>
运行结果：
声明对象：
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定义标签ADD'
}
}
}
在构造器里面声明：
components:{
"btnn":butn
},
用.native修饰器来调用构造器里的addNumber方法
<p><btnn @click.native="addNumber(3)"></btnn></p>
3.在Vue构造器外部调用方法—methods选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在内部构造器中调用方法</h1>
<div id="app">
<p>数字相加结果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定义标签ADD'
}
}
}
var demo =new Vue({
el:'#app',
data:{
number:0
},
components:{
"btnn":butn
},
methods:{
addNumber:function(num){
this.number=this.number+num
}
}
})
</script>
</body>
</html>
附加：
在作用域外调用构造器里面的方法时，可以用对象.方法进行调用
<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>
