Vue入門

    MVVM框架：觀察者雙向繫結         model - viewModel - view         Js物件    觀察者     DOM     Vue.js         輕量級MVVM框架         資料驅動 + 元件化前端開發     核心思想：         資料驅動：DOM是資料的一種自然對映         元件化：拓展HTML元素，封裝可重用程式碼，viewModel樹與DOM樹對映

    node.js環境安裝 - npm命令安裝vue-cli腳手架工具

    Vue2.5入門         座標：index_1.html             例項、模板、掛載點             差值表示式：{{data}}             v-text、v-html區別，v-html不會進行轉義、v-text會進行轉義             事件v-on(簡寫 @)模板指令、方法vue例項中的methods中         座標：index_2.html             屬性繫結：v-bind(簡寫 :) 對屬性進行繫結 對應例項中data的屬性變數                 v-bind:title="title" 對應 Vue例項下data中的title變數             單向資料繫結：頁面展示的內容是由Vue例項中data屬性決定的，但是頁面無法決定所展示的內容。             雙向資料繫結：頁面展示內容和Vue例項中data屬性同步變動 v-model：實現資料的雙向繫結         座標：index_3.html             計算屬性：computed             偵聽器：watch         座標：index_4.html              點選按鈕控制DOM元素消失                 v-if：直接從標籤從DOM中移除                 v-show：標籤會被隱藏，即：style="display: none;" 頻繁使用建議v-show             v-for：迴圈遍歷展示列表資料                 <li v-for="(item, index) of list" :key="index">{{item}}</li>                 針對列表中元素重複問題，所以將item作為key是不合理的，於是採用index列表索引作為key值。         座標：index_5.html             1. TodoList實現             2. TodoList元件拆分：                 全域性元件：Vue.component('name', {})                     全域性元件中的引數傳遞：                         props: ['name']                 區域性元件：var obj = {}                     區域性元件需要需要在模板例項中進行註冊：                         component: {                             'name': obj                         }               3. 元件與例項之間的關係：每一個元件又是一個Vue的例項             4. 模板template：預設不宣告會採用掛載點下的所有內容             5. TodoList的刪除功能                 父元件通過屬性(props)向子元件傳遞資料：                     父元件繫結屬性:param = "value" --> 子元件接收引數:props['param']                 子元件通過釋出事件($emit)向父元件傳遞資料：                     子元件$emit(evevt, param) --> 父元件監聽@event --> 父元件通過監聽事件接收引數function(param)          Vue-cli腳手架工具：目錄結構、本地除錯、程式碼部署、熱載入、單元測試         單檔案元件：.vue檔案             <template> -- 模板 只能有一個最外層元素             <script> -- 指令碼邏輯             <style> -- 樣式         通過vue-cli腳手架工具實現todolist          全域性樣式、區域性樣式         元件檔案中：<style scoped> 限制了樣式的作用範圍：當前元件檔案，便於解耦。