一、vue以及生態圈(技術棧)
vue技術棧:
官方： vue vue-router vuex
第三方:
axios(網路通訊) elementui（pc） mintui(mobile) vux(mobile)
weex(實現native)
。。。。
1、基礎語法
指令:v-for="(tmp,index) in list"
v-if=「expression」
: v-bind 屬性繫結
@ v-on 事件繫結
v-model 表單元素 雙向資料繫結(
view->model 將表單操作的結果 繫結到資料
model->view 將資料繫結到表單元素
)屬性:
vue.component(』』,)
2、元件
封裝的好處？
①提高**的復用率
②提到了開發速度
③提高了**的可維護性
元件：是可被反覆使用的，帶有特定功能的檢視
建立:sfc(single file component) **.vue
使用:路由訪問 login–》login.vue
作為子元件
假設main.vue需要呼叫header.vue:
import header from 『…』
//宣告為全域性
vue.component(『my-header』,header)
//宣告為區域性
vue.component(『main』,
})3、通訊
元件間通訊
props down (父–》子)
傳送：
接收:
vue.component('my-list',)
events up (子---》父)
event bus
refparent
npm i axios
import axios from 『axios』
axios.get/post(url).then(()=>{})
4、路由
(路由的本質:建立一種對映關係)
基礎路由的搭建
①安裝核心外掛程式 vue-router，啟用
vue.use(vuerouter)
②準備乙個容器
③完成路由陣列的定義和呼叫
//路由詞典(路由陣列)由多個路由物件構成的陣列
const myroutes = [,]
new vue()
})跳轉
this.$router.push(』/main』)
傳參：① 配置接收方的路由
/main —> /main/:id
② 傳送
this.rou
ter.
push
(′/m
ain/
3′)③
接收th
is
.router.push('/main/3') ③ 接收 this.
router
.pus
h(′/
main
/3′)
③接收t
his.
route.params.id
路由巢狀
假設a需要巢狀b、c
①給a指定乙個容器
②設定子路由…]
}路由守衛
router.beforeeach()
}路由懶載入
const foo = () => import(』./foo.vue』)
const router = new vuerouter(
]})
vuex集中式管理資料
state：管理資料
getters：獲取資料
mutations: 修改的資料
actions:非同步
modules:模組化
什麼是vue:
漸進式的 基於mvvm的 執行資料操作的 純前端js框架
漸進式: 可以逐步在專案中使用vue框架
可以和現有傳統技術很好的結合
全家桶: 如果要使用一種框架，就只能使用框架的所有技術。不能和其它技術混搭。
基於mvvm？
執行資料操作的: 終極簡化對網頁執行的資料操作: 增刪改
純前端js框架: 不要nodejs，僅靠瀏覽器就可執行專案
mvvm模式:
傳統的dom:
html: 只負責靜態內容，不會自動變化
css: 只負責靜態樣式，不會自動變化
js: 即要負責內容的變化，又要負責樣式的變化
問題: 1. 步驟繁瑣且重複: 查詢，繫結，遍歷，替換，拼接字串
2. 不便於維護：jquery中，如果頁面結構或內容發生變化，則js中選擇器和html片段都要跟著修改
現代框架: mvvm模式
介面/檢視view: 包括靜態的html+css
資料模型model: 頁面中所需的所有資料的整體
控制器/檢視模型viewmodel: 自動將資料模型model中的變數，填充到介面中所需的位置
總結: 什麼是m v vm模式: 頁面需要什麼，模型就定義什麼。
檢視模型會自動將模型中的資料填充到頁面中。且模型資料發生變化時，檢視模型會自動更新頁面。
優點: 1. 沒有任何重複的**
2. 介面和模型松耦合，介面變化，不需要修改模型，甚至不需要修改viewmodel控制器。——及其便於維護
viewmode的原理:
當new vue將模型物件和頁面元素繫結在一起時，內部自動構建兩大子系統:
響應系統:
自動將data中的每個變數變成訪問器屬性
今後，所有對變數的讀寫，自動都被訪問器接管，由訪問器屬性代為執行。
比如：修改變數的值時，自動呼叫變數的set方法，修改實際的變數值。
而每個變數的set方法，當變數發生改變時，都會自動傳送通知：***變數的值變成***了
通知是交給另一子系統，虛擬dom樹的
vue學習 筆記
v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...
vue學習筆記
vue學習筆記 從7月2日到7月4日三天的學習成果 一 vue的起步 及配置環境 3 使用vue cli快速搭建vue專案vue init webpack 為專案名 建立成功需要等待一段時間 4 輸入npm run dev編譯專案，成功後根據提示或根據修改的埠號登陸 lacalhost 5.看到下圖...
vue 學習筆記
1.v if v show區別 v if 是 真正 的條件渲染，因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假，則什麼也不做 直到條件第一次變為真時，才會開始渲染條件塊。相比之下，v show 就簡單得多 不管初始條件是什麼，元素總...