Vue學習一
Vue 學習
vue 基礎
一套用於構建用戶界面的漸進式 JavaScript 框架
漸進式：Vue 可以自底向上逐層的應用
簡單應用：只需要一個輕量小巧的核心庫
複雜應用：可以引入各式各樣的 Vue 插件
特點： 1. 採用組件化模式，提高代碼復用率、且讓代碼更好維護。 2. 聲明式編碼，讓編碼人員無需直接操作 DOM，提高開發效率。 與之相對立的是命令式編碼 3. 使用虛擬 DOM+優秀的 Diff 算法，盡量復用 DOM 節點。 4. ES6 語法規範
ES6 模塊化
包管理器：npm、yarn
原型、原型鏈
數組常用方法
axios
promise
教程
初識 Vue
1.想讓Vue工作，就必須創建一個Vue實例，且要傳入一個配置對象；
2.root容器里的代碼依然符合html規範，只不過混入了一些特殊的Vue語法；
3.root容器裏面的代碼被稱為【Vue模板】；
4.Vue實例和容器是一一對應的；
5.真實開發中只有一個Vue實例，並且會配合著組件一起使用；
6.{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性
7.一旦data中的數據發生改變，那麼頁面中用到該數據的地方也會自動更新；
js 表達式：一個表達式會生成一個值，可以放在任何一個需要值的地方
(1) a
(2) a+b
(3) demo(1)
js 代碼：
(1) if(){}
(2) for(){}
模板語法
``` js
// 創建Vue實例
new Vue({
el: "#root", // el用於指定當前Vue實例為哪個容器服務，值通常為css選擇器字符串
data: {
// data中用於存儲數據，數據供el所指定的容器去使用，值我們暫時先寫成一個對象。
name: "EDG FANS"
},
});
```
Vue模板語法有2大類：
1.插值語法：
功能：用於解析標籤體內容。
寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性。
2.指令語法
功能：用於解析標籤（包裹：標籤屬性、標籤體內容、綁定事件…）
舉例：v-bind:href="xxx"或者簡寫為 :href="xxx"，xxx同樣要寫js表達式，且可以直接讀取到data中的所有屬性。
數據綁定
Vue中有兩種數據綁定的方式
1.單向綁定(v-bind)：數據只能從data流向頁面
2.雙向綁定(v-model)：數據不進能從data流向頁面，還可以從頁面流向data。
備註：
1.雙向綁定一般都應用在表單類元素上（如：inpout、select等）
2.v-model:value可以簡寫v-model，因為v-model默認收集的就是value值。
