vue 组件定义

全局组件定义

//注册全局组件
Vue.component('my-object',{
  template:'
{{msg}}
',
  data:function(){
    return {
      msg:'这是全局的组件'
    }
  },
  methods:{
    tanchu:function(){
      alert(this.msg);
    }
  }
});
//全局调用
var vm=new Vue({el:'.app'});
var vm2=new Vue({el:'.app2'});

局部组件定义

//局部调用
var my_app3={
    template:'
{{msg}}
',
    data:function(){
      return {
        msg:'弹出局部组件3'
      }
    },
    methods:{
      tanchu:function(){
        alert(this.msg);
      }
    }
}
var my_app4={
  template:'
{{msg}}
',
  data:function(){
    return {
      msg:'弹出局部组件4'
    }
  },
  methods:{
    tanchu:function(){
      alert(this.msg);
    }
  }
}

var vm3=new Vue({
  el:'.app3',
  components:{//局部调用组件
    'my-app3':my_app3,
    'my-app4':my_app4,
  }
});

 解析 DOM 模板

有些 HTML 元素，诸如

、
、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。

var componentTr={
  template:'#blog-tpl',
  data:function(){
    return{
      msg:'我是组件'
    }
  }
}

var vm4=new Vue({
  el:'.app4',
  components:{
    'blog-post-row':componentTr
  }
});