methods方法选项 

<!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>

 

posted @ 2018-02-28 14:02  Jinsuo  阅读(268)  评论(0)    收藏  举报