Mvvm模式
MVVM分為model(數(shù)據(jù)模型)扳碍、view(視圖)姑食、viewmodel(視圖模型)三者窍奋。
Model:指的是js中的數(shù)據(jù)领突,如對象杈湾,數(shù)組等等
View:指的是頁面視圖
viewModel:指的是vue實例化對象
viewmodel是view和model的連接器,view和model通過viewmodel來實現(xiàn)數(shù)據(jù)綁定攘须,而viewmodel通過數(shù)據(jù)綁定和dom監(jiān)聽來實現(xiàn)的
vue如何打包上傳至服務(wù)器
修改本地項目文件index.js配置漆撞。
壓縮項目文件。
上傳壓縮后的項目到服務(wù)器
解壓項目并開啟777權(quán)限
修改服務(wù)器里的一些配置
重啟apche
vue全家桶
vue-router 路由
vuex 狀態(tài)管理工具
vue-cli 項目構(gòu)建工具
axios http請求工具(vue-resource 是vuejs的一款插件于宙,也是用來請求接口浮驳。vue2.0后不再更新,推薦使用axios接口請求工具)
組件庫
傳參
1. vue可以通過標(biāo)簽router-link跳轉(zhuǎn)傳參捞魁,通過path+路徑至会,query+參數(shù)
2. 也可以通過事件里的this.$router.push({})跳轉(zhuǎn)傳參
Vue的優(yōu)缺點
優(yōu)點:
1. 輕量級的框架
2. 雙向數(shù)據(jù)綁定
3.組件化
4.漸進(jìn)式
5. MVVM模式
缺點:
1. 缺乏高階教程
2.不支持IE8
3. 生態(tài)環(huán)境差
4.社區(qū)不大
5. 報錯不明顯,適合單人開發(fā)或者中小型項目
vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式谱俭。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)奉件,并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化
Vue的兩個核心
組件化
數(shù)據(jù)綁定
vue中父組件與子組件的傳值
父組件傳給子組件:子組件通過props方法接受數(shù)據(jù);
子組件傳給父組件:$emit方法傳遞參數(shù)
兄弟組件傳值:eventBus方法傳值宵蛀,項目大的時候建議使用vuex
vue動態(tài)路由
在 router 目錄下的 index.js 文件中,對 path 屬性加上 /:id县貌。使用 router 對象的 params.id术陶,例如:this.$route.params.id
vue的生命周期
beforeCreate 創(chuàng)建前
created 創(chuàng)建后
beforeMount 載入前
mounted 載入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 銷毀前
vue的常用指令
v-if:滿足條件則創(chuàng)建DOM元素,不滿足則刪除DOM元素
v-for:遍歷煤痕,基于數(shù)據(jù)源循環(huán)渲染元素或模板塊梧宫。
v-show:滿足條件則顯示DOM元素,不滿足則隱藏DOM元素
v-text:渲染文本(統(tǒng)統(tǒng)解析成文本)
v-html:渲染文本(能解析 HTML 標(biāo)簽)
v-on:綁定事件(可以縮寫為@)
v-bind:綁定屬性摆碉,單向數(shù)據(jù)綁定塘匣。將綁定的屬性作為JavaScript表達(dá)式計算后輸出(可以縮寫為:)
v-model:綁定屬性,雙向數(shù)據(jù)綁定巷帝。將綁定的屬性作為JavaScript表達(dá)式計算后輸出
vue的計算屬性
計算屬性是vue實例中的一個配置選項:computed
通常里面都是一個個計算相關(guān)的函數(shù)忌卤,返回最后計算出來的值。
即我們可以把這些計算的過程寫到一個計算屬性中去楞泼,然后讓它動態(tài)的計算
計算屬性一般就是用來通過其他的數(shù)據(jù)算出一個新數(shù)據(jù)驰徊,而且它有一個好處就是,它把新的數(shù)據(jù)緩存下來了现拒,當(dāng)其他的依賴數(shù)據(jù)沒有發(fā)生改變,它調(diào)用的是緩存的數(shù)據(jù)望侈,這就極大的提高了我們程序的性能印蔬。而如果寫在methods里,數(shù)據(jù)根本沒有緩存的概念脱衙,所以每次都會重新計算侥猬。
v-for的key屬性
1.使用v-for時,key屬性是必須的捐韩。
2. key屬性用來標(biāo)識當(dāng)前循環(huán)這一項的唯一身份退唠。
3. key屬性的值必須是number或string。
4.必須通過綁定的方式指定key的值荤胁。
axios是什么和它的特性
axios 是一個基于 promise 的 HTTP 庫瞧预,可以發(fā)送 get,post 請求仅政,正是由于 Vue垢油、React 的出現(xiàn),促使了 axios 輕量級庫的出現(xiàn)
特點
1.可以在瀏覽器中發(fā)送 XMLHttpRequest 請求
2.可以在 node.js 發(fā)送 http 請求
3.支持 Promise API
4.攔截請求和響應(yīng)
5.轉(zhuǎn)換請求和響應(yīng)
6.轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
7.能夠取消請求
8.自動轉(zhuǎn)化 JSON 格式
如何讓CSS只在當(dāng)前組件中起作用
將當(dāng)前組件的<style>修改為<style scoped>