Vue knowledge consolidation

Special characteristics (key, ref, is)

key：

The child has the same parent element must have a unique key. Duplicate key will cause rendering errors. 

The most common use case is a combination of v - for : 

<ul> 
  <li V- for = " Item in items " : Key = " item.id " > ... </ li> 
</ ul>

ref：

// use `this $ refs` to obtain elements and components. 
  <Div the above mentioned id = " App " > 
    <div> 
      <the INPUT of the type = " the Button " value = " get element content " @ the Click = " getElement " /> 
      <! - - use ref acquisition element -> 
      <h1 of ref = " Myh1 " > this is a big Hl </ h1 of> 

      <HR> 
      <-! used ref obtain subassembly -> 
      <MYCOM ref = " MYCOM " > </my-com>
    </div>
  </div>

  <Script> 
    Vue.component ( ' My-COM ' , { 
      Template: ' <H5> This is a sub-assembly </ H5> ' , 
      Data () { 
        return { 
          name: ' subassembly ' 
        } 
      } 
    }); 

    // Create Vue instance, to give the ViewModel 
    var VM = new new Vue ({ 
      EL: ' #app ' , 
      Data: {}, 
      Methods: { 
        getElement () { 
          // . to get $ refs element by the this 
          the console.log ( the this. $ refs.myh1.innerText);
           // acquiring $ refs component through the this. 
          the console.log ( the this $ refs.mycom.name);. 
        } 
      } 
    });
   </ Script>

is: binding keep-alive, the cache can make the switching tab

// Use `: is` different properties to switch sub-assembly, and add animation to switch 
a component instance defined method:
   // login assembly 
    const Login = Vue.extend ({ 
      Template:` <div> 
        <H3> Log assembly < / H3> 
      </ div> ` 
    }); 
    Vue.component ( ' Login ' , Login); 

    // register assembly 
    const Register = Vue.extend ({ 
      Template:` <div> 
        <H3> register component </ H3> 
      < / div> ` 
    }); 
    Vue.component ( ' Register ' , Register);

    // create Vue instance, get ViewModel 
    var= VM new new Vue ({ 
      EL: ' #app ' , 
      Data: {comName: ' Login ' }, 
      Methods: {} 
    }); 

2 . Use `component` labels to refer to a component by`: IS `attribute specify which components to load:
   <div the above mentioned id = " App " > 
    <a href= "#" @click.prevent= "comName='login'"> Log </a> 
    <a href = " # " @ click.prevent = " comName = 'Register' " >Sign </a> 
    <HR>Sign </a> 
    <Transition the MODE ="out-in">
      <component :is="comName"></component>
    </transition>
  </div>