靈活的Vue組件——原來這么簡單

本篇學習目標

  1. 能夠理解vue組件概念和作用
  2. 能夠掌握封裝組件能力
  3. 能夠使用組件之間通信
  4. 能夠完成todo案例

1. vue組件

1.0_為什么用組件

以前做過一個折疊面板

在這里插入圖片描述

需求: 現在想要多個收起展開的部分

方案1: 復制代碼

  • 代碼重復 冗余
  • 不利于維護
  1. 案例用less寫的樣式, 所以下載
yarn add less less-loader@5.0.0 -D
  1. 模板標簽 - 在這個基礎上, 把要復用的多復制幾份(講解不好的地方引出解決方案)
<template><div id="app"><h3>案例：折疊面板</h3><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span></div><div class="container" v-show="isShow"><p>寒雨連江夜入吳, </p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div></div>
</template><script>
export default {data() {return {isShow: false}}
}
</script><style lang="less">
body {background-color: #ccc;#app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em;h3 {text-align: center;}.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {/* 鼠標改成手的形狀 */cursor: pointer;}}
}
</style>

  1. 上面復制3份, 發現變化一起變化

    解決方案: 不同的部分, 用不同的isShow變量

<template><div id="app"><h3>案例：折疊面板</h3><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span></div><div class="container" v-show="isShow"><p>寒雨連江夜入吳, </p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow1 = !isShow1">{{ isShow1 ? '收起' : '展開' }}</span></div><div class="container" v-show="isShow1"><p>寒雨連江夜入吳, </p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow2 = !isShow2">{{ isShow2 ? '收起' : '展開' }}</span></div><div class="container" v-show="isShow2"><p>寒雨連江夜入吳, </p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div></div>
</template><script>
export default {data() {return {isShow: false,isShow1: false,isShow2: false}}
}
</script><style lang="less">
body {background-color: #ccc;#app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em;h3 {text-align: center;}.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {/* 鼠標改成手的形狀 */cursor: pointer;}}
}
</style>

總結: 代碼非常的冗余和重復吧? 解決方案呢? 就是采用我們的組件化開發的方式, 往下看

1.1_vue組件_概念

組件是可復用的 Vue 實例, 封裝標簽, 樣式和JS代碼

組件化 ：封裝的思想，把頁面上 可重用的部分 封裝為 組件，從而方便項目的 開發 和 維護

一個頁面， 可以拆分成一個個組件，一個組件就是一個整體, 每個組件可以有自己獨立的 結構 樣式 和 行為(html, css和js)

在這里插入圖片描述

1.2_vue組件_基礎使用

目標: 每個組件都是一個獨立的個體, 代碼里體現為一個獨立的.vue文件

口訣: 哪部分標簽復用, 就把哪部分封裝到組件內

(重要): 組件內template只能有一個根標簽

(重要): 組件內data必須是一個函數, 獨立作用域

步驟:

  1. 創建組件 components/Pannel.vue

封裝標簽+樣式+js - 組件都是獨立的, 為了復用

<template><div><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開" }}</span></div><div class="container" v-show="isShow"><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></div>
</template><script>
export default {data() {return {isShow: false,};},
};
</script><style scoped>
.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;
}
.title h4 {line-height: 2;margin: 0;
}
.container {border: 1px solid #ccc;padding: 0 1em;
}
.btn {/* 鼠標改成手的形狀 */cursor: pointer;
}
</style>
  1. 注冊組件: 創建后需要注冊后再使用

全局 - 注冊使用

全局入口在main.js, 在new Vue之上注冊

語法:

import Vue from 'vue'
import 組件對象 from 'vue文件路徑'Vue.component("組件名", 組件對象)

main.js - 立即演示

// 目標: 全局注冊 (一處定義到處使用)
// 1. 創建組件 - 文件名.vue
// 2. 引入組件
import Pannel from './components/Pannel'
// 3. 全局 - 注冊組件
/*語法: Vue.component("組件名", 組件對象)
*/
Vue.component("PannelG", Pannel)

全局注冊PannelG組件名后, 就可以當做標簽在任意Vue文件中template里用

單雙標簽都可以或者小寫加-形式, 運行后, 會把這個自定義標簽當做組件解析, 使用組件里封裝的標簽替換到這個位置

<PannelG></PannelG>
<PannelG/>
<pannel-g></pannel-g>

局部 - 注冊使用

語法:

import 組件對象 from 'vue文件路徑'export default {components: {"組件名": 組件對象}
}

任意vue文件中中引入, 注冊, 使用

<template><div id="app"><h3>案例：折疊面板</h3><!-- 4. 組件名當做標簽使用 --><!-- <組件名></組件名> --><PannelG></PannelG><PannelL></PannelL></div>
</template><script>
// 目標: 局部注冊 (用的多)
// 1. 創建組件 - 文件名.vue
// 2. 引入組件
import Pannel from './components/Pannel_1'
export default {// 3. 局部 - 注冊組件/*語法: components: {"組件名": 組件對象}*/components: {PannelL: Pannel}
}
</script>

組件使用總結:

  1. (創建)封裝html+css+vue到獨立的.vue文件中
  2. (引入注冊)組件文件 => 得到組件配置對象
  3. (使用)當前頁面當做標簽使用

1.3_vue組件-scoped作用

目的: 解決多個組件樣式名相同, 沖突問題

需求: div標簽名選擇器, 設置背景色

問題: 發現組件里的div和外面的div都生效了

解決: 給Pannel.vue組件里style標簽上加scoped屬性即可

<style scoped>

在style上加入scoped屬性, 就會在此組件的標簽上加上一個隨機生成的data-v開頭的屬性

而且必須是當前組件的元素, 才會有這個自定義屬性, 才會被這個樣式作用到

在這里插入圖片描述

總結: style上加scoped, 組件內的樣式只在當前vue組件生效

2. vue組件通信

因為每個組件的變量和值都是獨立的

組件通信先暫時關注父傳子, 子傳父

父: 使用其他組件的vue文件

子: 被引入的組件(嵌入)

例如: App.vue(父) MyProduct.vue(子)

2.0_vue組件通信_父向子-props

