Vue Pit not fully pointed North (1)

1.Vuejs Components

Vuejs Build Components use

Vue.component (' ComponentName ', {/*component*/});

Note here that components need to be registered and reused, which means:

Vue.component (' mine ', {
           template: ' #mineTpl ',
           props:[' name ', ' title ', ' City ', ' content '
        });
 var v=new Vue ({
      el: ' #vueInstance ',
      data:{
          name: ' Zhang ',
          title: ' This is the title ', City
         : ' Beijing ' ,
         content: ' These are some desc about Blog '
     }
});

2. Directive Keep-alive

The implication of keep-alive is that if you leave a switch in memory, you can keep its state or avoid rendering it again. To do this, you can add a keep-alive directive

	
<component:is= ' Curremtview ' keep-alive></component>

3. How to make CSS work in the current component only

Each Vue component can define its own css,js, and if you want the CSS that is written in the component to work only on the current component, simply write the scoped in the style, namely:

	
<style scoped></style>

4.vuejs loop Insert Picture

<div class= "Bio-slide" v-for= "Item in Items" >   
    
</div>

5. Bind value to a dynamic property of the Vue instance

<input 
	type= "checkbox"
	v-model= "toggle"
	v-bind:true-value= "a"
	v-bind:false-value= "B" >
<p>{{toggle}}</p>

6. Fragment Instance

The following situations make the instance a fragment instance: the template contains multiple top-level elements. The template contains only plain text. The template contains only other components (other components may be a fragment instance). A template contains only one element instruction, such as <router-view> for <partial> or Vue-router. The template root node has a Process Control directive, such as V-if or v-for. 7. Routing Nesting

Routing nesting renders other components into the component, rather than making the entire page jump, Router-view itself renders the component to that location and, in the case of a page jump, renders the page to the root component, written at the start configuration route:

var App = vue.extend ({root});
Router.start (App, ' #app ');

8. Implement multiple methods of displaying different text according to different conditions

Computed with computed attributes

<div id= "Test" >
  <input type= "text" v-model= "Inputvalue" >
  
 
9.Vuejs in change detection problem 
1. Detection array 
Same as ' example1.items[0] = ... ', but can trigger view update
example1.items. $set (0, {childmsg: ' changed! '})
 
or $remove.

	
This.items. $remove (item);
 
2. Testing Objects 
can detect the addition or deletion of object properties

Using $set (Key,value)

VM. $set (' B ', 2)
 
Do not use ' object.assign (This.someobject, {a:1, b:2}) '
This.someobject = Object.assign ({}, This.someobject, {a:1, b : 2})
 
10. About Vuejs page Flicker 
V-cloak (recommended for global use)

[V-cloak] {
    display:none;
}
 
11. About the use of V-model during the v-for cycle 
Sometimes need to loop generation input, with V-model binding, using Vuejs to manipulate it, at this time we can write an array in V-model selected[$index], so that different input can be bound to different v-model, and thus operate them separately. transition Animation in 12.vuejs

. zoom-transition{
      width:60%;
      Height:auto;
      Position:absolute;
      left:50%;
      top:50%;
      Transform:translate ( -50%,-50%);
      -webkit-transition:all 3s ease;
      Transition:all 3s ease;
  Zoom-enter,. zoom-leave{
      width:150px;
      Height:auto;
      Position:absolute;
      left:20px;
      top:20px;
      Transform:translate (0,0);
  }
 
Animation in the fixed time to pay attention to the upper and lower corresponding, what is above, what is below, are going to change,