v-bind

傳對(duì)象 
<div v-bind:class="{active:isActive}"></div>
data: {
  isActive: true
}

可以把對(duì)象放到computed里面 computed一定要返回對(duì)象
<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

數(shù)組語法
<div v-bind:class="[activeClass,errorClass]"></div>
data:{
  activeClass:'active',
  errorClass:'text-danger'
}

三目運(yùn)算符
<div v-bind:class="[isActive ? activeClass : '' ,errorClass]"></div>
會(huì)直接添加errorClass 只有在isActive為true時(shí),才會(huì)添加activeClass

數(shù)組對(duì)象
<div v-bind:class="[{active:isActive},errorClass]"></div>

v-else-if
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>非A,B</div>

用template來包含代碼塊 控制一塊的顯示 ok為false時(shí) template也不會(huì)顯示
<template v-if="ok">
  <h1>標(biāo)題</h1>
  <p>段落 1</p>
  <p>段落 2</p>
</template>
注意在切換頁面
<template v-if="loginType === 'username'">
        <label>用戶名</label>
        <input placeholder="請(qǐng)輸入用戶名" key="username-input">
    </template>
    <template v-else>
        <label>郵箱</label>
        <input placeholder="請(qǐng)輸入郵箱" key="email-input">
    </template>
切換不加key的部分不會(huì)重新渲染 也就是說不加key 輸入框有值 在切換后,值會(huì)依然有 優(yōu)點(diǎn):渲染速度快。

v-show 
<h1 v-show="ok">hello</h1> 
他的元素會(huì)始終渲染并保留你在DOM中。v-show只會(huì)切換元素的dispolay的css屬性

v-if 和 v-show
都能實(shí)現(xiàn)控制元素隱藏與否
v-if 是'真實(shí)'的條件渲染,每一次切換 它都會(huì)銷毀和重新創(chuàng)建條件塊內(nèi)的事件監(jiān)聽器和子組件
v-if只有在為true時(shí)才會(huì)渲染條件塊
v-show它都會(huì)渲染 只是樣式隱藏

v-for
<ul>
  <li v-for="item of items">{{item.message}}</li>
</ul>

<ul>
  <li v-for="(item,index) in items">{{item.message}}</li>
</ul>

v-for也可以在整數(shù)值范圍內(nèi)迭代,這種情況,會(huì)把模板重復(fù)多次.
<div>
   <span v-for="n in 10">{{n}}</span>
</div> 

在<template>上使用v-for
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

帶有v-if的v-for
<li v-for="todo in todos" v-if="!todo.isComplete">{{todo}}</li>
它們都在同一節(jié)點(diǎn)上,v-for的優(yōu)先級(jí)高于v-if.這意味著v-if將分布在循環(huán)中的每次迭代上運(yùn)行。當(dāng)你只想渲染某些節(jié)點(diǎn)時(shí).這個(gè)非常有用。

 注意:在迭代的時(shí)候最好提供一個(gè)key.因?yàn)閿?shù)組順序在操作時(shí)可能會(huì)變.變了之后視圖也會(huì)相應(yīng)的改變.
 提供key使排序速度快.
 <div v-for="item in items" :key="item.id"></div>
 
 vue將觀察數(shù)組的變化包裹起來,方便在調(diào)用這些方法時(shí).能夠觸發(fā)視圖更新
  push() pop() shift() unshift() splice() sort() reverse()
 
 注意事項(xiàng) 由于js的限制 Vue無法檢測(cè)到已下數(shù)組的變化
    1:直接設(shè)置某一項(xiàng) vm.items[indexOfItem] = newValue;
    2:修改數(shù)組長(zhǎng)度 vm.items.length = newLength
 必須通過響應(yīng)式系統(tǒng)觸發(fā)狀態(tài)更新.
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)

關(guān)于對(duì)對(duì)象的監(jiān)控 實(shí)時(shí)更新
var vm = new Vue({
  data:{ a : 1}
})
//vm.a是響應(yīng)的
vm.b =2 //vm.b 不是響應(yīng)的
vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上,動(dòng)態(tài)的添加新的根級(jí)響應(yīng)式屬性。然而,可以通過使用Vue.set(Obj,key,value)方法.將響應(yīng)式屬性添加到嵌套的對(duì)象上。
如 添加新的age屬性
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
Vue.set(vm.userProfile,'age',27);
也可以
vm.$set(this.userProfile,'age',27)

向已經(jīng)存在的對(duì)象上添加一些新的屬性。例如使用Object.assign() 或 _.extend()方法。
這種情況,應(yīng)該創(chuàng)建一個(gè)新的對(duì)象.這個(gè)對(duì)象同時(shí)具有對(duì)象的所有屬性.可以通過如下方式.添加新的響應(yīng)式屬性
this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})