Vue.js之组件嵌套的小demo项目
第一步：初始化一个wabpack项目，这里不在复述。
第二步：在components文件夹下新建Header.vue Footer.vue和Users.vue三个组件文件
Header.vue文件：
1 <!--1模板：html结构 --> 2 <template> 3 <header> 4 <h1>{{title}}</h1> 5 </header> 6 </template> 7 8 <!--2行为：处理逻辑 --> 9 <script> 10 export default { 11 name: 'app-header', 12 data () { 13 return { 14 title:"Vue.js Demo" 15 } 16 } 17 } 18 </script> 19 20 <!--3样式：解决样式 --> 21 <style scoped> 22 header{ 23 background: pink; 24 padding: 10px; 25 } 26 h1{ 27 color: #222; 28 text-align: center; 29 } 30 </style>
Users.vue文件：
1 <template> 2 <div class="users"> 3 <ul> 4 <li v-for="user in users" 5 @click="user.show = !user.show"> 6 <h2 >{{user.name}}</h2> 7 <h3 v-show="user.show">{{user.Position}}</h3> 8 </li> 9 </ul> 10 </div> 11 </template> 12 13 <script> 14 export default { 15 name: 'users', 16 data () { 17 return { 18 users:[ 19 {name:"Henry",Position:"Java工程师",show:false}, 20 {name:"Lily",Position:"Java工程师",show:false}, 21 {name:"KangKang",Position:"Java工程师",show:false}, 22 {name:"Maria",Position:"Java工程师",show:false}, 23 {name:"Sally",Position:"Java工程师",show:false}, 24 {name:"Elinna",Position:"Java工程师",show:false} 25 ] 26 } 27 } 28 } 29 </script> 30 31 <style scoped> 32 users{ 33 width: 100%; 34 max-width: 1200px; 35 margin:40px auto; 36 padding: 0 20px; 37 box-sizing: border-box; 38 } 39 ul{ 40 display: flex; //所有li在一行 41 flex-wrap: wrap; //所有li在容器里，不会超出容器 42 list-style-type: none; 43 padding: 0; //去掉浏览器自带的padding值 44 } 45 li{ 46 flex-grow: 1; //如果一行之有一个会撑满整行，如果有两个，两个撑满整行 47 flex-basis: 200px; //每一个li200px的宽度 48 text-align: center; 49 padding: 30px; 50 border: 1px solid #666; 51 margin: 10px; 52 } 53 </style>
Footer.vue文件：
1 <template> 2 <footer> 3 <p>{{copyright}}</p> 4 </footer> 5 </template> 6 7 8 <script> 9 export default { 10 data () { 11 return { 12 copyright:"Copyright 2018 Vue Demo" 13 14 } 15 } 16 } 17 </script> 18 19 <style scoped> 20 footer{ 21 background: #666; 22 padding: 6px; 23 } 24 footer p{ 25 color: pink; 26 text-align: center; 27 } 28 </style>
第三步：编写App.vue文件：在此文件中要在script中通过import引用刚才编写的三个组件，然后通过组件的别名使用组件。
App.vue文件：项目入口文件中引入的组件
1 <!--模板--> 2 <template> 3 <div id="app"> 4 <app-header></app-header> 5 <users></users> 6 <app-footer></app-footer> 7 </div> 8 </template> 9 10 <!--行为--> 11 <script> 12 //局部注册组件 13 import Users from './components/Users' 14 import Header from './components/Header' 15 import Footer from './components/Footer' 16 17 export default { 18 name: 'App', 19 components:{ 20 "users":Users, 21 "app-header":Header, 22 "app-footer":Footer 23 } 24 } 25 </script> 26 27 <!--样式--> 28 <style > 29 </style>
html文件：项目的入口文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>vue-playlist</title> 7 </head> 8 <body> 9 <div id="app"></div> 10 </body> 11 </html>
main.js文件：项目的入口js文件
1 import Vue from 'vue' 2 import App from './App' 3 4 Vue.config.productionTip = false 5 new Vue({ 6 el: '#app', 7 components: { App }, 8 template: '<App/>' 9 })
然后启动项目，就能看到生成一个组件嵌套形成的小demo
项目加载流程：
index.html是入口文件，加载html时候会调用main.js文件，main.js文件会实例化vue组件App.vue，然后App.vue会把其他组件也加载进来，最后渲染整个页面。