vue模板語法5

Vue基礎5

5.1 todolist案例

• sui - ui庫 + Vue + OOCSS

5.2 虛擬DOM & DIff算法

• 掌握程度： 瞭解

• 案例

  • 操做真實DOM越少越好，儘可能的去操做數據

  • 因此總結出來虛擬dom，

  • 因此Vue利用VDOM的對象模型來模擬DOM結構

  • 可是當一個頁面很複雜式，DOM結構的模擬就變的很複雜了，因此Vue使用了一個新的語法糖，叫作JSX

• jsx

  • javascript + xml 讓咱們能夠在js中書寫dom結構

      <template id="mask">
        <div class="mask-box">
          <div class="mask-bg"></div>
          <div class="mask-content">
            <p> 您肯定要離開嗎？ </p>
            <button 
              class="button button-warning button-fill pull-right"
              @click = "removeItem( activeIndex )"
            > 肯定 </button>
          </div>
        </div>
      </template>

• render

  • （ createElement => VNode ）

  • 將 jsx 經過 render 方法解析爲對象模型

• 流程

  • 第一次時

  • template模板使用jsx語法進行編輯

  • 經過render函數將jsx解析爲 vdom 對象模型

  • 將VDOM對象模型渲染爲真實DOM,而後掛載到頁面中

  • 當咱們的數據發生改變時

  • 從新生成VDOM

     

  • 總結：

    • 1. 爲何Vue中要使用VDOM?

    • 2. VDOM爲何能夠優化Vue ？

    • 3. VDOM渲染流程

    • 4. JSX語法

    • 5. render函數

5.3 生命週期 [ 王者 ]

掌握程度

1. 會寫

2. 會念

3. 明白和了解每個鉤子函數的做用和意義

特別注意：

鉤子函數不要寫成箭頭函數，箭頭函數可能會改變this指向

• 理解： 爲何要有生命週期 ？

• Vue爲了在一個組件的從建立到銷燬的一系列過程當中添加一些功能，方便咱們更好的去控制組件

• 類比： 人

  • 出生 - 哭

  • 小學 - 小學

  • 中學

  • 高中

  • 大學 / 專科

  • 工做

  • 。。。

• Vue的生命週期分爲三個階段，8個鉤子函數

  • 初始化

    • beforeCreate

    • created

    • beforeMount

    • mounted

  • 運行中

    • beforeUpdate

    • updated

  • 銷燬

    • beforeDestroy

    • destroyed