vue小结1

1.Vuejs组件

vuejs构建组件使用css

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

这里注意一点，组件要先注册再使用，也就是说：vue

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指令web

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

3.如何让css只在当前组件中起做用

在每个vue组件中均可以定义各自的css，js，若是但愿组件内写的css只对当前组件起做用，只须要在style中写入scoped,即：vue-router

<style scoped></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.片断实例

下面几种状况会让实例变成一个片段实例：数组

模板包含多个顶级元素。
模板只包含普通文本。
模板只包含其它组件（其它组件多是一个片断实例）。
模板只包含一个元素指令，如<partial> 或vue-router 的 <router-view>。
模板根节点有一个流程控制指令，如v-if或v-for。

7.路由嵌套

路由嵌套会将其余组件渲染到该组件内，而不是进行整个页面跳转，router-view自己就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：app

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

8.实现多个根据不一样条件显示不一样文字的方法

用计算属性computedide

<div id="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.检测对象

能检测到对象属性的添加或删除this

使用$set(key,value)spa

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

动画在定的时候要注意上下对应，上面有什么，下面有什么，都要变化的，