1.計算屬性

計算屬性是可以配置在options中的，因此先來看下官網對它的介紹

通過文件可知它的結構為computed: {},其中物件中可以是key：function或者是key：{get：function，set：function}
它的this執向的是vue例項而不是函式內部，因此在此函式中訪問vue中的屬性可以直接通過this.屬性的方式訪問
它的結果會被快取起來
總結一下，計算屬性的作用和普通屬性一樣，只不過比普通屬性多了一些功能，能使用普通屬性的地方就可以通過計算屬性替換
舉個例子，比如在插值時想對每個屬性的值後面新增finished字串，如果按照普通的寫法是這樣的

<div id="app">
  {{msg}} finished
</div>

 let app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world!'
    }
  })
 

如果這個表示式計算簡單的話沒什麼影響，但是如果計算邏輯複雜，那麼很影響可讀性，使用計算屬性替換

<div id="app">
  {{msg}}
</div>

let app = new Vue({
  el: '#app',
  data: {

  },
  computed: {
    msg: function(){
      return 'hello world!' + ' finished'
    }
  }
})

效果是一樣的，但是它比普通的屬性擁有更好的可讀性和效率，它還可以使用get和set的方式，當對此屬性賦值時會執行set函式，使用此屬性時會呼叫get函式

2.v-bind繫結

此指令可以給html標籤動態的繫結屬性值、樣式值和類值，通過它可以實現響應式功能

屬性繫結

最基本的用法就是繫結標籤的屬性，比如繫結input標籤的value屬性，在程式中可以動態的切換輸入框的值

<div id="app">
  <input v-bind:value="value">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa'
  },
})

使用程式修改value變數後，介面上的值也會實時變化

如果不使用v-bind修飾屬性，那麼它的值就是value，加了該指令後vue會將屬性的值當做變數解析，當變數的值改變後，標籤的值也會發生變化

類繫結

除了可以繫結屬性的值以外，v-bind指令還可以動態的繫結類，它有兩種繫結方式
第一種直接傳入一個物件，物件的key會被當做class名稱，物件的value會被當做變數進行解析，只有當變數為true時才會在指定標籤中新增此class

<div id="app">
  <input v-bind:value="value" v-bind:class="{active: isactive}">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    isactive: true
  },
})

通過控制檯動態的修改isactive變數的值後對應標籤上的class被移除了


第二種繫結class的方式為傳入一個數組，陣列中的值會被當做變數解析，最終class的值就是陣列中變數的值

<div id="app">
  <input v-bind:value="value" v-bind:class="[class1, class2]">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    isactive: true,
    class1: 'class1val',
    class2: 'class2val',
  },
})

這兩種方式也可以進行混用，直接在陣列中使用物件方式也可以生效

樣式繫結

v-bind指令繫結樣式的方式和繫結class相同，存在物件和陣列兩種方式
在物件中加了單引號以後就會被當做普通字串處理

<div id="app">
  <input v-bind:value="value" v-bind:style="{fontSize: fontSize + 'px'}">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    fontSize: 20
  },
})

陣列繫結和class繫結相同

縮寫形式

因為屬性繫結太過於常用，因此vue對其提供了縮寫形式，直接使用：代替v-bind:，比如像繫結value的值時不需要再寫成v-bind:value，而是直接寫成:value即可

3.v-on監聽事件

v-on指令可以監聽發生在標籤上的所有事件，只需要指定事件名稱即可監聽特定的事件並進行處理

<div id="app">
  <span v-on:click="handleClk">aaa</span>
</div>

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(){
      console.log('clicked...')
    }
  }
})

預設當不傳引數的時候第一個引數即為事件物件

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(event){
      console.log(event)
      console.log('clicked...')
    }
  }
})

如果想傳入多個物件，並且還想使用事件物件的話，監聽時第一個引數的寫法為$event

<div id="app">
  <span v-on:click="handleClk($event, 'p1')">aaa</span>
</div>

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(event, p){
      console.log(event)
      console.log(p)
      console.log('clicked...')
    }
  }
  })

對於事件該指令還提供了事件修飾符，用於更精細的控制事件處理方式，用法為v-on:click.事件修飾符，目前支援的所有修飾符在api中可以查到

縮寫形式

和v-bind類似，對於事件監聽也是非常頻繁的操作，因此vue提供了縮寫形式，v-on:click縮寫形式為@click

