所有的頁(yè)面都在views里面寫(xiě)
所有的組件都在components里面寫(xiě)
下圖 router下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
//第一種注冊(cè)方式 導(dǎo)入組件文件
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
//全局注冊(cè)組件 在ruter 文件夾中 index.js里面
//兩種方式
const routes = [
//這是第一種 注冊(cè)組件的方式
//在文件上面 用import導(dǎo)入 組件文件 然后注冊(cè)component 中
{
path: '/',
name: 'home',
component: HomeView
},
{
//第二種 注冊(cè)全劇組件的方式
//直接 在component 中 使用import導(dǎo)入 組件文件
//一般推薦使用這種方式
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
//設(shè)置頁(yè)面 路由路徑(掛載頁(yè)面)
path: '/test',
name: 'test', //大小寫(xiě)都可以
//引入頁(yè)面文件
component: () => import('@/views/Test.vue')
},
{
path: '/father',
name: 'father',
component: () => import('@/views/Father.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
所有文件在以下頁(yè)面寫(xiě)
533b330856716a255ff27fd6e23e37f.png
f2eec6317a142712a792f49e7788894.png
在components建個(gè)小組件 組件叫 Nav.vue
<template>
<div class="nav">
</div>
</template>
<script>
</script>
<style scoped lang="less">
/*
scoped 關(guān)鍵字
作用：讓當(dāng)前頁(yè)面所寫(xiě)的css 只在當(dāng)前頁(yè)面 生效
由于 咋項(xiàng)目開(kāi)發(fā)的時(shí)候 需要將子組件 銀土父組件內(nèi)(將組件引入頁(yè)面中)
而且 每個(gè)組建或多或少都會(huì)寫(xiě)一點(diǎn)css
這個(gè)難免會(huì)引起組件之間的css沖突
所以 在style上 加上 xsoped 就能避免這種情況的發(fā)生
lang 實(shí)行 設(shè)置 css預(yù)處理器
*/
.nav{
width: 100%;
height: 60px;
background-color: green;
text-align: center;
font-size: 20px;
color:#fff;
ul{
list-style-type: none;
li{
float: left;
}
}
}
</style>
在router下 index.js引一下
import Vue from 'vue'
import VueRouter from 'vue-router'
//第一種注冊(cè)方式 導(dǎo)入組件文件
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
//全局注冊(cè)組件 在ruter 文件夾中 index.js里面
//兩種方式
const routes = [
//這是第一種 注冊(cè)組件的方式
//在文件上面 用import導(dǎo)入 組件文件 然后注冊(cè)component 中
{
path: '/',
name: 'home',
component: HomeView
},
{
//第二種 注冊(cè)全劇組件的方式
//直接 在component 中 使用import導(dǎo)入 組件文件
//一般推薦使用這種方式
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
},
{
//設(shè)置頁(yè)面 路由路徑(掛載頁(yè)面)
path: '/test',
name: 'test', //大小寫(xiě)都可以
//引入頁(yè)面文件
component: () => import('@/views/Test.vue') //test頁(yè)面
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在 views下的我們自己建立的文件起名叫 Text.vue里面寫(xiě)
<template>
<div class="test">
<!-- <h1>這個(gè)是我的測(cè)試頁(yè)面模塊</h1> -->
<h3>{{navData}}</h3>
<Nav @sendVal="getdata"/>
<div class="cont">
<div class="left">
<SideBar />
</div>
<div class="right">
<Content />
</div>
</div>
</div>
</template>
<!--
template 標(biāo)簽
根節(jié)點(diǎn)上 只能存在一個(gè)
且 template 標(biāo)簽 只能有一個(gè) 直屬子標(biāo)簽
-->
<script>
// 引入子組件 nav 的組件文件
// 組件的命名 一般都是大駝峰命名
import Nav from '@/components/Nav.vue';/////////!!!!!!!!!
export default{
name:'Test',//首字母一般大寫(xiě) 文件名也要大寫(xiě)
// 所有在 組件(頁(yè)面) 中 注冊(cè)的組件都叫局部組件(引入子組件)
// 局部組件 需要先引入 組件文件
// 然后 注冊(cè)到 components 中
components:{
Nav,
},
data(){
return{
navData:'',
}
},
methods:{
getdata(datas){
this.navData=datas;
}
}
}
</script>
<style scoped lang="less">
/* 父組件 */
/* 如果父組件的 css 影響到了 子組件 這種情況就叫 樣式穿透 */
/* 為了防止 樣式穿透 我們寫(xiě) css 的時(shí)候 就盡量 給 style 加上 scoped*/
div{
/* font-size: 40px; */
/* font-weight: bold; */
color: yellow;
}
.cont{
overflow: hidden;
.left{
float: left;
width: 20vw;
height: 100vh;
vertical-align: top;
}
.right{
width: 75vw;
height: 100vh;
float: right;
vertical-align: top;
}
}
</style>
在寫(xiě)一個(gè)SideBar側(cè)邊頁(yè)面 和 Content內(nèi)容 頁(yè)面
SideBar側(cè)邊頁(yè)面
<template>
<div class="content">這是內(nèi)容區(qū)域</div>
</template>
<script>
export default{
name:"Content",
}
</script>
<style scoped lang="less">
.content{
width: 100%;
height: 100%;
color: #000;
background-color: yellow;
font-size: 30px;
}
</style>
Content內(nèi)容 頁(yè)面
<template>
<div class="content">這是內(nèi)容區(qū)域</div>
</template>
<script>
export default{
name:"Content",
}
</script>
<style scoped lang="less">
.content{
width: 100%;
height: 100%;
color: #000;
background-color: yellow;
font-size: 30px;
}
</style>
在主頁(yè)面 Test引用一下
<template>
<div class="test">
<!-- <h1>這個(gè)是我的測(cè)試頁(yè)面模塊</h1> -->
<h3>{{navData}}</h3>
<Nav @sendVal="getdata"/>
<div class="cont">
<div class="left">
<SideBar />
</div>
<div class="right">
<Content />
</div>
</div>
</div>
</template>
<!--
template 標(biāo)簽
根節(jié)點(diǎn)上 只能存在一個(gè)
且 template 標(biāo)簽 只能有一個(gè) 直屬子標(biāo)簽
-->
<script>
// 引入子組件 nav 的組件文件
// 組件的命名 一般都是大駝峰命名
import Nav from '@/components/Nav.vue';
import SideBar from '@/components/SideBar.vue';
import Content from '@/components/Content.vue';
export default{
name:'Test',//首字母一般大寫(xiě)
// 所有在 組件(頁(yè)面) 中 注冊(cè)的組件都叫局部組件(引入子組件)
// 局部組件 需要先引入 組件文件
// 然后 注冊(cè)到 components 中
components:{
Nav,
SideBar,
Content,
},
data(){
return{
navData:'',
}
},
methods:{
getdata(datas){
this.navData=datas;
}
}
}
</script>
<style scoped lang="less">
/* 父組件 */
/* 如果父組件的 css 影響到了 子組件 這種情況就叫 樣式穿透 */
/* 為了防止 樣式穿透 我們寫(xiě) css 的時(shí)候 就盡量 給 style 加上 scoped*/
div{
/* font-size: 40px; */
/* font-weight: bold; */
color: yellow;
}
.cont{
overflow: hidden;
.left{
float: left;
width: 20vw;
height: 100vh;
vertical-align: top;
}
.right{
width: 75vw;
height: 100vh;
float: right;
vertical-align: top;
}
}
</style>
=====================================================
在寫(xiě)一個(gè)主頁(yè)面叫Father 一個(gè)child小組件 用來(lái)理解子向父?jìng)髦? 父向子傳值
<template>
<div id="father">
<h1>{{msg}}</h1>
<h2>{{data1}}</h2>
<Child :abc="fdata" :bcd="fdata1" @byval="getdata"/>
<!--子向父?jìng)髦?
父組件中 子組件的標(biāo)簽上 觸發(fā)事件
由于事件的觸發(fā) 必須綁定函數(shù)
所以 在父組件中 我們要定義一個(gè) 接受數(shù)據(jù)的函數(shù)
這個(gè)函數(shù)可以自動(dòng)獲得子組件中傳遞過(guò)來(lái) 的參數(shù)(數(shù)據(jù))
-->
</div>
</template>
<script>
import Child from '@/components/Child.vue';
export default {
name:'Father',
data(){
return {
msg:'這是父組件',
fdata:'這是父組件里面的數(shù)據(jù)',
fdata1:'這是第二條數(shù)據(jù)',
data1:'',
}
},
components:{
Child,
},
methods:{
//定義一個(gè)獲取子組件傳值的方法
getdata(datas){
//datas就是 子組件傳遞過(guò)來(lái)的值
//由于函數(shù)內(nèi)的參數(shù) 不能直接用于渲染
//所以 我們需要在父組件的data中 定義一個(gè)變量
//來(lái)接受一下子組件傳遞過(guò)來(lái)的參數(shù)
this.data1=datas;
}
}
}
</script>
<style scoped lang="less">
</style>
在寫(xiě)一個(gè)Child小組件
<template>
<div id="child">
<h1>{{msg}}</h1>
<button @click="sendData">子向父?jìng)髦?lt;/button>
<h2>{{abc}}</h2>
<h2>{{bcd}}</h2>
</div>
</template>
<script>
export default {
name:'Child',
data(){
return{
msg:'這是子組件',
cdata:'這是子組件中的數(shù)據(jù)',
}
},
// props:{
// //props用來(lái)接收符組件 傳遞過(guò)來(lái)的值
// //我們可以在props中定義變量
// //然后在父組件內(nèi) 使用子組件ptops定義的年兩傳值
// //子組件中 可以直接將這個(gè)變量當(dāng)做數(shù)據(jù)來(lái)使用
// //數(shù)據(jù)的值 就是 粗組件傳遞過(guò)來(lái) 值
// //定義變量
// abc:{
// //定義父組件傳遞過(guò)來(lái)的數(shù)據(jù)類型
// type:String,
// required:true
// //如果傳遞過(guò)來(lái)的數(shù)據(jù)類型 不匹配
// //則會(huì)根據(jù)設(shè)置的數(shù)據(jù)理性強(qiáng)制轉(zhuǎn)換
// }
// }
//不規(guī)定數(shù)據(jù)類型時(shí) 按照下面的寫(xiě)法
props:["abc","bcd"],
methods:{
sendData(){
//子向父?jìng)髦?需要用到 自定義事件 $emit
// this.$emit('自定義的事件名')
//當(dāng)自定義事件觸發(fā)時(shí) 事件所綁定的函數(shù) 就能自動(dòng)獲得事件再創(chuàng)建的時(shí)候 所寫(xiě)的參數(shù)
//一般字向父?jìng)髦? //自定義事件在子組件里面寫(xiě)
//然后在父組件中子組件標(biāo)簽上觸發(fā)這個(gè)自定義事件
//this是 vue實(shí)例化對(duì)象 //
//他不是data 但是可以直接使用 this.data中的屬性名 來(lái)使用數(shù)據(jù)
//列如 this.cdata
//this 的用法有很多
// this.$emit 自定義屬性
//等等颠焦。。晚唇。
this.$emit('byval',this.cdata);
//當(dāng)觸發(fā)自定義事件(byval)時(shí)
//就能獲取到自定義事件上所攜帶的數(shù)據(jù)(this.cdata)
}
}
}
</script>
<style>
#child{
padding: 10px;
border:5px solid #000;
width: 90%;
height: 400px;
}
</style>