目的: 從外面給組件內傳值, 先學會語法, 練習中在看使用場景

需求: 封裝一個商品組件MyProduct.vue - 外部傳入具體要顯示的數據, 如下圖所示
在這里插入圖片描述

步驟:

  1. 創建組件components/MyProduct.vue - 復制下面標簽

  2. 組件內在props定義變量, 用于接收外部傳入的值

  3. App.vue中引入注冊組件, 使用時, 傳入具體數據給組件顯示

components/MyProduct.vue - 準備標簽

<template><div class="my-product"><h3>標題: {{ title }}</h3><p>價格: {{ price }}元</p><p>{{ intro }}</p></div>
</template><script>
export default {props: ['title', 'price', 'intro']
}
</script><style>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

App.vue中使用并傳入數據

<template><div><!-- 目標: 父(App.vue) -> 子(MyProduct.vue) 分別傳值進入需求: 每次組件顯示不同的數據信息步驟(口訣):1. 子組件 - props - 變量 (準備接收)2. 父組件 - 傳值進去--><Product title="好吃的口水雞" price="50" intro="開業大酬賓, 全場8折"></Product><Product title="好可愛的可愛多" price="20" intro="老板不在家, 全場1折"></Product><Product title="好貴的北京烤鴨" price="290" :intro="str"></Product></div>
</template><script>
// 1. 創建組件 (.vue文件)
// 2. 引入組件
import Product from './components/MyProduct'
export default {data(){return {str: "好貴啊, 快來啊, 好吃"}},// 3. 注冊組件components: {// Product: Product // key和value變量名同名 - 簡寫Product}
}
</script><style></style>

總結: 組件封裝復用的標簽和樣式, 而具體數據要靠外面傳入

2.1_vue組件通信_父向子-配合循環

目的: 把數據循環分別傳入給組件內顯示

數據

list: [{ id: 1, proname: "超級好吃的棒棒糖", proprice: 18.8, info: '開業大酬賓, 全場8折' },{ id: 2, proname: "超級好吃的大雞腿", proprice: 34.2, info: '好吃不膩, 快來買啊' },{ id: 3, proname: "超級無敵的冰激凌", proprice: 14.2, info: '炎熱的夏天, 來個冰激凌了' },
],

