元件 ,vuex ,路由

2021-09-24 15:08:53 字數 1043 閱讀 8978

我們在開發的時候把一些可以復用的內容封裝成元件

在vue中定義元件有兩種常見的形式

**1. 區域性元件**

const c =

區域性元件在使用的時候需要註冊

components 屬性進行註冊

**2. 全域性元件**

vue.component('', )

全域性元件定義之後可以直接使用不需要註冊

定義區域性元件, 就是乙個物件,此物件包含有一些特殊的屬性

template 模板內容

data 元件的資料, data必須是乙個function,此function有乙個物件做為返回值

methods 方法

computed 計算屬性

... 其他的等等等等,所有vue中可以使用的方法或者屬性都可以在元件內部使用

定義的元件必須只有乙個根節點

父元件向子元件傳值 使用props

子元件向父元件傳值 使用事件派發

vue 中的全域性狀態管理外掛程式。可以在整個專案中生成一棵單一的資料樹,所有的 state 狀態資料都在其上。

單項資料流

單項資料流表示資料是單項流動的。state,actions,view

vuex 核心功能

state 表示資料

actions 行為,用來處理非同步操作。執行非同步獲取的資料的時候通過 dispatach 派發乙個 action 進行觸發。執行成功之後通過 commit 乙個 mutation 改變 state

mutations 用來改變 state。我們改變資料的方法使用 commit 提交乙個 mutation 進行事項

getters 相當於 vuex 的計算屬性

vue-router是vue.js官方的路由外掛程式,它和vue.js是深度整合的,適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的,路由用於設定訪問路徑,並將路徑和元件對映起來。傳統的頁面應用,是用一些超連結來實現頁面切換和跳轉的。在vue-router單頁面應用中,則是路徑之間的切換,也就是元件的切換

vue傳參,元件之間傳參 路由傳參 vuex

詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡,通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾,在 index.js 初始化 vuex b 在 main.js 中,引入 c 例如,在我的頁面修...

vuex元件化開發 vuex狀態管理庫

vuex的核心由以下及部分組成 1 state 裡面就是存放專案中需要多元件共享的狀態 2 mutations 就是存放更改state裡狀態的方法 3 getters 從state中派生出狀態,比如將state中的某個狀態進行過濾然後獲取新的狀態 4 actions 是mutations的加強版,塔...

webpack Vue 元件 路由

安裝成生產依賴 npm install vue smain.js 開始寫vue import vue from vue var vm new vue methods 啟動服務 npm run start 報錯 執行時的版本,不能進行編譯 因為上面那種vue寫法需要編譯器,而 解決辦法 一 匯入完整版...