一访敌、關(guān)于Vue的介紹
1、 Vue 官網(wǎng)
地址：https://cn.vuejs.org/
image.png
2轰枝、Vue 內(nèi)容簡(jiǎn)介
-
響應(yīng)式系統(tǒng)（簡(jiǎn)單理解 響應(yīng)式===雙向綁定）
DOM =>HTML片段
{ } => JavaScript對(duì)象
1624790114(1).png 前端開(kāi)發(fā)庫(kù)
Vue.js (讀音捅彻、vju:/ 類似于view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架
3、為什么使用Vue
- 因?yàn)槿绻褂脗鹘y(tǒng)方式（javascript）,因?yàn)閿?shù)據(jù)和視圖全部混合在HTML中鞍陨，處理起來(lái)不容易步淹。
- 如果使用jQuery ，隨著嵌套DOM元素越來(lái)越多诚撵，修改起來(lái)也會(huì)比較麻煩贤旷。
而Vue.js 具有以下特點(diǎn)
- 輕量級(jí) （讀者容易理解，能夠快速上手）
- 數(shù)據(jù)雙向綁定砾脑。
- 指令：通過(guò)內(nèi)置的指令幼驶，將相應(yīng)的某些行為作用到DOM 上
- 組件 可以分裝可重用的代碼(減少代碼的開(kāi)發(fā))，支持熱重載（即做了修改時(shí)不會(huì)刷新頁(yè)面韧衣，只是對(duì)組件本身進(jìn)行了重載）
- 狀態(tài)管理： state->View->Action
二盅藻、安裝
1）安裝準(zhǔn)備
npm安裝方式（國(guó)內(nèi)可以更改為cnpm）
說(shuō)明:如果npm 不是內(nèi)部命令，需先安裝node.js
安裝流程如下
1畅铭、cnpm install vue
2氏淑、#安裝手腳架vue-cli
cnpm install --gloabl vue-cli
3、#創(chuàng)建一個(gè)基于webpack 模板的新項(xiàng)目
vue init webpack my-project
# 如果 webpack 未安裝則先執(zhí)行
#cnpm install -g webpack
4硕噩、#進(jìn)入項(xiàng)目安裝項(xiàng)目依賴
cnpm install
5假残、#運(yùn)行項(xiàng)目
cnpm run dev
2）安裝步驟
-
方式一： 登錄官網(wǎng)下載 Vue.js,然后通過(guò)<script> 引入
eg: <script src="js/vue.js"></script>
image.png
方式二：通過(guò)cdn 引入
原型或?qū)W習(xí) 的引入如下，生產(chǎn)環(huán)境的可以查閱官網(wǎng)炉擅。
eg:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
備注：
- Vue 不支持 IE8 及以下版本辉懒，因?yàn)?Vue 使用了 IE8 無(wú)法模擬的 ECMAScript 5 特性
三、常用指令
1谍失、什么是指令
用來(lái)擴(kuò)展html標(biāo)簽的功能眶俩。
2、常用指令介紹
- v-bind
- v-model
- v-for
- v-on
- v-if
