vueピット不完全指北(1)

1.Vuejsコンポーネント
vuejs構築コンポーネントの使用

Vue.component('componentName',{ /*component*/ })；

ここで注意したいのは、コンポーネントを登録してから使用することです.つまり、

Vue.component('mine',{
           template:'#mineTpl',
           props:['name','title','city','content']
        });
 var v=new Vue({
      el:'#vueInstance',
      data:{
          name:'zhang',
          title:'this is title',
         city:'Beijing',
         content:'these are some desc about Blog'
     }
});

2.指令keep-alive
keep-aliveは、切り替えたコンポーネントをメモリに保持する場合、その状態を保持したり、再レンダリングを回避したりすることを意味します.このためkeep-alive命令を追加できます

	
<component :is='curremtView' keep-alive>component>

3.cssを現在のコンポーネントでのみ使用する方法
各vueコンポーネントでは、それぞれのcss、jsを定義できます.コンポーネント内に書かれたcssが現在のコンポーネントにのみ機能する場合は、styleにscopedを書き込むだけです.すなわち、次のようにします.

	
<style scoped>style>

4.vuejsループ挿入画像

class="bio-slide" v-for="item in items">   
    <img :src="item.image">
div> 
   
   
  
5.  value Vue          
 
  
"checkbox"
	v-model="toggle"
	v-bind:true-value="a"
	v-bind:false-value="b">
<p>{{toggle}}p>
  
6.クリップの 
 の  、インスタンスは   なインスタンスになります.
テンプレートには、  のトップレベル  が まれています.
  
テンプレートには、  のテキストのみが まれます.
  
テンプレートには、 のコンポーネントのみが まれます( のコンポーネントはクリップのインスタンスである   があります).
テンプレートは、またはvue-routerののような    のみを む.
  
テンプレートルートノードには、v-ifまたはv-forのようなフロー    がある.
  
7.ルーティングネスト
ルーティングネストは、ページ  のジャンプではなく、 のコンポーネントをそのコンポーネントにレンダリングします.router-view  は、コンポーネントをその  にレンダリングします.ページジャンプを うには、ページをルートコンポーネントにレンダリングし、ルーティングの  を  するときに のように きます.
var App = Vue.extend({ root });
router.start(App,'#app');
  
8.  の なる  に って なる  を  する  を  する
    computedで
"test">
  <input type="text" v-model="inputValue">
  <h1>{{changeVaule}}h1>
div>
new Vue({
  el:'#test',
  data:{
    changeVaule:'123'
  },
  computed :{
    changeVaule:function(){
      if(this.inputValue!==''){
        return this.inputValue;
      }else{
        return 'empty';
      }
    }
  }
}); 
   
   
  
9.Vuejs       
 
   
   
  
1.    
 
  
//   `example1.items[0] = ...`   ，         
example1.items.$set(0, { childMsg: 'Changed!'})
  
または$remove
	
this.items.$remove(item);
  
2.    
オブジェクト  の  または  を  できます
$set(key,value)の  
vm.$set('b', 2)
  
//     `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
  
10.vuejsページの  について
v-cloak(グローバル  を  )
[v-cloak]{
    display:none;
}
  
11.v-forサイクル のv-modelの  についてinputをループ  し、v-modelでバインドした 、vuejsを  して  する  がある  があります.この  、v-modelに  selected[$index]を くことができます.これにより、 なるinputに なるv-modelをバインドし、それぞれを  することができます.
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);
  }
  
アニメは まった に  の  に  して、 に があって、 に があって、すべて  しなければなりません.