一. 邂逅Vuejs 基礎

1.1. 認識Vuejs

1. let(變數)/const(常量)

2. 字串*數字=NAN

1.2. 安裝Vue

• CDN引入

  開發環境版本，包含了有幫助的命令列警告

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

  生產環境版本，優化了尺寸和速度

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  

• 下載引入

  • 開發環境 https://vuejs.org/js/vue.js
  • 生產環境 https://vuejs.org/js/vue.min.js

• npm安裝

  • 後續通過webpack和CLI的使用，我們使用該方式。

1.3. Vue的初體驗

• Hello Vuejs
  • mustache -> 體驗vue響應式
  • {}中包含了el屬性：該屬性決定了這個Vue物件掛載到哪一個元素上，很明顯，我們這裡是掛載到了id為app的元素上
  • {}中包含了data屬性：該屬性中通常會儲存一些資料
    這些資料可以是我們直接定義出來的，比如像上面這樣。
    也可能是來自網路，從伺服器載入的。
• Vue列表展示
  • v-for
  • 後面給陣列追加元素的時候, 新的元素也可以在介面中渲染出來
• Vue計數器小案例
  • 事件監聽: click -> methods

1.4. Vue中的MVVM

1.5. 建立Vue時, options可以放那些東西

• el:

  • 型別：string | HTMLElement
    作用：決定之後Vue例項會管理哪一個DOM。

• data:

  • 型別：Object | Function （元件當中data必須是一個函式）
    作用：Vue例項對應的資料物件。

• methods:

  • 型別：{ [key: string]: Function }
    作用：定義屬於Vue的一些方法，可以在其他地方呼叫，也可以在指令中使用。

• 生命週期函式

二.插值語法

• mustache語法
• v-once
  • 該指令後面不需要跟任何表示式(比如之前的v-for後面是由跟表示式的)
    該指令表示元素和元件(元件後面才會學習)只渲染一次，不會隨著資料的改變而改變。
• v-html
  • 如果我們直接通過{{}}來輸出，會將HTML程式碼也一起輸出。
    但是我們可能希望的是按照HTML格式進行解析，並且顯示對應的內容。
    如果我們希望解析出HTML展示
    可以使用v-html指令
    該指令後面往往會跟上一個string型別
    會將string的html解析出來並且進行渲染
• v-text
  • v-text作用和Mustache比較相似：都是用於將資料顯示在介面中
    v-text通常情況下，接受一個string型別
• v-pre: {{}}
  • v-pre用於跳過這個元素和它子元素的編譯過程，用於顯示原本的Mustache語法。
    比如下面的程式碼：
    第一個h2元素中的內容會被編譯解析出來對應的內容
    第二個h2元素中會直接顯示{{message}}
• v-cloak: 斗篷
  • 在某些情況下，我們瀏覽器可能會直接顯然出未編譯的Mustache標籤。

三. v-bind

• 前面我們學習的指令主要作用是將值插入到我們模板的內容當中。
  • 但是，除了內容需要動態來決定外，某些屬性我們也希望動態來繫結。
    • 比如動態繫結a元素的href屬性
    • 比如動態繫結img元素的src屬性
• 這個時候，我們可以使用v-bind指令：
  • 作用：動態繫結屬性
  • 縮寫：:
  • 預期：any (with argument) | Object (without argument)
  • 引數：attrOrProp (optional)

3.1. v-bind繫結基本屬性

• v-bind:src
• :href
• 在開發中，有哪些屬性需要動態進行繫結呢？
  還是有很多的，比如圖片的連結src、網站的連結href、動態繫結一些類、樣式等等

3.2. v-bind動態繫結class

• 繫結方式：物件語法

• 物件語法: 物件語法的含義是:class後面跟的是一個物件。

  • 用法一：直接通過{}繫結一個類

    <h2 :class="{'active': isActive}">Hello World</h2>
    

  • 用法二：也可以通過判斷，傳入多個值

    <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
    

  • 用法三：和普通的類同時存在，並不衝突

    注：如果isActive和isLine都為true，那麼會有title/active/line三個類
    <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
    

  • 用法四：如果過於複雜，可以放在一個methods或者computed中

    注：classes是一個計算屬性
    <h2 class="title" :class="classes">Hello World</h2>
    

• 繫結方式：陣列語法

• 陣列語法的含義是:class後面跟的是一個數組。

  • 陣列語法有下面這些用法：

    • 用法一：直接通過{}繫結一個類

    <h2 :class="['active']">Hello World</h2>
    

    • 用法二：也可以傳入多個值

    <h2 :class=“[‘active’, 'line']">Hello World</h2>
    

    • 用法三：和普通的類同時存在，並不衝突

    注：會有title/active/line三個類
    <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
    

    • 用法四：如果過於複雜，可以放在一個methods或者computed中

    注：classes是一個計算屬性
    <h2 class="title" :class="classes">Hello World</h2>
    

3.3. v-bind動態繫結style

• 我們可以利用v-bind:style來繫結一些CSS內聯樣式。
• 在寫CSS屬性名的時候，比如font-size
  • 我們可以使用駝峰式 (camelCase) fontSize
  • 或短橫線分隔 (kebab-case，記得用單引號括起來) ‘font-size’

• 物件語法:

  • :style="{color: currentColor, fontSize: fontSize + 'px'}"
    

  • style後面跟的是一個物件型別

    • 物件的key是CSS屬性名稱
    • 物件的value是具體賦的值，值可以來自於data中的屬性

• 陣列語法:

  • <div v-bind:style="[baseStyles, overridingStyles]"></div>
    

  • style後面跟的是一個數組型別

    • 多個值以，分割即可

四. 計算屬性

• 案例一: firstName+lastName
  • 我們知道，在模板中可以直接通過插值語法顯示一些data中的資料。
    但是在某些情況，我們可能需要對資料進行一些轉化後再顯示，或者需要將多個數據結合起來進行顯示
    比如我們有firstName和lastName兩個變數，我們需要顯示完整的名稱。
    但是如果多個地方都需要顯示完整的名稱，我們就需要寫多個{{firstName}} {{lastName}}
• 案例二: books -> price