狀態管理庫vuex（元件之間共享的資料）

1.定義：vuex是一個專為Vue.js應用程式開發的狀態管理庫，狀態就是指元件之間共享的資料

2.vue專案中配置狀態管理庫vuex的流程

（1）下載並引入vuex相關內容

（2）建立狀態管理庫物件store

（3）對外丟擲store物件

（4）在main.js中將store物件與當前專案相關聯

3.store狀態管理庫物件重要組成部分

（1）state：元件之間共享的資料集合

元件中獲取方法：

直接獲取this.$store.state.xxx;

使用物件展開運算子的形式獲取 ...mapState(['count','users'])

（2）getters:相當於store物件計算屬性（主要用於對state的資料進行過濾）

元件中獲取方法：

直接獲取  this.$store.getters.xxx;

使用物件展開運算子的形式獲取...mapGetter(['adults'])

（3）mutations:定義了修改state資料的同步方法（要修改的資料不是ajax非同步獲取的）

元件中如何觸發：

直接使用commit觸發this.$store.commit('xxxx',傳遞的引數)

使用物件展開運算子mapMutations形式獲取...mapMutations(['xxx','xxx'])

（4）actions:定義了修改state資料非同步方法（修改資料是Ajax獲取的非同步資料）

元件中如何觸發：

直接使用dispatch觸發this.$store.dispatch('xxx',傳遞的引數)

使用物件展開運算子mapActions的形式獲取...mapActions(['xxx','xxx'])

--------------------------------------------------------------------------------------------

 vue3合成API---setup()

1.vue3中最重要的新特性之一

作用：之前vue物件規定了我們必須把某一類資料放到某一結構，這樣在一定程度上對我們的程式碼進行了強制的分割。在vue3中我們引入了setup()合成API語法，它可以將某資料關聯的內容整合到一個部分，即使setup()中的內容越來越多，也會圍繞著大而不亂的形式開發專案。

2.setup()特點

1.setup()結構中定義的變數，函式都需要return之後才可以在模板中使用。
2.setup()是處於created生命週期之前的函式，也就是說data,methods中的資料是無法訪問到的，setup()結構中的this指向undefined
ref ：在setup中只能包裝字串或數字形式的資料（值），使其變成響應式資料 reactive ：在setup中包裝物件，陣列形式的資料（物件、陣列），使其變成響應式資料 toRefs ：可以直接在HTML模板中使用物件的屬性名當變數，不需要用. 訪問

3.setup()結構中如何使用生命週期函式

 4.vue物件的生命週期函式

（1）vue物件建立成功之前與建立成功之後：

     beforeCreate

     created

（2）vue與model繫結成功之前與繫結成功之後：

    beforeMount

    mounted

（3）view與model資料更新之前與資料更新之後：

   beforeUpdate

   updated

（4）vue物件銷燬之前與銷燬之後

   beforeDestroy

   destroyed

-----------------------------------------------------

頁面佈局

1.PC端頁面佈局

盒模型+浮動（定位）

2.移動端頁面佈局

彈性盒模型（display:flex)

3.響應式頁面

媒體查詢：根據螢幕裝置的寬度大小，引入不同的css樣式，編寫響應式

響應式框架bootstrap：