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会把其他组件也加载进来，最后渲染整个页面。
以上是 Vue.js之组件嵌套小demo 的全部内容， 来源链接： utcz.com/z/378752.html
