Vue.js 组件

@{
    ViewBag.Title = "Index5";
}
@*主键*@
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="content">
     <btn @@Myclick="Youclick">1</btn>
     <btn>2</btn>
     <btn>3</btn>
</div>
<script>
    //自定义一个组件
    //btn 是自己定义的名字
    Vue.component("btn",{
        data: function () {
            return {
                count:1
            }
        },
        //插槽 <slot></slot> 它的位置在哪在该组件的内容就在那
        template: "<div><button @@click='ckicke'>按钮{{count}}</button><slot></slot></div>",
        methods: {
            ckicke: function () {
                this.count++;
                // this.$emit("自定义事件名称");在外面就可以直接使用
                //如上面的btn1的事件 
                this.$emit("Myclick");
            },
        }
    })
    //实例化一个vue
    var vm = new Vue({
        //el通过控制该标签就可以改变该标签里面全部的数据
        el: "#content",
        data: {
            msg: "hello vue.js"
        },
        methods: {
            Youclick:function () {
                alert("2542452")
            }
        }
    })
</script>