4.v-if、v-else、v-else-if判斷

為了讓頁面上的元素根據條件動態的顯示或隱藏，vue提供了v-if指令，它的作用和普通的控制語句塊一樣，當條件滿足時渲染指定標籤

<div id="app">
  <span v-if="name == 'zhangsan'">zhangsan</span>
  <span v-else-if="name == 'lisi'">lisi</span>
  <span v-else="">wangwu</span>
</div>

let app = new Vue({
  el: '#app',
  data:{
    name: 'zhangsan'
  }
})

將name值改變後

只有當指令的表示式為真時，指令所在的標籤或被指令包含的所有標籤才會顯示

v-show和v-if的區別

v-show指令和v-if指令的作用相同，都是通過表示式來判斷是否顯示指定標籤，唯一的區別在於，v-show指令的隱藏是基於樣式的方式，元素並不會消失，而v-if的隱藏會將元素刪除

<div id="app">
  <span v-if="show">zhangsan</span>
  <span v-show="show">lisi</span>
</div>

let app = new Vue({
  el: '#app',
  data:{
    show: false
  }
})

5.v-for遍歷

語言的三個基本結構，順序、選擇、迴圈，v-if實現了選擇，v-for實現了迴圈，使用v-for可以遍歷陣列或者物件，被v-for指令包圍的所有標籤都會被迴圈生成

遍歷陣列

v-for指令可以依次遍歷陣列中的每個元素，它支援單個引數或兩個引數，第一個表示陣列中當前正在遍歷的元素，另一個表示當前的索引值

  let app = new Vue({
    el: '#app',
    data:{
      items: ['aaa', 'bbb', 'ccc', 'ddd']
    }
  })
  
 <div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}} - {{item}}</li>
  </ul>
</div>

當使用陣列中的部分方法對陣列進行增刪改時，頁面上的資料也會實時變化，具體的方法有以下幾種

遍歷物件

遍歷物件的方式和陣列基本類似，它支援三個引數，第一個為value值，第二個為key值，第三個為索引值

  let app = new Vue({
    el: '#app',
    data:{
      items: ['aaa', 'bbb', 'ccc', 'ddd'],
      obj: {
        name: 'zhangsan',
        age: 18,
        addr: 'china'
      }
    }
  })
  
  <div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}} - {{item}}</li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in obj">{{index}} - {{key}} - {{value}}</li>
  </ul>
</div>

給物件動態的增加屬性並不會引起頁面的實時更新，但是修改已有屬性的值則會引起頁面實時更新

指定key

當在元件中使用v-for指令時，必須給每個元件指定key值，此key值必須是唯一的

6.過濾器

過濾器的作用就是通過管道對vue變數的值進一步處理，寫在app例項的options中的稱為區域性過濾器，使用Vue直接註冊的稱為全域性過濾器，優先使用區域性的

<div id="app">
  <h3>{{val | lower}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'TEST'
  },
  filters:{
    lower(data){
      return data.toLowerCase()
    }
  }
})

程式碼的含義是當輸出val變數的值時先呼叫lower函式，進過處理後輸出lower函式的返回值
過濾器還可以多個同時使用，只需要使用|連線即可，返回的結果為最後一個過濾器返回的值

7.v-model

v-model指令可以實現表單的雙向繫結功能
在沒有v-model時可以使用v-bind繫結值

<div id="app">
  <input :value="val">
  <h3>val is: {{val}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'aaa'
  }
})

直接通過控制檯修改值，頁面可以實時的更新

但是當在頁面上修改時，例項中的變數值並沒有變化

v-model指令可以實現雙向的改變，首先使用v-model替換v-bind

<div id="app">
  <input v-model="val">
  <h3>val is: {{val}}</h3>
</div>

此時通過輸入框就可以改變例項中變數的值了

雙向繫結原理

v-bind提供了例項物件到頁面的繫結，v-on可以監聽輸入框的輸入事件，並在例項中處理，因此將v-bind和v-on結合後就可以實現雙向綁定了

<div id="app">
  <input :value="val" @input="clk">
  <h3>val is: {{val}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'aaa'
  },
  methods:{
    clk(event){
      this.val = event.target.value
    }
  }
})

修飾符

同事件指令一樣，v-model指令也提供了一些修飾符，用法同v-on指令