vue template syntax 5

Vue 5 basis

5.1 todolist Case

• sui - ui Hyogo + Vue + OOCSS

5.2 virtual DOM & DIff algorithm

• Mastery: to know

• Case

  • DOM operations real as possible, as much as possible to operational data

  • So summed up virtual dom,

  • Therefore Vue using VDOM object model to simulate the DOM structure

  • But when a page is very complex, analog DOM structure becomes very complicated, so the Vue uses a new syntax sugar, called JSX

• JSX

  • javascript + xml dom structure so that we can write in the js

      <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 ）

  • The object model jsx resolved to render method

• Process

  • First time

  • template to edit the template using the syntax jsx

  • By render function jsx resolved to vdom Object Model

  • The VDOM object model rendering real DOM, then mount to the page

  • When our data changes

  • Rebuild VDOM

     

  • to sum up:

    • 1. Why Vue to be used VDOM?

    • 2. Why VDOM can optimize Vue?

    • 3. VDOM rendering process

    • 4. JSX grammar

    • 5. render function

5.3 Life Cycle [King]

Mastery

1. Write

2. Kainen

3. Understand the role and significance and understanding of each hook function

pay attention:

Arrow hook function instead of writing function, the function may change this arrow pointing

• Understand: Why should the life cycle?

• Vue to add some functionality to create a series of processes from destruction in a component, to help us better control components

• Analogy: People

  • Birth - cry

  • Elementary - Elementary School

  • High school

  • Senior middle school

  • University / college

  • jobs

  • 。。。

• Vue's life cycle is divided into three stages, eight hook function

  • initialization

    • beforeCreate

    • created

    • beforeMount

    • mounted

  • Operation

    • beforeUpdate

    • updated

  • destroy

    • beforeDestroy

    • destroyed