框架(framework):有著自己的語法特點、都有對應的各個模塊。
庫(library):專注于一點。
框架的好處:
提到代碼的質量,開發(fā)速度
提高代碼的復用率
降低模塊之間的耦合度(高內(nèi)聚低耦合)
UI:user interface
GUI:graphical user interface
CLI:command line interface
API:application interface
思維模式的轉換:從操作DOM的思維模式 切換到以數(shù)據(jù)為主。
是一個漸進式的構建用戶界面的js框架
小到的簡單的表單處理,大到復雜的數(shù)據(jù)操作比較頻繁的單頁面應用程序
方便閱讀的中文文檔
容易上手 (學習曲線比較緩和)
體積小
基于組件化的開發(fā)方式
代碼的可讀性、可維護性得到了提高
工作方式:可以通過豐富的指令擴展模板,可以通過各種各樣的插件來增強功能
方式1
全局安裝 vue-cli
$ npm install --global vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
安裝依賴
$ cd my-project
$ npm install
$ npm run dev
方式2
直接引入對應的js文件
mustache(胡子)/interpolation(插值表達式)
語法:
<any>{{表達式}}</any>
作用:將表達式執(zhí)行的結果 輸出當調(diào)用元素的innerHTML中;還可以將數(shù)據(jù)綁定到視圖。
基本語法1:
<any v-for="tmp in array"></any>
基本語法2:
<any v-for="(value,index) in array"></any>
作用:在遍歷array這個集合時,將臨時變量保存在tmp中,創(chuàng)建多個any標簽。
語法:
<any v-if="表達式"></any>
<any v-else-if="表達式"></any>
<any v-else="表達式"></any>
作用:根據(jù)表達式執(zhí)行結果的真假,來決定是否要將當前的這個元素,掛載到DOM樹。
語法:
<any v-on:eventName="handleEvent"></any>
作用:給指定的元素 將handleEvent的方法綁定給指定eventName事件。