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);
  }