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,即：

	
<stylescoped></style>

4.vuejs迴圈插入圖片

<div class="bio-slide" v-for="item in items">   
    <img:src="item.image"></div>

5.繫結value到Vue例項的一個動態屬性上

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

6.片段例項

下面幾種情況會讓例項變成一個片斷例項：

1. 模板包含多個頂級元素。
2. 模板只包含普通文字。
3. 模板只包含其它元件（其它元件可能是一個片段例項）。
4. 模板只包含一個元素指令，如<partial> 或vue-router 的 <router-view>。
5. 模板根節點有一個流程控制指令，如v-if或v-for。

7.路由巢狀

    路由巢狀會將其他元件渲染到該元件內，而不是進行整個頁面跳轉，router-view本身就是將元件渲染到該位置，想要進行頁面跳轉，就要將頁面渲染到根元件，在起始配置路由時候寫到：

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

8.實現多個根據不同條件顯示不同文字的方法

用計算屬性computed

<div id="test">
  <inputtype="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);
  }

動畫在定的時候要注意上下對應，上面有什麼，下面有什麼，都要變化的，