Vue2.x學習筆記：第3章-2： 指令講解

指令是Vue.js 中一個重要的特性，主要提供了一種機制將數據的變化映射爲DOM 行爲。Vue.js 本身提供了大量的內置指令來進行對DOM 的操作，我們來講解比較常用的指令。

1、v-bind 指令

1.1 v-bind用來綁定數據和屬性以及表達式，縮寫爲’：’

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

比如爲標籤綁定title屬性，代碼如下：

<template>
  <div id="app">
     <h1 v-bind:title="title">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
          msg: "binge",
          title: "我是title"
      }
  }
}
</script>

在這裏title是參數，告知 v-bind指令將該元素的title attribute 與表達式title的值綁定。

小技巧：v-bind 指令應用場景

v-bind:title  鼠標移上的顯示

v-bind:src  綁定圖片路徑

v-bind:class 綁定類樣式

v-bind:style  動態綁定樣式

2、v-model 指令

v-model多在表單中使用，在表單元素上創建雙向綁定，根據控件類型選擇正確的方法更新元素，可以綁定text、radio、checkbox、selected。

v-model 在內部爲不同的輸入元素使用不同的屬性並拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked
屬性和 change 事件； select 字段將 value 作爲 prop 並將 change 作爲事件。

2.1 綁定text

代碼如下，p標籤內容的值和val 數據進行了綁定，input的值使用v-model和val也進行了綁定，因此在改變輸入框的值時，val數據會變化，同時在p標籤顯示的值也會變化。

<template>
  <div id="app">
      <input type="text" v-model="val" />
      <p> {{val}} </p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
          val: "binge"
      }
  }
}
</script>

2.2 綁定radio

<template>
  <div id="app">
    <input type="radio" id="male" value="Male" v-model="gender"> Male
    <input type="radio" id="female" value="Female" v-model="gender"> Femalea

    <p>{{gender}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      gender: ''
    }
  }
}
</script>

gender的值隨着選擇單選框的值，會變成Male或者 Female

2.3 綁定checkbox

單個勾選框，最終的值爲邏輯值true和false

<template>
  <div id="app">
  <input type="checkbox" v-model="checkVal"/>
   <p for="checkbox">{{checkVal}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkVal: ''
    }
  }
}
</script>

2.4 綁定select

<template>
  
  <div id="app">
    <select v-model="selecteData">
      <option disabled value="">請選擇</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>{{selecteData}}</p>
  </div>
 
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selecteData: ''
    }
  }
}
</script>

3、{{}}和v-text指令、v-html

3.1 表達式

<template>
  <div id="app">
      {{msg + 1}}
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 1,
    }
  }
}
</script>

顯示應該是：2

3.2 v-text指令綁定文本

<template>
  <div id="app">
      <div v-text="msg"></div>
      {{msg}}
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: "您好，斌哥"
    }
  }
}
</script>

這兩種綁定效果是一致的。

3.3 綁定html標籤文本

<template>
  <div id="app">
      <div v-html="raw_html"></div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      raw_html: "<h1>您好，斌哥</h1>"
    }
  }
}
</script>

這樣就是可以綁定html內容。

小技巧：{{{ }}} 指令在vue2.x中廢棄了

<div>{{{ raw_html }}}</div>  

4、v-on 指令

綁定事件：

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

實例如下：

<template>
  <div id="app">
    <!-- Vue 中提供了 v-on: 事件綁定機制 -->
    	<input type="button" value="按鈕"  v-on:click="item+=1">{{item}}
    	<input type="button" value="按鈕" v-on:click="show">
    	<input type="button" value="按鈕" @click="show">
      
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: "您好，斌哥",
      item: 1
    }
  },
  methods: {
      // 這個 methods屬性中定義了當前Vue實例所有可用的方法
      show: function () {
         alert('Hello')
      }
  }
}
</script>

小技巧：支持表達式：v-on:click=“item+=1”

5、v-if 指令

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 true 值的時候被渲染。

<template>
  <div id="app">
   <input type="button" value="按我切換"  v-on:click="awesome=!awesome">
   <h1 v-if="awesome">Vue is awesome!</h1>
   <h1 v-else>Oh no 😢</h1>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      awesome: true
    }
  }
}
</script>

點擊按鈕，可以控制文本的顯示。

小技巧：也可以用 v-else 添加一個“else 塊”

6、v-show 指令

另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：

<h1 v-show="awesome">Hello!</h1>

不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

小技巧： v-if vs v-show
注意，v-show 不支持 元素，也不支持 v-else。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好

7、v-for 指令

我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

<template>
  <div id="app">
    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}
</script>

顯示效果：

在 v-for 塊中，我們可以訪問所有父作用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。

<template>
  <div id="app">
    <ul id="example-1">
     <li v-for="(item, index) in items">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}
</script>

顯示效果：

你也可以用 v-for 來遍歷一個對象的屬性。

<template>
  <div id="app">
    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>

顯示效果：