vue项目核心代码2

创建page-home-index.vue

<template>
	<div class="myvue-home">
		<!--{{msg}}-->
		<Top></Top>
		<div class="btn">
			登录/注册
		</div>
		<ul class="list">
			<li>投递</li>
			<li>面试</li>
			<li>邀约</li>
			<li>收藏</li>
		</ul>
		<Bottom  :fMessage="active"></Bottom>
	</div>
</template>

<script>
	import Top from '@/components/top'
	import Bottom from '@/components/bottom'
	export default {
	  name: 'MyVue',
	  data () {
	    return {
	      msg: 'home页面',
	      active:'active'
	    }
	  },
	   components: {
	   		Top,Bottom
	   }
	}
</script>

<style>
*{
	padding: 0;
	margin: 0;
}
ul{
	list-style: none;
}
.myvue-home .btn{
	margin:30px auto;
	width: 120px;
	height: 50px;
	background-color: green;
	line-height: 50px;
	color: #fff;
}
.myvue-home ul.list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}
.myvue-home ul.list li{
	width: 40%;
	background-color: green;
	height: 100px;
	background-color: green;
	line-height: 100px;
	color: #fff;
	margin-bottom: 10px;
}


</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import MyVue from '@/components/MyVue'
import Index from '@/page/index/index'
import Reg from '@/page/reg/index'
import Home from '@/page/home/index'

Vue.use(Router)

export default new Router({
  routes: [
  	{
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/Home',
      name: 'Home',
      component: Home
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
  	{
      path: '/MyVue',
      name: 'MyVue',
      component: MyVue
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

components -- bottom.vue

<template>
	<div class="myvue-bottom">
		<ul>
			<li>职位</li>
			<li>搜索</li>
			<li v-bind:class="fMessage">我的{{fMessage}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:['fMessage'],
	  name: 'MyVue',
	  data () {
	    return {
	      msg: '拉勾网'
	    }
	  },
	  created(){
	  		console.log(this.fMessage);
        }
	}
</script>

<style>
.myvue-bottom{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background:green;
	text-align: center;
	color: #fff;
	position: fixed;
	bottom: 0px;
	left: 0;
}

.myvue-bottom ul{
	display: flex;
	background-color: #ccc;
}
.myvue-bottom ul li{
	width: 33.3%;
	height: 50px;
	line-height: 50px;
	color: #333;
}

.myvue-bottom ul li.active{
	background-color: green;
	color: greenyellow;
}
</style>

components -- top.vue

<template>
	<div class="myvue-top">
		{{msg}}
	</div>
</template>

<script>
	export default {
	  name: 'MyVue',
	  data () {
	    return {
	      msg: '拉勾网'
	    }
	  }
	}
</script>

<style>
.myvue-top{
	height: 50px;
	line-height: 50px;
	background:green;
	text-align: center;
	color: #fff;
}
</style>

page-index-index.vue

<template>
	<div class="indexvue">
		<div class="top">
			<a href="#">登陆拉钩</a>
			<a href="javascript:;" @click='myclick'>注册</a>
		</div>
		<div class="center">
			<input type="text" v-model="name" value="" />
			<input type="text" v-model="password" value="" />
			<button @click='myclick2'>登陆</button>
		</div>
		<div class="bottom">
			<a href="">手机登陆</a>
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'MyVue',
	  data () {
	    return {
	      msg: 'nihaoya',
	      name:'xxx',
	      password:'yyy'
	    }
	  },
	   created(){
                console.log(456)
            },
	   methods:{
           myclick(){
           	console.log(123);
           	this.$router.push('/Reg');
           },
           myclick2(){
           	this.$router.push('/Home');
           }
        },
	}
</script>

<style>
	.indexvue .top{
		display: flex;
		justify-content: space-between;
		padding:0 20px;
		font-size: 25px;
	}
	.indexvue .top a:nth-child(1){
		color: #000;
	}
	.indexvue .top a:nth-child(2){
		color: green;
	}
	
	.indexvue .center input{
		display: block;
		width: 100%;
		height: 50px;
		border:none;
		border-bottom:1px solid #ccc;
	}
	.indexvue .center button{
		display: block;
		width: 100%;
		height: 50px;
		background: green;
		color: #fff;
		font-size: 30px;
		margin-top: 10px;
	}
	
	.indexvue .bottom{
		text-align: left;
		margin-top: 250px;
	}
</style>