vue的其他指令：

(注意：content 表示 vue 實體中 data 的資料)

(1): v-bind

v-bind 動態為屬性系結變數 例：

<img v-bind:src="imgURL">

語法糖（簡寫）：':' 一個冒號 例：

<img :src="imgURL">

v-bind也可以系結類名class等，class的值可以是陣列或者是物件，大部分是物件，物件中包括一組組鍵值對，類名就是對應的樣式，也就是鍵；后邊的值就是對應著增加和移除該類，取值是true和false；

<div :class="{類名1:true/false,類名2:true/false}"> {{message}}</div>

陣列的形式用的很少，和直接寫死的區別是，在[]陣列中沒有加單引號，vue會將其當成變數決議，如果直接加單引號，就會被當成類名的字串，也可以寫到methods方法中，
在這個vue實體中使用變數，要加上this.

<div :class="[類名1,類名2]">{{message}}</div>

(2): v-on

v-on 事件監聽器

語法糖（簡寫）：@

基礎用法：

1.在需要進行事件監聽的地方系結事件監聽器；

<button @="btnClick">按鈕<button>

2.在vue實體中的methods里定義事件；

methods: {
btnClick() {
  console.log("btnClick點擊了！")
 }
}

引數傳遞問題：

1.事件呼叫方法沒有引數那么以下兩種寫法效果一樣，

<button @="btnClick">按鈕<button>
<button @="btnClick()">按鈕<button>

2. 在事件定義時，寫方法時省略了小括號，但是方法本身是需要一個引數的，這個時候，Vue會默認將瀏覽器自己生成的event事件物件作為引數傳入到方法中，

<button @="btnClick">按鈕<button>

methods: {
btnClick(a) {
  console.log(a)  //這個a就是瀏覽器生成的 event 事件物件
 }
}

3. 方法定義時，我們需要event物件，同時又需要傳入其他引數，在呼叫方法時，手動的獲取到瀏覽器引數的event物件： $event

<button @click="btnClick('abc', $event)">按鈕</button>

v-on的常用修飾符：

1. .stop 阻止事件冒泡，呼叫event.stopPropagation()

2. .prevent 阻止默認事件，呼叫event.preventDefault()

3. @keyup.enter 監聽回車鍵的彈起，同時也可以@keydown.esc監聽esc鍵按下

4. .native 監聽組件根元素的原生事件

5. .once 只觸發一次回呼

(3) v-for

基礎格式： v-for="item in 物件/陣列"

注意：vue官方推薦我們在使用 v-for 時，給對應的元素或組件添加上一個 :key屬性 :key="item"

key的作用主要是為了高效的更新虛擬DOM

<p v-for="item in content" :key="item">{{item}}</p>

1.迭代普通陣列

在 data 中定義普通陣列

data:{
      list:[1,2,3,4,5,6]
 }

在html中使用 v-for 指令渲染

<p v-for="(item,i) in list">--索引值--{{i}}   --每一項--{{item}}</p>

2.迭代物件陣列

在 data 中定義物件陣列

data:{
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}

在html中使用 v-for 指令渲染

<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代物件

在 data 中定義物件

data:{
      user:{
        id:1,
        name: '黨航航',
        gender: '男',
        age: 19,
        height: 1.88
      }
}

在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>

4.迭代數字

<!-- 注意：如果使用v-for迭代數字的話，前面 count 的值從 1 開始-->
<p v-for="count in 10">這是第{{count}}次回圈</p>

(4) v-model

vue使用v-mode用于表單資料的雙向系結, v-model本質上是一個語法糖，

如代碼<input v-model="test">本質上是

<input :value="test" @input="test = $event.target.value">

1. v-bind系結一個value屬性

2. v-on指令給當前元素系結input事件

v-model修識符

1. lazy 讓資料在失去焦點或者回車時才會更新

<input v-model.lazy="content" >

2. number 可以讓在輸入框中輸入的內容自動轉為數字型別

<input v-model.trim="content">

3. trim 可以過濾內容左右兩邊的空格

<input v-model.number="content" type="number">

(5): v-if

v-if 的作用相當于Js中的 if 判斷，只不過這次寫法上有所不同，

v-if 的變數值一般都是true或者false，效果就像是顯示（true）、隱藏（false），

v-if 除了多應用于條件判斷，還會用于視圖之間的切換，

<div v-if="content>90">優秀</div>

(6): v-else-if 和 v-else

v-else-if 和 v-else 作用相當于Js中的else if 和 else，

<div v-if="content>90">優秀</div>
<div v-else-if="content>70">良好</div>
<div v-else-if="content>60">及格</div>
<div v-else>不及格</div>

(7): v-show

v-show 用法和 v-if 差不多，作用也差不多，他倆結果都為true時沒有區別但當他倆為false時有很大的區別，

區別：

v-show：當條件為false時，v-show只是給我們的元素添加了一個行內樣式：dispaly:nane;

v-if: 當條件判斷為false時，包含v-if指令的元素根本就不會存在DOM中；

介意：當需要在顯示和隱藏之間切換很頻繁時用v-show ; 當只有一次切換時，通過使用v-if (作業中最多使用v-if)