1.框架和庫的區(qū)別
框架(framework):有著自己的語法特點觅够、都有對應(yīng)的各個模塊喘先。
庫(library):專注于一點红且。
框架的好處:
提到代碼的質(zhì)量,開發(fā)速度
提高代碼的復(fù)用率
降低模塊之間的耦合度(高內(nèi)聚低耦合)
UI:user interface
GUI:graphical user interface
CLI:command line interface
API:application interface
思維模式的轉(zhuǎn)換:從操作DOM的思維模式 切換到以數(shù)據(jù)為主。
2.Vue概述
1、what
是一個漸進式的構(gòu)建用戶界面的js框架
2希俩、where
小到的簡單的表單處理颜武,大到復(fù)雜的數(shù)據(jù)操作比較頻繁的單頁面應(yīng)用程序
3盒刚、why
1.方便閱讀的中文文檔
2.容易上手 (學(xué)習(xí)曲線比較緩和)
3.體積小
4.基于組件化的開發(fā)方式
5.代碼的可讀性籍铁、可維護性得到了提高
4、how
工作方式:可以通過豐富的指令擴展模板,可以通過各種各樣的插件來增強功能
搭建環(huán)境
方法一:
全局安裝 vue-cli
創(chuàng)建一個基于webpack模板的新項目
安裝依賴
方法二:
直接引入對應(yīng)的js文件
3.Vue中基礎(chǔ)知識
1、雙花括號
mustache(胡子)/interpolation(插值表達式)
語法:
作用:將表達式執(zhí)行的結(jié)果 輸出當(dāng)調(diào)用元素的innerHTML中;還可以將數(shù)據(jù)綁定到視圖。
2如暖、指令-循環(huán)指令
基本語法1:
基本語法2:
作用:在遍歷array這個集合時妄迁,將臨時變量保存在tmp中,創(chuàng)建多個any標(biāo)簽黔州。
3牲蜀、指令-選擇指令
語法:
作用:根據(jù)表達式執(zhí)行結(jié)果的真假,來決定是否要將當(dāng)前的這個元素 掛載到DOM樹
4、指令-事件綁定
語法:
作用:給指定的元素 將handleEvent的方法綁定給指定eventName事件甩骏。
5、指令-屬性綁定
基本語法:
補充熟掂,支持簡寫:
作用:將表達式執(zhí)行的結(jié)果綁定到當(dāng)前元素的myProp屬性缎浇。
動態(tài)樣式綁定:
動態(tài)樣式類綁定:
6、指令-雙向數(shù)據(jù)綁定
方向1:數(shù)據(jù)綁定到視圖
方向2:將視圖中(表單元素)用戶操作的結(jié)果綁定到數(shù)據(jù)
基本語法: