目錄
項目初始化
1.跟組件: App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
2.路由配置：router--index.js
只保留home主頁，刪除about頁，刪除views中About組件
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
];
3.組件：views和components文件夾
1）刪除除Home.vue以外的所有組件
2）初始化Home.vue
<template>
<div class="home">
<h1>主頁</h1>
</div>
</template>
3)刪除logo和HollWorld.vue
4)在assets中新建css、img、js三個文件夾
如果要修改頁面標簽圖標
替換public文件夾下的favicon.ico圖片文件
父組件導入子組件
三步：
1:導入
// @符號=src絕對路徑
import Nav from "@/components/Nav";
2:注冊
export default {
components:{
Nav,
}
}
3:使用
<div class="home">
<p>aa</p>
<Nav />
</div>
頁面跳轉
兩種：
1:a標簽，會刷新頁面。不使用
2:router-link標簽，不會刷新頁面。（前端還是會解析為a標簽，樣式控制還是用a）
<router-link to="/home">首頁<router-link>
組件數據局部化處理
"""
1）不管頁面組件還是小組件，都可能會被多次復用
2）復用組件的原因，其實就是復用組件的 頁面結構、頁面樣式、頁面邏輯
3）但是頁面上的數據需要區分（被復用的兩個組件數據多少是有區別的），所以組件的數據要做局部化處理
4）借助函數可以產生局部作用域的特點，為每一次復用組件產生一個獨立的作用域
語法:
data () {
return {
// 數據們
}
}
"""
子組件
<template>
<div class="beat" @click="count += 1">
{{ count }}下
</div>
</template>
<script>
export default {
name: "Beat",
// 不管是頁面組件還是小組件，都可能被復用，頁面結構與樣式都可以采用一套，但是數據一定要相互獨立
data () {
return {
count: 0
}
}
}
</script>
<style scoped>
.beat {
width: 100px;
height: 100px;
background-color: orange;
text-align: center;
line-height: 100px;
border-radius: 50%;
}
</style>
父組件
<template>
<div class="home">
<Beat/>
<Beat/>
</div>
</template>
<script>
import Beat from '@/components/Beat'
export default {
components: {
Beat,
}
}
</script>
路由邏輯跳轉
"""
1）很多時候，我們需要通過普通按鈕的邏輯，或是直接在某些邏輯中完成頁面的跳轉
2）可以通過在邏輯中用 this.$router.push() 來完成前往目標頁，兩種語法如下
this.$router.push('路徑')
this.$router.push({name: '路由名'})
3）在做移動端項目時，沒有像瀏覽器那樣的前進后台鍵，頁可以用 this.$router.go() 來完成前進后退，語法如下
前進后退：this.$router.go(正負整數)，正式代表前進，負數代表后台，數值就是步長
"""
案例
<template>
<div class="home">
<Nav/>
<h1>主頁</h1>
<button @click="goPage('/first')">前往第一頁</button>
|
<button @click="goPage('/second')">前往第二頁</button>
|
<button @click="goBack(-1)">后退一頁</button>
|
<button @click="goBack(-2)">后退二頁</button>
|
<button @click="goBack(1)">前進一頁</button>
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
methods: {
goPage(path) {
// 可以通過 this.$router 完成邏輯跳轉
this.$router.push();
},
goBack(num) {
// 一般在移動端項目上運用
this.$router.go(num);
}
},
components: {
Nav,
}
}
</script>
組件間通訊
組件間通信：
父傳子：自定義屬性
子：props: ['book']
父：<SubBox :book="父級中的數據" />
子傳父：自定義事件
父：<SubBox @recvData='recvFn' />
methods: {
recvFn (args) {}
}
子：created () { this.$emit('recvData', args) }
父傳子
"""
一、組件傳參 - 父傳子
1）在子組件內部通過props設置組件的自定義屬性
props: ['abc', 'goods']
2）在父組件渲染子組件是對自定義屬性賦值即可
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
"""
子組件
<template>
<div class="goods-box">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
name: "GoodsBox",
// 在組件內部通過props定義組件的自定義屬性
props: ['abc', 'goods'],
}
</script>
<style scoped>
.goods-box {
width: 260px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
margin: 20px;
float: left;
overflow: hidden;
text-align: center;
}
img {
width: 260px;
height: 260px;
}
</style>
父組件
<template>
<div class="goods">
<div class="main">
<!-- 在使用子組件是對自定義屬性賦值即可 -->
<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
let goods_list = [
{
img: require('@/assets/img/001.jpg'),
title: '小貓',
},
{
img: require('@/assets/img/002.jpg'),
title: '小貓兒',
},
{
img: require('@/assets/img/003.jpg'),
title: '小狗',
},
{
img: require('@/assets/img/004.jpg'),
title: '小狗兒',
},
];
export default {
name: "Goods",
data () {
return {
goods_list,
}
},
components: {
GoodsBox,
},
}
</script>
子傳父
"""
二、組件傳參 - 子傳父
前提：子組件是被父組件渲染的，所以子組件渲染要晚於父組件
1）子組件一定要滿足一個條件，才能對父組件進行傳參（某個時間節點 === 某個被激活的方法）
eg：i）子組件剛剛加載成功，給父組件傳參 ii）子組件某一個按鈕被點擊的時刻，給父組件傳參 iii）子組件要被銷毀了，給父組件傳參
2）在子組件滿足條件激活子組件的方法中，對父組件發生一個通知，並將數據攜帶處理（自定義組件事件）
<div class="goods-box" @click="boxClick"></div>
methods: {
boxClick () { this.$emit('receiveData', this.goods.title, '第二個數據', '第三個數據') }
}
3）在父組件渲染子組件時，為自定義事件綁定方法
<GoodsBox @receiveData="recFn"/>
4）在父組件實現綁定方法時，就可以拿到子組件傳參的內容（接收到了通知並在父組件中相應）
recFn(title, data2, data3) {
console.log('接收到了' + title);
}
組件標簽不能綁定系統定義的事件，沒有意義，子組件的事件都是在自己內部完成
"""
子組件
<template>
<div class="goods-box" @click="boxClick">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
</template>
<script>
export default {
props: ['abc', 'goods'],
methods: {
boxClick () {
// 通知父級 - 自定義組件的事件
this.$emit('receiveData', this.goods.title)
}
}
}
</script>
父組件
<template>
<div class="goods">
<div class="main">
<!-- 實現自定義事件，接收子組件通知的參數 -->
<GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
</div>
</div>
</template>
<script>
import GoodsBox from "../components/GoodsBox";
export default {
name: "Goods",
data () {
return {
goodsTitle: '哪個',
}
},
methods: {
recFn(title) {
console.log('接收到了' + title);
this.goodsTitle = title;
}
},
components: {
GoodsBox,
},
}
</script>
組件的生命周期鈎子
"""
一、組件的生命周期：一個組件從創建到銷毀的整個過程
二、生命周期鈎子：在一個組件生命周期中，會有很多特殊的時間節點，且往往會在特定的時間節點完成一定的邏輯，特殊的事件節點可以綁定鈎子
注：鈎子 - 提前為某個事件綁定方法，當滿足這個事件激活條件時，方法就會被調用 | 滿足特點條件被回調的綁定方法就稱之為鈎子
"""
<template>
<div class="goods">
<Nav />
</div>
</template>
<script>
import Nav from "../components/Nav";
export default {
name: "Goods",
components: {
Nav,
},
beforeCreate() {
console.log('該組件要被加載了')
},
created() {
console.log('該組件要被加載成功了')
},
updated() {
console.log('數據更新了')
},
destroyed() {
console.log('該組件銷毀了')
}
}
</script>
路由傳參
"""
路由傳參:
一、通過url正則傳遞數據
i）設置
路由: path: '/goods/detail/:pk' | '/goods/:pk/detail/:xyz'
請求: '/goods/detail/任意字符' | '/goods/任意字符/detail/任意字符'
ii）如何傳
<router-link :to="`/goods/detail/${pk}`"></router-link>
this.$router.push(`/goods/detail/${pk}`)
iii）如何取
this.$route對象是管理路由參數的，傳遞的參數會在this.$route.params字典中
this.$route.params.pk
二、通過url參數傳遞數據
i）設置
路由: path: '/goods/detail'
請求: '/goods/detail?pk=數據'
ii）如何傳
<router-link :to="`/goods/detail?pk=${pk}`"></router-link>
<router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>
this.$router.push(`/goods/detail?pk=${pk}`)
this.$router.push({name:'GoodsDetail', query:{pk: pk}})
iii）如何取
this.$route對象是管理路由參數的,傳遞的參數會在this.$route.query字典中
this.$route.query.pk
"""
第一種
配置：router/index.js
const routes = [
{
path: '/goods/detail/:pk',
name: 'GoodsDetail',
component: GoodsDetail
},
]
傳遞：GoodsBox.vue
<router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</router-link>
<!------------------- 或者 ------------------->
<div class="goods-box" @click="goDetail(goods.pk)">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
<script>
export default {
name: "GoodsBox",
methods: {
goDetail (pk) {
this.$router.push(`/goods/detail/${pk}`);
}
}
}
</script>
接收：GoodsDetail.py
<script>
export default {
name: "GoodsDetail",
data () {
return {
pk: '未知',
}
},
// 通常都是在鈎子中獲取路由傳遞的參數
created() {
this.pk = this.$route.params.pk || this.$route.query.pk;
}
}
</script>
第二種
配置：router/index.js
const routes = [
{
path: '/goods/detail',
name: 'GoodsDetail',
component: GoodsDetail
},
]
傳遞：GoodsBox.vue
<router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</router-link>
<!------------------- 或者 ------------------->
<div class="goods-box" @click="goDetail(goods.pk)">
<img :src="goods.img" alt="">
<p>{{ goods.title }}</p>
</div>
<script>
export default {
name: "GoodsBox",
methods: {
goDetail (pk) {
// this.$router.push(`/goods/detail?pk=${goods.pk}`);
// 或者
this.$router.push({
name: 'GoodsDetail',
query: {
pk,
}
});
}
}
}
</script>
接收：GoodsDetail.py
<script>
export default {
name: "GoodsDetail",
data () {
return {
pk: '未知',
}
},
// 通常都是在鈎子中獲取路由傳遞的參數
created() {
this.pk = this.$route.params.pk || this.$route.query.pk;
}
}
</script>
全局配置自定義css與js
新建文件：
global.css
html, body {
margin: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
}
settings.js 配置啟動ip端口
export default {
base_url: 'https://127.0.0.1:8000'
}
main.js
//1) 配置全局css
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css' // 資源需要用變量保存,方便以后使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css') // 資源需要用變量保存,方便以后使用
// 2) 配置自定義js設置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一個組件中的邏輯,可以通過 this.$settings訪問settings.js文件的{}數據
小結
"""
項目：
環境；node -> npm -> cnpm -> vue/cli
創建：vue create proj
配置：配置npm啟動項
項目目錄結構：依賴、環境、入口、核心代碼們
組件：
構成：template + script + style
導入：import 別名 from '路徑'
父加子：1）導入 2）注冊 3）使用
組件數據：組件化處理 data(){ return {} }
傳參：父傳子 - 自定義組件屬性 | 子傳父 - 自定義組件事件
生命周期鈎子：created() { //完成后台請求等 }
路由：
根組件中的頁面占位：<router-view />
導航欄中的頁面跳轉：<router-link to=""></router-link>
代碼中的邏輯跳轉：this.$router.push() | this.$router.go()
路由傳參：兩種方式
兩個路由對象：
this.$router - 控制路由跳轉
this.$route - 控制路由數據
"""