正確代碼(不可復制)`

<template><div><MyProduct v-for="obj in list" :key="obj.id":title="obj.proname":price="obj.proprice":intro="obj.info"></MyProduct></div>
</template><script>
// 目標: 循環使用組件-分別傳入數據
// 1. 創建組件
// 2. 引入組件
import MyProduct from './components/MyProduct'
export default {data() {return {list: [{id: 1,proname: "超級好吃的棒棒糖",proprice: 18.8,info: "開業大酬賓, 全場8折",},{id: 2,proname: "超級好吃的大雞腿",proprice: 34.2,info: "好吃不膩, 快來買啊",},{id: 3,proname: "超級無敵的冰激凌",proprice: 14.2,info: "炎熱的夏天, 來個冰激凌了",},],};},// 3. 注冊組件components: {// MyProduct: MyProductMyProduct}
};
</script><style>
</style>

單向數據流

在vue中需要遵循單向數據流原則

  1. 父組件的數據發生了改變，子組件會自動跟著變
  2. 子組件不能直接修改父組件傳遞過來的props props是只讀的

父組件傳給子組件的是一個對象，子組件修改對象的屬性，是不會報錯的，對象是引用類型, 互相更新
在這里插入圖片描述

總結: props的值不能重新賦值, 對象引用關系屬性值改變, 互相影響

2.2_vue組件通信_單向數據流

目標: props變量本身是只讀不能重新賦值

目標：從父到子的數據流向,叫單向數據流

原因: 子組件修改, 不通知父級, 造成數據不一致性

如果第一個MyProduct.vue內自己修改商品價格為5.5, 但是App.vue里原來還記著18.8 - 數據 不一致了

所以: Vue規定props里的變量, 本身是只讀的

在這里插入圖片描述

總結: 所以props變量本身是不能重新賦值的

問題: 那我怎么才能修改子組件接收到的值呢? - 其實要影響父親, 然后數據響應式來影響兒子們

2.3_vue組件通信_子向父

目標: 從子組件把值傳出來給外面使用

需求: 課上例子, 砍價功能, 子組件點擊實現隨機砍價-1功能

在這里插入圖片描述

語法:

  • 父: @自定義事件名=“父methods函數”
  • 子: this.$emit(“自定義事件名”, 傳值) - 執行父methods里函數代碼

在這里插入圖片描述

components/MyProduct_sub.vue

<template><div class="my-product"><h3>標題: {{ title }}</h3><p>價格: {{ price }}元</p><p>{{ intro }}</p><button @click="subFn">寶刀-砍1元</button></div>
</template><script>
import eventBus from '../EventBus'
export default {props: ['index', 'title', 'price', 'intro'],methods: {subFn(){this.$emit('subprice', this.index, 1) // 子向父eventBus.$emit("send", this.index, 1) // 跨組件}}
}
</script><style>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

App.vue

<template><div><!-- 目標: 子傳父 --><!-- 1. 父組件, @自定義事件名="父methods函數" --><MyProduct v-for="(obj, ind) in list" :key="obj.id":title="obj.proname":price="obj.proprice":intro="obj.info":index="ind"@subprice="fn"></MyProduct></div>
</template><script>import MyProduct from './components/MyProduct_sub'
export default {data() {return {list: [{id: 1,proname: "超級好吃的棒棒糖",proprice: 18.8,info: "開業大酬賓, 全場8折",},{id: 2,proname: "超級好吃的大雞腿",proprice: 34.2,info: "好吃不膩, 快來買啊",},{id: 3,proname: "超級無敵的冰激凌",proprice: 14.2,info: "炎熱的夏天, 來個冰激凌了",},],};},components: {MyProduct},methods: {fn(inde, price){// 邏輯代碼this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))}}
};
</script><style>
</style>

總結: 父自定義事件和方法, 等待子組件觸發事件給方法傳值

2.4_階段小結

目標: 總結父子組件關系-通信技術口訣

組件是什么?

  • 是一個vue實例, 封裝標簽, 樣式和JS代碼

組件好處?

  • 便于復用, 易于擴展

組件通信哪幾種, 具體如何實現?

  • 父 -> 子

  • 父 <- 子

2.5_vue組件通信-EventBus

目標: 常用于跨組件通信時使用

兩個組件的關系非常的復雜，通過父子組件通訊是非常麻煩的。這時候可以使用通用的組件通訊方案：事件總線（event-bus)

在這里插入圖片描述

核心語法

EventBus/index.js- 定義事件總線bus對象

import Vue from 'vue'
// 導出空白vue對象
export default new Vue()

List.vue注冊事件 - 等待接收要砍價的值 (直接復制) - 準備兄弟頁面

<template><ul class="my-product"><li v-for="(item, index) in arr" :key="index"><span>{{ item.proname }}</span><span>{{ item.proprice }}</span></li></ul>
</template><script>
export default {props: ['arr'],
}
</script><style>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

components/MyProduct_sub.vue(帶學生主要寫觸發eventBus身上事件)

<template><div class="my-product"><h3>標題: {{ title }}</h3><p>價格: {{ price }}元</p><p>{{ intro }}</p><button @click="subFn">寶刀-砍1元</button></div>
</template><script>
import eventBus from '../EventBus'
export default {props: ['index', 'title', 'price', 'intro'],methods: {subFn(){this.$emit('subprice', this.index, 1) // 子向父eventBus.$emit("send", this.index, 1) // 跨組件}}
}
</script><style>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

List.vue正確代碼(EventBus接收方)

<template><ul class="my-product"><li v-for="(item, index) in arr" :key="index"><span>{{ item.proname }}</span><span>{{ item.proprice }}</span></li></ul>
</template><script>
// 目標: 跨組件傳值
// 1. 引入空白vue對象(EventBus)
// 2. 接收方 - $on監聽事件
import eventBus from "../EventBus";
export default {props: ["arr"],// 3. 組件創建完畢, 監聽send事件created() {eventBus.$on("send", (index, price) => {this.arr[index].proprice > 1 &&(this.arr[index].proprice = (this.arr[index].proprice - price).toFixed(2));});},
};
</script><style>
.my-product {width: 400px;padding: 20px;border: 2px solid #000;border-radius: 5px;margin: 10px;
}
</style>

總結: 空的Vue對象, 只負責$on注冊事件, emit觸發事件,一定要確保emit觸發事件, 一定要確保emit觸發事件,一定要確保on先執行

2.6_組件通訊說明

Vue的組件通訊不僅僅這三種，還有幾種方式，如果想了解可以去小編之前的文章中查看，在這里小編只為大家羅列了上面常用的三種方式

3. todo案例

完整效果演示

在這里插入圖片描述

3.0_todo案例-創建工程和組件

目標: 新建工程, 準備好所需的一切

  • 需求1: 創建新工程
  • 需求2: 分組件創建 – 準備標簽和樣式(從.md筆記復制)

分析：

? ①：初始化todo工程

? ②：創建３個組件和里面代碼(在預習資料.md復制)

? ③：把styles的樣式文件準備好(從預習資料復制)

? ④: App.vue引入注冊使用, 最外層容器類名todoapp

預先準備: 把styles的樣式文件準備好(從預習資料復制), 在App.vue引入使用

// 1.0 樣式引入
import "./styles/base.css"
import "./styles/index.css"

根據需求: 我們定義3個組件準備復用

在這里插入圖片描述

components/TodoHeader.vue - 復制標簽和類名

<template><header class="header"><h1>todos</h1><input id="toggle-all" class="toggle-all" type="checkbox" ><label for="toggle-all"></label><inputclass="new-todo"placeholder="輸入任務名稱-回車確認"autofocus/></header>
</template><script>
export default {}
</script>

components/TodoMain.vue - 復制標簽和類名

<template><ul class="todo-list"><!-- completed: 完成的類名 --><li class="completed" ><div class="view"><input class="toggle" type="checkbox" /><label>任務名</label><button class="destroy"></button></div></li></ul></template><script>
export default {
}
</script>

components/TodoFooter.vue - 復制標簽和類名

<template><footer class="footer"><span class="todo-count">剩余<strong>數量值</strong></span><ul class="filters"><li><a class="selected" href="javascript:;" >全部</a></li><li><a href="javascript:;">未完成</a></li><li><a href="javascript:;" >已完成</a></li></ul><button class="clear-completed" >清除已完成</button></footer>
</template><script>
export default {}
</script>

App.vue中引入和使用

<template><section class="todoapp"><!-- 除了駝峰, 還可以使用-轉換鏈接 --><TodoHeader></TodoHeader><TodoMain></TodoMain><TodoFooter></TodoFooter></section>
</template><script>
// 1.0 樣式引入
import "./styles/base.css"
import "./styles/index.css"import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";export default {components: {TodoHeader,TodoMain,TodoFooter,},
};
</script>

3.1_todo案例-鋪設待辦任務

目的: 把待辦任務, 展示到頁面TodoMain.vue組件上

  • 需求1: 把待辦任務, 展示到頁面TodoMain.vue組件上
  • 需求2: 關聯選中狀態, 設置相關樣式

分析：

? ①: App.vue – 準備數組傳入TodoMain.vue內

? ②: v-for循環展示數據

? ③: v-model綁定復選框選中狀態

? ④: 根據選中狀態, 設置完成劃線樣式

App.vue

 <TodoMain :arr="showArr"></TodoMain>export default {data() {return {list: [{ id: 100, name: "吃飯", isDone: true },{ id: 201, name: "睡覺", isDone: false },{ id: 103, name: "打豆豆", isDone: true },],};}
};

TodoMain.vue

<template><ul class="todo-list"><!-- 2.2 循環任務-關聯選中狀態-鋪設數據 --><!-- completed: 完成的類名 --><li :class="{completed: obj.isDone}" v-for="(obj, index) in arr" :key='obj.id'><div class="view"><input class="toggle" type="checkbox" v-model="obj.isDone"/><label>{{ obj.name }}</label><!-- 4.0 注冊點擊事件 --><button @click="delFn(index)" class="destroy"></button></div></li></ul>
</template><script>
export default {props: ["list"]
};
</script><style>
</style>

3.2_todo案例-添加任務

目標: 在頂部輸入框輸入要完成的任務名, 敲擊回車, 完成新增功能

  • 需求: 輸入任務敲擊回車, 新增待辦任務

分析：

? ①: TodoHeader.vue – 輸入框 – 鍵盤事件 – 回車按鍵

? ②: 子傳父, 把待辦任務 – App.vue中 – 加入數組list里

? ③: 原數組改變, 所有用到的地方都會更新

? ④: 輸入框為空, 提示用戶必須輸入內容

TodoHeader.vue

<template><header class="header"><h1>todos</h1><input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll"><label for="toggle-all"></label><!-- 3.0 鍵盤事件-回車按鍵3.1 輸入框 - v-model獲取值--><inputclass="new-todo"placeholder="輸入任務名稱-回車確認"autofocus@keydown.enter="downFn"v-model="task"/></header>
</template><script>
// 3. 目標 - 新增任務
export default {data(){return {task: ""}},methods: {downFn(){if (this.task.trim().length === 0) {alert("任務名不能為空");return;}// 3.2(重要) - 當前任務名字要加到list數組里// 子傳父技術this.$emit("create", this.task)this.task = ""}}
}
</script>

App.vue

<TodoHeader @create="createFn"></TodoHeader>methods: {createFn(taskName){ // 添加任務// 3.3 push到數組里let id = this.list.length == 0 ? 100 : this.list[this.list.length - 1].id + 1this.list.push({id: id,name: taskName,isDone: false})},
}

3.3_todo案例-刪除任務

目標: 實現點x, 刪除任務功能

  • 需求: 點擊任務后的x, 刪除當前這條任務

分析：

? ①: x標簽 – 點擊事件 – 傳入id區分

? ②: 子傳父, 把id傳回– App.vue中 – 刪除數組list里某個對應的對象

? ③: 原數組改變, 所有用到的地方都會更新

App.vue - 傳入自定義事件等待接收要被刪除的序號

<TodoMain :arr="showArr" @del="deleteFn"></TodoMain>methods: {deleteFn(theId){ // 刪除任務let index = this.list.findIndex(obj => obj.id === theId)this.list.splice(index, 1)},
},

TodoMain.vue - 把id傳回去實現刪除(想好數據在哪里, 就在哪里刪除)

<!-- 4.0 注冊點擊事件 -->
<button class="destroy" @click="delFn(obj.id)"></button>methods: {delFn(id){// 4.1 子傳父this.$emit('del', id)}
}

3.4_todo案例-底部統計

目的: 顯示現在任務的總數

  • 需求: 統計當前任務的條數

分析：

? ①: App.vue中 – 數組list – 傳給TodoFooter.vue

? ②: 直接在標簽上顯示 / 定義計算屬性用于顯示都可以

? ③: 原數組只要改變, 所有用到此數組的地方都會更新

TodoFooter.vue - 接收list統計直接顯示

<template><footer class="footer"><span class="todo-count">剩余<strong>{{ count }}</strong></span><ul class="filters"><li><a class="selected" href="javascript:;">全部</a></li><li><a href="javascript:;">未完成</a></li><li><a href="javascript:;">已完成</a></li></ul><button class="clear-completed">清除已完成</button></footer>
</template><script>
export default {// 5.0 props定義props: ['farr'],// 5.1 計算屬性 - 任務數量computed: {count(){return this.farr.length}},
}
</script><style></style>

App.vue - 傳入數據

<TodoFooter :farr="showArr"></TodoFooter>

3.5_todo案例-數據切換

目的: 點擊底部切換數據

  • 需求1: 點擊底部切換 – 點誰誰有邊框
  • 需求2: 對應切換不同數據顯示

分析：

? ①: TodoFooter.vue – 定義isSel – 值為all, yes, no其中一種

? ②: 多個class分別判斷誰應該有類名selected

? ③: 點擊修改isSel的值

? ④: 子傳父, 把類型isSel傳到App.vue

? ⑤: 定義計算屬性showArr, 決定從list里顯示哪些數據給TodoMain.vue和TodoFooter.vue

App.vue

<TodoFooter :farr="showArr" @changeType="typeFn"></TodoFooter><script>export default{data(){return {// ...其他省略getSel: "all" // 默認顯示全部}},methods: {// ...其他省略typeFn(str){ // 'all' 'yes' 'no' // 修改類型this.getSel = str},},// 6.5 定義showArr數組 - 通過list配合條件篩選而來computed: {showArr(){if (this.getSel === 'yes') { // 顯示已完成return this.list.filter(obj => obj.isDone === true)} else if (this.getSel === 'no') { // 顯示未完成return this.list.filter(obj => obj.isDone === false)} else {return this.list // 全部顯示}}},}
</script>

TodoFooter.vue

<template><footer class="footer"><span class="todo-count">剩余<strong>{{ count }}</strong></span><ul class="filters" @click="fn"><li><!-- 6.1 判斷誰應該有高亮樣式: 動態class6.2 用戶點擊要切換isSel里保存的值--><a :class="{selected: isSel === 'all'}" href="javascript:;" @click="isSel='all'">全部</a></li><li><a :class="{selected: isSel === 'no'}" href="javascript:;" @click="isSel='no'">未完成</a></li><li><a :class="{selected: isSel === 'yes'}" href="javascript:;" @click="isSel='yes'">已完成</a></li></ul><!-- 7. 目標: 清除已完成 --><!-- 7.0 點擊事件 --><button class="clear-completed" >清除已完成</button></footer>
</template><script>
// 5. 目標: 數量統計
export default {// 5.0 props定義props: ['farr'],// 5.1 計算屬性 - 任務數量computed: {count(){return this.farr.length}},// 6. 目標: 點誰誰亮// 6.0 變量isSeldata(){return {isSel: 'all' // 全部:'all', 已完成'yes', 未完成'no'}},methods: {fn(){ // 切換篩選條件// 6.3 子 -> 父 把類型字符串傳給App.vue this.$emit("changeType", this.isSel)}}
}
</script>

3.6_todo案例-清空已完成

目的: 點擊右下角按鈕- 把已經完成的任務清空了

  • 需求: 點擊右下角鏈接標簽, 清除已完成任務

分析：

? ①: 清空標簽 – 點擊事件

? ②: 子傳父 – App.vue – 一個清空方法

? ③: 過濾未完成的覆蓋list數組 (不考慮恢復)

App.vue - 先傳入一個自定義事件-因為得接收TodoFooter.vue里的點擊事件

<TodoFooter :farr="showArr" @changeType="typeFn" @clear="clearFun"></TodoFooter><script>methods: {// ...省略其他clearFun(){ // 清除已完成this.list = this.list.filter(obj => obj.isDone == false)}}
</script>

TodoFooter.vue

<!-- 7. 目標: 清除已完成 -->
<!-- 7.0 點擊事件 -->
<button class="clear-completed" @click="clearFn">清除已完成</button><script>methods: {clearFn(){ // 清空已完成任務// 7.1 觸發App.vue里事件對應clearFun方法this.$emit('clear')}}
</script>

3.7_todo案例-數據緩存

目的: 新增/修改狀態/刪除 后, 馬上把數據同步到瀏覽器本地存儲

  • 需求: 無論如何變化 – 都保證刷新后數據還在

分析：

? ①: App.vue – 偵聽list數組改變 – 深度

? ②: 覆蓋式存入到本地 – 注意本地只能存入JSON字符串

? ③: 刷新頁面 – list應該默認從本地取值 – 要考慮無數據情況空數組

App.vue

<script>export default {data(){return {// 8.1 默認從本地取值list: JSON.parse(localStorage.getItem('todoList')) || [],// 6.4 先中轉接收類型字符串getSel: "all" // 默認顯示全部}},// 8. 目標: 數據緩存watch: {list: {deep: true,handler(){// 8.0 只要list變化 - 覆蓋式保存到localStorage里localStorage.setItem('todoList', JSON.stringify(this.list))}}}};
</script>

3.8_todo案例-全選功能

目標: 點擊左上角v號, 可以設置一鍵完成, 再點一次取消全選

  • 需求1: 點擊全選 – 小選框受到影響
  • 需求2: 小選框都選中(手選) – 全選自動選中狀態

分析：

? ①: TodoHeader.vue – 計算屬性 - isAll

? ②: App.vue – 傳入數組list – 在isAll的set里影響小選框

? ③: isAll的get里統計小選框最后狀態, 影響isAll – 影響全選狀態

? ④: 考慮無數據情況空數組 – 全選不應該勾選

提示: 就是遍歷所有的對象, 修改他們的完成狀態屬性的值

TodoHeader.vue

<!-- 9. 目標: 全選狀態
9.0 v-model關聯全選狀態
頁面變化(勾選true, 未勾選false) -> v-model -> isAll變量
-->
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll"><script>export default {// ...其他省略// 9.1 定義計算屬性computed: {isAll: {set(checked){ // 只有true / false// 9.3 影響數組里每個小選框綁定的isDone屬性this.arr.forEach(obj => obj.isDone = checked)},get(){// 9.4 小選框統計狀態 -> 全選框// 9.5 如果沒有數據, 直接返回false-不要讓全選勾選狀態return this.arr.length !== 0 && this.arr.every(obj => obj.isDone === true)}}},}
</script>

App.vue

<TodoHeader :arr="list" @create="createFn"></TodoHeader>

今日總結

  • 組件概念和作用以及創建和使用方式

  • 掌握組件通信包括父向子, 子向父傳值

  • 熟悉EventBus的使用和原理

面試題

1. 請說下封裝 vue 組件的過程

? 首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、復用性等問題。

  • 分析需求：確定業務需求，把頁面中可以復用的結構，樣式以及功能，單獨抽離成一個組件，實現復用

  • 具體步驟：Vue.component 或者在new Vue配置項components中, 定義組件名, 可以在props中接受給組件傳的參數和值，子組件修改好數據后，想把數據傳遞給父組件。可以采用$emit方法。

2. Vue組件如何進行傳值的

父向子 -> props定義變量 -> 父在使用組件用屬性給props變量傳值

子向父 -> $emit觸發父的事件 -> 父在使用組件用@自定義事件名=父的方法 (子把值帶出來)

3. Vue 組件 data 為什么必須是函數

每個組件都是 Vue 的實例, 為了獨立作用域, 不讓變量污染別人的變量

4. 講一下組件的命名規范

? 給組件命名有兩種方式(在Vue.Component/components時)，一種是使用鏈式命名"my-component"，一種是使用大駝峰命名"MyComponent"，

? 因為要遵循W3C規范中的自定義組件名 (字母全小寫且必須包含一個連字符)，避免和當前以及未來的 HTML 元素相沖突

附加練習_1.喜歡小狗狗嗎

目標: 封裝Dog組件, 用來復用顯示圖片和標題的

效果:

在這里插入圖片描述

正確答案(先不要看)

components/practise/Dog1.vue

<template><div class="my_div"><imgsrc="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg"alt=""/><p>這是一個孤獨可憐的狗</p></div>
</template><script>
export default {};
</script><style>
.my_div {width: 200px;border: 1px solid black;text-align: center;float: left;
}.my_div img {width: 100%;height: 200px;
}
</style>

在App.vue中使用

<template><div><Dog></Dog><Dog/></div>
</template><script>
import Dog from '@/components/practise/Dog1'
export default {components: {Dog}
}
</script><style></style>

總結: 重復部分封裝成組件, 然后注冊使用

附加練習_2.點擊文字變色

目標: 修改Dog組件, 實現組件內點擊變色

提示: 文字在組件內, 所以事件和方法都該在組件內-獨立

圖示:

在這里插入圖片描述

正確代碼(先不要看)

components/practise/Dog2.vue

<template><div class="my_div"><imgsrc="https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg"alt=""/><p :style="{backgroundColor: colorStr}" @click="btn">這是一個孤獨可憐的狗</p></div>
</template><script>
export default {data(){return {colorStr: ""}},methods: {btn(){this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`}}
};
</script><style>
.my_div {width: 200px;border: 1px solid black;text-align: center;float: left;
}.my_div img {width: 100%;height: 200px;
}
</style>

