学习笔记(23):Vue2.x从入门到实战-Methods Option 方法选项

立即学习:https://edu.csdn.net/course/play/6823/135332?utm_source=blogtoedu

methods Option 方法选项

先写一个按钮点击一下就加一的功能：

<div id="app">
    {{num}}<br>
    <button @click="add">ADD</button>
</div>
   

 var btncomponent={
        template:`<button>组件ADD</button>`
    }
    var app=new Vue({
        el:'#app',
        data:{
            num:1,
        },
        methods:{
            add:function () {
                this.num++
            }
        }
    })

在methods中的add方法中传参：

 var btncomponent={
        template:`<button>组件ADD</button>`
    }
    var app=new Vue({
        el:'#app',
        data:{
            num:1,
        },
        methods:{
            add:function (number) {
                if(number!=''){
                    this.num+=number;
                }else{
                    this.num++;
                }
            }
        }
    })

<button @click="add(2)">ADD</button>

构建一个组件实现点击功能：

<p><btn @click.native="add(2)"></btn></p>

 初始化一个组件

 var btncomponent={
        template:`<button>组件ADD</button>`
    }

在构造器中挂载

components:{
          'btn':btncomponent
        }

在HTML中点击事件用@click.native,其中native是给组件绑定构造器里的原生事件。

在构造器外部实现点击事件

<p><button onclick="app.add(3)">外部ADD</button></p>

在构造器外部，不能调用add()方法，我们可以调用声明的app对象中add()方法。

新手一枚，若有不足，请指教！