vue 组件定义

全局组件定义

  <!--全局-->
  <div class="app">
     <my-object></my-object>
     <my-object></my-object>
  </div>
  <div class="app2">
    <my-object></my-object>
    <my-object></my-object>
  </div>

//注册全局组件
Vue.component('my-object',{
  template:'<div>{{msg}}<input type="button" value="弹出" @click="tanchu"/></div>',
  data:function(){
    return {
      msg:'这是全局的组件'
    }
  },
  methods:{
    tanchu:function(){
      alert(this.msg);
    }
  }
});
//全局调用
var vm=new Vue({el:'.app'});
var vm2=new Vue({el:'.app2'});

局部组件定义

  <!--局部-->
  <div class="app3">
    <my-app3></my-app3>
    <my-app4></my-app4>
  </div>

//局部调用
var my_app3={
    template:'<div>{{msg}}<input type="button" value="弹出局部组件3" @click="tanchu"/></div>',
    data:function(){
      return {
        msg:'弹出局部组件3'
      }
    },
    methods:{
      tanchu:function(){
        alert(this.msg);
      }
    }
}
var my_app4={
  template:'<div>{{msg}}<input type="button" value="弹出局部组件4" @click="tanchu"/></div>',
  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 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

  <div class="app4">
    <table>
        <tr is="blog-post-row"></tr>
   </table>
  </div>

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

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