附加練習_3.賣狗啦

目標: 把數據循環用組件顯示鋪設

數據:

[{dogImgUrl:"http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",dogName: "博美",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",dogName: "泰迪",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",dogName: "金毛",},{dogImgUrl:"https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",dogName: "哈士奇",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813435580&di=946902d419c3643e33a0c9113fc8d780&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fd0522aynh3x_ori_3.jpg",dogName: "阿拉斯加",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813454815&di=ecdd2ebf479568453d704dffacdfa12c&imgtype=0&src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F150408%2F1-15040Q10J5B0.jpg",dogName: "薩摩耶",},
]

圖示:

在這里插入圖片描述

正確代碼(不可復制)

components/practise/Dog3.vue

<template><div class="my_div"><img :src="imgurl" alt="" /><p :style="{ backgroundColor: colorStr }" @click="btn">{{ dogname }}</p></div>
</template><script>
export default {props: ["imgurl", "dogname"],data() {return {colorStr: "",};},methods: {btn() {this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;},},
};
</script><style scoped>
.my_div {width: 200px;border: 1px solid black;text-align: center;float: left;
}.my_div img {width: 100%;height: 200px;
}
</style>

App.vue引入使用把數據循環傳給組件顯示

<template><div><Dog v-for="(obj, index) in arr":key="index":imgurl="obj.dogImgUrl":dogname="obj.dogName"></Dog></div>
</template><script>
import Dog from '@/components/practise/Dog3'
export default {data() {return {// 1. 準備數據arr: [{dogImgUrl:"http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",dogName: "博美",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",dogName: "泰迪",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",dogName: "金毛",},{dogImgUrl:"https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",dogName: "哈士奇",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813435580&di=946902d419c3643e33a0c9113fc8d780&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fd0522aynh3x_ori_3.jpg",dogName: "阿拉斯加",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813454815&di=ecdd2ebf479568453d704dffacdfa12c&imgtype=0&src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F150408%2F1-15040Q10J5B0.jpg",dogName: "薩摩耶",},],};},components: {Dog}
};
</script>

附加練習_4.選擇喜歡的狗

目標: 用戶點擊狗狗的名字, 在右側列表顯示一次名字

效果:

在這里插入圖片描述

正確代碼(不可復制)

components/practise/Dog4.vue

<template><div class="my_div"><img :src="imgurl" alt="" /><p :style="{ backgroundColor: colorStr }" @click="btn">{{ dogname }}</p></div>
</template><script>
export default {props: ["imgurl", "dogname"],data() {return {colorStr: "",};},methods: {btn() {this.colorStr = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;// 補充: 觸發父級事件this.$emit("love", this.dogname);},},
};
</script><style scoped>
.my_div {width: 200px;border: 1px solid black;text-align: center;float: left;
}.my_div img {width: 100%;height: 200px;
}
</style>

App.vue

<template><div><Dogv-for="(obj, index) in arr":key="index":imgurl="obj.dogImgUrl":dogname="obj.dogName"@love="fn"></Dog><hr /><p>顯示喜歡的狗:</p><ul><li v-for="(item, index) in loveArr" :key="index">{{ item }}</li></ul></div>
</template><script>
import Dog from "@/components/practise/Dog4";
export default {data() {return {// 1. 準備數據arr: [{dogImgUrl:"http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",dogName: "博美",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",dogName: "泰迪",},{dogImgUrl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",dogName: "金毛",},{dogImgUrl:"https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",dogName: "哈士奇",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813435580&di=946902d419c3643e33a0c9113fc8d780&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fd0522aynh3x_ori_3.jpg",dogName: "阿拉斯加",},{dogImgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813454815&di=ecdd2ebf479568453d704dffacdfa12c&imgtype=0&src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F150408%2F1-15040Q10J5B0.jpg",dogName: "薩摩耶",},],loveArr: []};},components: {Dog,},methods: {fn(dogName) {this.loveArr.push(dogName)},},
};
</script><style >
</style>

附加練習_5.賣完了

目標: 完成圖示的賣完了效果

需求:

  • 如果為0了后面顯示賣光了!!!
  • 如果庫存有值, 后面就不顯示賣光了!!!
  • 如果庫存有值, 累計商品總數量

要求: 一行是一個組件進行復用, 這里要求必須用table>tr (也就是封裝tr組件)

組件使用注意: html正常解析, table>tr或者select>option, 雖然vue渲染頁面可以自定義, 但是還需要遵循瀏覽器的標簽關系

  • table>tr中不能直接使用組件, 需要在tr的is屬性指定組件名
  • select>option 也不能封裝options組件, 需要在option的is屬性指定組件名

效果演示:
在這里插入圖片描述

vue實例data里的數組如下

goodsArr: [{count: 0,goodsName: "Watermelon"}, {count: 0,goodsName: "Banana"}, {count: 0,goodsName: "Orange"}, {count: 0,goodsName: "Pineapple"}, {count: 0,goodsName: "Strawberry"}
]

正確代碼(不可復制)

components/practise/MyTr.vue

<template><tr><td><input type="number" v-model.number="obj['count']"/></td><td><span>{{ obj["goodsName"] }}</span></td><td><span v-show="obj['count'] == 0">賣光了!!!</span></td></tr>
</template><script>
export default {// 傳入對象有風險, 但是如果是一對一關系可以傳入對象-直接修改對象里的值影響外部效果props: ["obj"]
};
</script><style>
</style>

App.vue使用

<template><div><table><!-- 2. 使用tr組件, 傳入需要的數據 --><tris="myTr"v-for="(item, index) in goodsArr":key="index":obj="item":index="index"></tr></table><p>All Number:{{ sumNumber }}</p></div>
</template><script>
import MyTr from '@/components/practise/MyTr'
export default {data() {return {goodsArr: [{count: 0,goodsName: "Watermelon",},{count: 0,goodsName: "Banana",},{count: 0,goodsName: "Orange",},{count: 0,goodsName: "Pineapple",},{count: 0,goodsName: "Strawberry",},],};},components: {MyTr},computed: {sumNumber(){return this.goodsArr.reduce((sum, obj) => sum += obj.count * 1, 0)}}
};
</script><style>
</style>

附加練習_6.買點好吃的

目標: 商品列表顯示一下, 然后封裝組件實現增加減少功能并在最后統計總價

要求: 商品名, 增加 數量, 減少這一條封裝成組件使用

效果演示:
在這里插入圖片描述

數據:

[{"shopName": "可比克薯片","price": 5.5,"count": 0},{"shopName": "草莓醬","price": 3.5,"count": 0},{"shopName": "紅燒肉","price": 55,"count": 0},{"shopName": "方便面","price": 12,"count": 0}
]

正確代碼(不可復制)

components/practise/Food.vue

<template><div><span>{{ goodsname }}</span><button @click="add(ind)">+</button><span> {{ count }} </span><button @click="sec(ind)">-</button></div>
</template><script>
export default {props: ['goodsname', 'ind', 'count'], // 商品名,索引,數量methods: {add(ind){this.$emit('addE', ind)},sec(ind){this.$emit("secE", ind)}}
};
</script>

App.vue

<template><div><p>商品清單如下:</p><div v-for="(obj, index) in shopData" :key="index">{{ obj.shopName }} -- {{ obj.price }}元/份</div><p>請選擇購買數量:</p><Foodv-for="(obj, index) in shopData":key="index + ' '":goodsname="obj.shopName":ind="index":count="obj.count"@addE="addFn"@secE="secFn"></Food><p>總價為: {{ allPrice }}</p></div>
</template><script>
import Food from "@/components/practise/Food";
export default {data() {return {// 商品數據shopData: [{shopName: "可比克薯片",price: 5.5,count: 0,},{shopName: "草莓醬",price: 3.5,count: 0,},{shopName: "紅燒肉",price: 55,count: 0,},{shopName: "方便面",price: 12,count: 0,},],};},components: {Food,},methods: {addFn(ind){this.shopData[ind].count++},secFn(ind){this.shopData[ind].count > 0 && this.shopData[ind].count--}},computed: {allPrice(){return this.shopData.reduce((sum, obj) => sum += obj.count * obj.price, 0)}}
};
</script>

寫在最后

?原創不易，還希望各位大佬支持一下\textcolor{blue}{原創不易，還希望各位大佬支持一下}原創不易，還希望各位大佬支持一下

👍 點贊，你的認可是我創作的動力！\textcolor{green}{點贊，你的認可是我創作的動力！}點贊，你的認可是我創作的動力！

?? 收藏，你的青睞是我努力的方向！\textcolor{green}{收藏，你的青睞是我努力的方向！}收藏，你的青睞是我努力的方向！

?? 評論，你的意見是我進步的財富！\textcolor{green}{評論，你的意見是我進步的財富！}評論，你的意見是我進步的財富！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248519.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248519.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248519.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

FOI冬令營 Day 3

FOI冬令營 Day 3

目錄 T1、簽到題&#xff08;sort&#xff09;傳送門 Code T2、送分題&#xff08;queue&#xff09;傳送門 Code T3、簡單題&#xff08;game&#xff09;傳送門 Code 咕咕咕T1、簽到題&#xff08;sort&#xff09; 傳送門 原題&#xff1a;LOJ 2767 Code //2019/2/14 //50…
閱讀更多...
委托事件觀察者模式

委托事件觀察者模式

委托的默認返回類型&#xff1a;void 聲明委托的關鍵字&#xff1a;delegate 多播委托&#xff1a;將多個方法綁定到一個委托變量 在調用方法時 可以執行綁定的方法 委托的描述&#xff1a; 委托是一個類 定義了方法的類型 可以將方法當做另一個方法進行傳遞 委托并不等同于方法…
閱讀更多...
贏在CSDN——名利兼收

贏在CSDN——名利兼收

文章目錄&#x1f30a; 相識CSDN&#x1f30a; 益于CSDN流量將成為你我的亮點我的專欄收益到賬啦學習會員助你拿捏專欄更多曝光自己的機會CSDN問答為你準備的零花錢&#x1f30a; 忠于CSDN&#x1f30a; 相識CSDN 小編自注冊CSDN至今兩年有余&#xff0c;記得初衷也僅僅是為了…
閱讀更多...
124angular1實現無限表單（僅供自己看）

124angular1實現無限表單（僅供自己看）

//將本行的內容對象作為參數&#xff0c;傳給點擊函數&#xff0c;點擊函數向后臺發送請求&#xff0c;把獲取的返回值作為內容對象的一個屬性。 (function (angular) {angular.module(myModule, []).directive(treeModel, [$compile, function ($compile) {return {restrict: …
閱讀更多...
了解 Vue SSR 這一篇足以

了解 Vue SSR 這一篇足以

文章目錄1 - 什么是服務器端渲染&#xff1f;1.1 新建server文件夾1.2 生成一個node項目1.3 安裝express1.4 服務端渲染小案例1.5 運行查看效果1.6 打開瀏覽器1.7 右鍵查看源代碼2 - 什么是客戶端渲染&#xff1f;2.1 新建client文件夾2.2 生成一個vue項目2.3 安裝依賴并啟動2.…
閱讀更多...
3 數組中的重復數字

3 數組中的重復數字

題目描述 在一個長度為 n 的數組里的所有數字都在 0 到 n-1 的范圍內。數組中某些數字是重復的&#xff0c;但不知道有幾個數字是重復的&#xff0c;也不知道每個數字重復幾次。請找出數組中任意一個重復的數字。 Input: {2, 3, 1, 0, 2, 5}Output: 2 思路 給出了長度為n且數組…
閱讀更多...
小型軟件項目開發流程探討

小型軟件項目開發流程探討

一&#xff0e;導言國內很多項目都是小型項目, 參與人員少(兩到五個人), 要快速交付(一兩個月) . 要成功完成這種項目, 除了使用成熟且被團隊成員熟練使用的技術之外, 有一個良好的開發流程, 也是很必要的. 二&#xff0e;小型軟件項目開發流程下圖是我對小型軟件項目開發流程…
閱讀更多...
Vue2的核心原理剖析

Vue2的核心原理剖析

? 用了這么久的Vue2了你真的 知其然&#xff0c;知其所以然么&#xff1f; ?今天博主就為大家帶來一篇對Vue核心功能的部分剖析\textcolor{pink}{今天博主就為大家帶來一篇對Vue核心功能的部分剖析}今天博主就為大家帶來一篇對Vue核心功能的部分剖析 ?后續文章會用更多小案…
閱讀更多...
Scrum之成敗——從自身案例說起，僅供參考

Scrum之成敗——從自身案例說起，僅供參考

從07年中初次接觸Scrum的概念到其中幾年項目中逐漸實踐CI、TDD&#xff0c;到親自掌握項目實踐Scrum近一年&#xff0c;最終我們放棄了Scrum這個框架和所謂的“自組織”。原因為何&#xff1f; 1.成員放棄了Scrum所“賦予”的“權利” 比如領用任務、評估工作量、自組織協作、決…
閱讀更多...
sanic官方文檔解析之下載和Configuration

sanic官方文檔解析之下載和Configuration

1,sanic框架是做什么的? sanic的官方網址:https://sanic.readthedocs.io/en/latest/sanic框架是一個類似于flask框架的在Python3.5以上版本的文本服務器,他能夠快速的編寫,它是通過驚人的開發效率完成開發,希望通過這篇文章得到激勵sanic框架的理念是:簡單,高效 sanic的應用如…
閱讀更多...
首秀 Express 框架

首秀 Express 框架

文章目錄框架特性express的使用初始化項目&#xff1a;下載框架模塊&#xff1a;測試代碼&#xff1a;總結以上代碼&#xff1a;請求處理的中間件概念&#xff1a;中間件——app.use基本用法&#xff1a;next的用法app.use中間件的應用路由的保護網站維護公告自定義404&#xf…
閱讀更多...
云原生技能樹測評

云原生技能樹測評

前言 利用午休后的10多分鐘時間&#xff0c;看了看APP的技能樹板塊&#xff0c;簡單的提出幾個看法&#xff01; 答題過程 可以設置為闖關類型&#xff0c;答對一道后可以進入下一關&#xff0c;或者是一個章節為一關&#xff0c;讓大家一直有一種期待 回答錯誤數量 可以…
閱讀更多...
原型和閉包

原型和閉包

原型和閉包 一切皆對象 一切皆對象&#xff08;類型值除外&#xff09; undefined, number, string, boolean屬于簡單的值類型 函數、數組、對象、new Number(10)都是對象。他們都是引用類型 Null是基本數據類型&#xff0c;不是引用數據類型 基本數據類型的值就是它本身的值&a…
閱讀更多...
python 排序算法

python 排序算法

冒泡排序&#xff1a; 1 #coding:utf-82 3 比較相鄰的元素&#xff0c;每一趟交換后&#xff0c;最后的元素是最大的。4 第一次比較n-1次&#xff0c;第二次比較n-2次。。。第n-1次比較1次5 進行n-1次冒泡次數6 最優時間復雜度O(n),最壞時間復雜度O(n^2)7 8 9 def bubble_sort…
閱讀更多...
獎勵 CSDN 社區的領軍人物

獎勵 CSDN 社區的領軍人物

設計動機 領軍人物榜單在這里&#xff1a;https://blog.csdn.net/rank/list/role CSDN 是中國 IT 人士學習、成長、成功的平臺&#xff0c; 這個平臺有很多博主&#xff0c; 博主寫的很多優秀文章獲得了粉絲。 那么&#xff0c; 博主獲得粉絲之后&#xff0c; 博主以粉絲為榮…
閱讀更多...
一文教會你何為重繪、回流？

一文教會你何為重繪、回流？

文章目錄css圖層圖層創建的條件重繪(Repaint)回流觸發重繪的屬性觸發回流的屬性常見的觸發回流的操作優化方案requestAnimationFrame----請求動畫幀寫在最后學習目標&#xff1a; 了解前端Dom代碼、css樣式、js邏輯代碼到瀏覽器展現過程了解什么是圖層了解重繪與回流了解前端層…
閱讀更多...
mockjs中的方法(三)

mockjs中的方法(三)

1&#xff09;Mock.mock()&#xff1b; Mock.mock( url, type, template, function(options) ); 其中 url 是定義我們要請求的 url 地址&#xff0c;以便于我們請求的時候 mock 去進行攔截&#xff0c;知道我們要去請求那個值&#xff1b;但是它也是可選的&#xff0c;而且格式…
閱讀更多...
js函數、js對象的這些點你真的懂嗎？

js函數、js對象的這些點你真的懂嗎？

本篇學習目標 ?了解函數&#xff08;高級&#xff09;原型原型鏈概念\textcolor{green}{了解函數&#xff08;高級&#xff09;原型原型鏈概念}了解函數&#xff08;高級&#xff09;原型原型鏈概念 ?掌握函數作用域\textcolor{green}{掌握函數作用域}掌握函數作用域 ?掌握…
閱讀更多...
前端處理跨域的幾種方式

前端處理跨域的幾種方式

什么是跨域&#xff1f; 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源&#xff0c;這里跨域是廣義的。 廣義的跨域&#xff1a; 1、資源跳轉&#xff1a;A鏈接、重定向、表單提交 2、資源嵌入&#xff1a; <link>、<script>、<img>、<frame&g…
閱讀更多...
程序員必知的緩存套圖

程序員必知的緩存套圖

文章目錄1. 線程與進程1.1 進程:1.2. 線程:1.3. 關系2. 瀏覽器內核模塊組成4. 事件循環機制5. 緩存5.1. 緩存理解5.2. 緩存分類5.3. 緩存使用示意圖5.4. 緩存中的header參數1. 線程與進程 1.1 進程: 進程是計算機中的程序關于某數據集合上的一次運行活動&#xff0c;是系統進…
閱讀更多...
最新文章

Copyright @ 2022~2023