【vue】跟著老馬學習vue-數據雙向綁定

學習了node.js教程，只能說是有了一定的了解，之前也了解了webpack和es6的核心內容，也看過vue2.0的官網教程，并結合視頻看過項目，但是理解和運用仍然存在很多問題，接下來的一段時間，跟著老馬學習vue

學習鏈接：http://aicoder.com/vue/preview/all.html#1

vue最大的特點就在于它的雙向綁定，是一個前端的雙向綁定類的框架。

一說到vue我們就應該立刻想到以下幾部分：1.數據雙向綁定；2.列表渲染、條件渲染；3.事件處理；4.生命周期；5.組件化開發；6.路由；7.vuex

我們也將根據這7個部分進行學習。

1.數據雙向綁定

徹底變革了之前Dom的開發方式。?所謂雙向是指：HTML標簽數據綁定到 Vue對象，另外反方向數據也是綁定的。通俗點說就是，Vue對象的改變會直接影響到HTML的標簽的變化，而且標簽的變化也會反過來影響Vue對象的屬性的變化（通過文本框輸入）。

綁定文本、綁定屬性（簡寫）、顯示原生html、樣式綁定（綁定樣式對象、綁定樣式數組、內聯樣式綁定）、計算屬性、自動響應的實現

2.列表渲染、條件渲染

v-if、v-else、v-for、Template循環渲染多標簽

3.事件處理

v-on（縮寫@）、添加methods屬性、事件修飾符（.stop、..prevent、.capture、.self、.once）、按鍵修飾符（keyup.enter）

4.vue實例、生命周期

data、computed、methods、watch（deep: true）、el

開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue的全局API：Vue.nextTick、Vue.set、Vue.compile

5.組件化開發

Vue.extend、Vue.component

6.路由

1）?引入vue和vue-router包

2）定義路由跳轉的組件

3）定義路由規則對象（routes 、path、component）

4）?創建Vue對象，并加載上面創建的路由對象（router）

5）在模板中編寫路由跳轉鏈接（使用 router-link 組件來導航、通過傳入 `to` 屬性指定鏈接）

this.$route.params.參數名

7.綜合實戰

vue init webpack my-project

cd my-project

npm install

npm run dev

8.Vuex

集中式存儲管理應用的所有組件的狀態