用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法...

weixin_33782386

于 2017-06-04 21:37:00 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Model-Zachary/p/6942078.html

本文介绍了一个使用Vue.js创建的应用实例，其中包括HTML结构、Vue.js的数据绑定及事件处理方式。通过一个简单的计数器示例展示了如何定义Vue实例、设置data属性、使用v-text指令显示数据以及@click指令绑定事件。

html

<div id="app">
      <span v-text="number"></span>
      <btn @click.native="add(10,$event)"></btn>
      <button @click="add(10,$event)">add</button>
</div>
<button onclick="vm.add(10)">外部用原生js调用</button>

var btn = {
        template:`<button>外部组件条用构造器内部方法</button>`
    }
        var vm = new Vue({
            el:"#app",
            data:{
                number:1
            },
            methods:{
                // 记得return 出来啊
                add:function(num,event){
                    if(num!=""){
                       this.number+=num;
                    }else{
                        this.number++;
                    }
                    // 点击的很多属性都在里面
                    console.log(event);
                }
            },
            components:{
                "btn":btn
            }
        })