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