SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
  Vue.component("book-item",{ 
       "props":["book"], //父组件向子组件传递数据   
       template : "<li>{{book.id}}-{{book.title}}<li>" //自定义模板
   }) 
   const app  =  new Vue({  
       el:"#app",     
       data:{  //数据
          booksList: [
              { id: 1, title: "Vue Component自定义组件模板" },  
              { id: 2, title: "Webpack前端资源模块化管理和打包工具" },  
              { id: 3, title: "JavaScript语言精粹" },
              { id: 4, title: "JavaScript高级程序设计" }
          ]
       }
   });

            
<!DOCTYPE html>
<html>  
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Vue 父子组件之间的通信-模板  </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        <ul>
            <book-item v-for="book in booksList" v-bind:book="book"  v-bind:key="book"></book-item>    
        </ul> 
     </div> 
</body>
</html>