Vue.js之组件嵌套小demo

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会把其他组件也加载进来，最后渲染整个页面。

 

posted @ 2018-01-19 16:05  靳哲  阅读(8047)  评论(0)  编辑  收藏  举报