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