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

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