vue.js 總結

//1.Vuejs組件
 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:'this are some desc about Blog'	
	}
});
// 2 keep-alive
// 若是把切換出去的組件保留在內存中，能夠保留他的狀態避免從新渲染爲此能夠添加keep-alive 指令。
 <component :is="curremtView" keep-alive></component> 

//3.如何讓css只在當前組件中起做用
 //在每個vue組件中均可以定義各自的css，js，若是但願組件內寫的css只對當前組件起做用，只須要在style中寫入scoped，即：
<style scoped></style>

//4 vue.js 循環插入圖片
 <div class="bio-slide" v-for="item in items">
  <img src="{{item.image}}">
 </div>

//5綁定 value 到一個Vue 實列的一個動態屬性上
// 對於單選按鈕 勾選框急選擇框選項 v-model 綁定到value 一般是靜態字符串

<input type="checkbox" v-model="toggle">

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

//6路由嵌套
//路由嵌套會將其餘組件渲染到該組件內，而不是進行整個頁面跳轉router-view自己就是將組件渲染到該位置，想要進行頁面跳轉，就要將頁面渲染到根組件，在起始配置路由時候寫到：
var app = Vue.extend({root});
router.start(App,'#app');

// 根據組件註冊出來的，用於將路由中由配置好的頁面渲染出來，而後將根據組件掛載到與APP 匹配的元素上

// 7vuejs 變化檢測問題
   // 檢測數組
   //1 直接搜索設置元素VM.item[0] = {}
   // 2 修改數據的長度 VM.item.length 
   
   // 爲了解決問題 vue 擴展觀察數組 添加#set() 方法
   
   example1.items.$set(0,{childMsg:'Changed'});
   
   var index = this.items.indexOf(item)
   if(index ! ==1){
   	this.items.splice(index,1)
   }
   
   this.items.$remove(item);
   
   //2 檢測對象
   
   var data = {a:1};
   var vm = new Vue({
   	data:data
   })
   vm.b = 2
   data.b = 2
   
   
  // 8 關於VUE 頁面閃爍問題
     [v-cloak]{
     	display:none;
     }
     <div v-clock>{{massage}}</div>


  // 9vuejs中過渡動畫 
  .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);
  }