<link  rel="stylesheet"><link  rel="stylesheet"><script type="text/javascript" src="../js/vue-2.5.16.js"></script>

 <div class="container">   <!--動態數據綁定-->   <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>   <!--靜態數據綁定-->   <my-info data="操作有誤"></my-info> </div>

<script type="text/javascript">   Vue.component('my-info',{   template:`     <transition leave-active-class="animated fadeOutUpBig">     <div       v-show='isShow'        style="background:orange;          color:#fff;          padding:.5em 1em;           border-radius:5px;           margin:.5em 0;           position:relative">       <i class="fa fa-info-circle"></i>       <span>{{data}}</span>       <i @click='close' class="fa fa-close"         style="position:absolute;            right: 1em;           cursor:pointer"></i>     </div>     </transition>     `,     //注意：data必須是一個函數     data(){       return {       isShow:true       }     },     props:['data'],     methods:{       close(){       //子組件向父組件發射事件       this.$emit('close');       //關閉消息框       this.isShow = false;       }     },   });   new Vue({     el:'.container',     data:{       msg:'添加失敗！'     },     methods:{       closeHandler(){       console.log('關閉了');       }    }  }); </script>

<div id="app">  <!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件-->  <my-component></my-component></div><script>  // 1.創建一個組件構造器  var myComponent = Vue.extend({    template: '<div>這是我的全局組件</div>'  })    // 2.注冊組件，并指定組件的標簽，組件的HTML標簽為<my-component>  Vue.component('my-component', myComponent)    new Vue({    el: '#app'  });</script> 

<div id="app">   <!--該組件不會被渲染，并且報錯-->   <my-component></my-component> </div> <div id="app1">   <my-component></my-component> </div> <script>   new Vue({     el: "#app"   });   Vue.component("my-component", {     template: "<h1>這是我的全局組件</h1>"   });   new Vue({    el: "#app1"   }) </script>  

<div class="father">   <child msg="hello!" data="yes!"></child> </div> Vue.component('child',{  props:['msg',"data"],  template:`<p>{{msg}}</p>       <p>{{data}}</p>       `})

<div class="father">   <child v-bind:msg="val"></child> </div> Vue.component('child',{  props:["msg"],  template:` <p>{{msg}}</p>`})new Vue({  el:'.father,  data:{     val:'添加失??！'  }})