vue.js全家桶是完整的vue專案的核心組成,包括vue-router、vuex、vue-resource、vue-cli和sass樣式。 vue-cli是快速建立單頁應用的鷹架。
vue全家桶:
包含了vue-router,vuex,vue-resource,再加上建置工具vue-cli,sass樣式,這些是一個完整的vue項目的核心構成。
(學習影片分享:javascript影片教學)
概括起來就是:
1、專案建構工具;2、路由;3、狀態管理;4、http請求工具。
詳細介紹:
Vue兩大核心概念:元件化與資料驅動。
組件化:把整體拆分為各個可以重複使用的個體;
數據驅動:透過數據變化直接影響bom展示,避免dom操作。
一、Vue-cli是快速建立這個單頁應用的鷹架,
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev
二、vue-router
安裝:
npm installvue-router
如果在在一個模組化工程中使用它,必須要透過 Vue.use() 明確地安裝路由功能:
import Vue from'vue' import VueRouter from'vue-router' Vue.use(VueRouter)
另外注意在使用中,可以利用vue的過渡屬性來渲染出切換頁面的效果。
三、vuex
vuex為專為vue.js應用程式開發的狀態管理可以理解為全域的資料管理。 vuex主要由五個部分組成:state action、mutation、getters、mudle組成。
使用流程是: 元件中可以直接呼叫上面四個部分除了mudle,
1、state
類似vue 物件的data, 用來存放資料以及狀態。存放的資料為響應式,如果資料改變,那麼依賴資料的元件也會發生對應的改變。
取得state的兩種方式範例:
(1)
store.getters['getRateUserInfo']
(2)
...mapGetters({ UserInfo: 'login/UserInfo', // 用户信息 menuList: 'getMenuList', // approve 运价审批 RateUserInfo: 'getRateUserInfo' // Rate用户信息 })
注意:可以透過mapState把全域的state和getters 對應到目前元件的computed計算屬性。
2、actions
Action 透過 store.dispatch 方法觸發:action支援非同步呼叫(可以呼叫api),mutation只支援操作同步,而action提交的是mutation,而不是直接變更狀態。
例如:
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
Action 函數接受一個與store 實例具有相同方法和屬性的context 對象,因此你可以呼叫 context.commit 提交一個mutation,或透過 context.state 和 context. getters 來取得state 和getters。
實務中,我們會常用到ES2015 的 參數解構 來簡化程式碼(特別是我們需要呼叫 commit 很多次的時候):
actions:{ increment ({ commit }){ commit('increment') } }
3、mutation
#每個mutation 都有一個字串的 事件類型(type) 和一個 回呼函數(handler)。這個回呼函數就是我們實際進行狀態變更的地方,它會接受 state 作為第一個參數。
4、getters
Vuex 允許我們在 store 中定義「getter」(可以認為是 store 的計算屬性)。就像計算屬性一樣,getter 的回傳值會根據它的依賴被快取起來,且只有當它的依賴值發生了改變才會被重新計算
const getters = { getRateInitData: state => state.rateInitData, getchooseRateObj: state => state.chooseRateObj, getSearchRateParams: state => state.searchRateParams, getSearchRateResult: state => state.searchRateResult, getRateUserInfo: state => state.RateUserInfo, getMenuList: state => state.menuList, getRateQueryParams: state => state.rateQueryParams, getRateQueryResult: state => state.rateQueryResult, getCheckRateDetailParams: state => state.checkRateDetailParams, getReferenceCondition: state => state.referenceCondition, getWaitApprovalParams: state => state.waitApprovalParams }
mapGetters 輔助函數
# mapGetters 輔助函數只是將store 中的getter 對應到局部計算屬性。
四、axios
axios是一個http請求包,vue官網推薦使用axios進行http呼叫。
安裝:
npm install axios --save
範例:
(1)發送一個GET請求
//通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); }); //以上请求也可以通过这种方式来发送 axios.get('/user',{ params:{ ID:12345 } }) .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); });
(2)發送一個POST請求
axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });
相關推薦:vue.js教學
以上是vue.js全家桶是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

VueUse 是 Anthony Fu 的一个开源项目,它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合,希望对大家有所帮助!

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目,都是非常棒的项目,希望当中有您想要收藏的那一个。

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何使用VueRouter4.x?下面本篇文章就来给大家分享快速上手教程,介绍一下10分钟快速上手VueRouter4.x的方法,希望对大家有所帮助!

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具