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.片段实例

下面几种情况会让实例变成一个片断实例：

1. 模板包含多个顶级元素。
2. 模板只包含普通文本。
3. 模板只包含其它组件（其它组件可能是一个片段实例）。
4. 模板只包含一个元素指令，如 或vue-router 的 。
5. 模板根节点有一个流程控制指令，如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);
  }

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