Vue學習一

於北往南發表於2021-12-07
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值。

相關文章