Vue的經常使用指令v-if， v-for， v-show，v-else， v-bind， v-on

 Vue.js的指令是以v-開頭的，它們做用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會爲綁定的目標元素添加一些特殊的行爲，咱們能夠將指令看做特殊的HTML特性（attribute）。

Vue.js提供了一些經常使用的內置指令，以下：

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1：v-if指令

v-if指令是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法以下：

v-if="expression"

expression是一個返回布爾值的表達式，表達式能夠是一個布爾值屬性，也能夠是一個返回布爾值的運算式。

Eg:

  <div id="app">

            <h1>Hello, Vue.js!</h1>

            <h1 v-if="yes">Yes!</h1>

            <h1 v-if="no">No!</h1>

            <h1 v-if="age >= 18">Age: {{ age }}</h1>

            <h1 v-if="name.indexOf('li') >= 0">Name: {{ name }}</h1>

        </div>

        var app= new Vue({

            el: '#app',

            data: {

                yes: true,

                no: false,

                age: 20,

                name: 'lililili'

            }

        })

        //數據的yes屬性爲true，因此"Yes!"會被輸出；

//數據的no屬性爲false，因此"No!"不會被輸出；

//運算式age >= 18返回true，因此"Age: 28"會被輸出；

//運算式name.indexOf('li') >= 0返回false，因此"Name: lililili"會被輸出。

V-if只能控制一個元素上的是否顯隱，對於多個元素控制咱們可使用一個template元素實現

在vue中咱們想使用條件模板直接在dom元素上使用v-if指令，v-if指令的值表示vue實例對象上的數據值

Tempalte是vue提供的一個自定義元素，寫在這個裏面的 元素會根據template v-if屬性來控制顯隱，在渲染之後這個元素會被vue刪除掉，（v-if指令元素保留）

<div id="app">

<template v-if="type">

<span>{{type}}</span> <span> | </span>

</template>

<strong>{{title}}</strong>

</div>

<script type="text/javascript" src="vue.js"></script>

<script type="text/javascript">

// 數據

var data = {

title: '哈哈哈',

type: '科技'

}

var app = new Vue({

el: '#app',

data: data

})

2：v-for指令

v-for指令基於一個數組渲染一個列表，它和JavaScript的遍歷語法類似：

v-for="item in items"

items是一個數組，item是當前被遍歷的數組元素。

Eg:

<ul id="app">

<li v-for="item in list">{{item}}</li>

</ul>

/var data = [

'快樂大本營',

'奔跑吧兄弟',

'極限挑戰'

]

var app = new Vue({

el: '#app',

data: {

list: data

}

})

與v-if同樣v-for也能夠應用在template元素上，此時能夠實現對多組元素的for循環

Eg:

<ul id="app">

<template v-for="item in list">

<li>

<span v-if="item.type">{{item.type}} | </span>

<strong>{{item.title}}</strong>

</li>

<br>

</template>

</ul>

var data = [

{

type: '湖南',

title: '快樂大本營'

},

{

type: '浙江',

title: '奔跑吧兄弟'

},

{

type: '東方',

title: '極限挑戰'

}

]

var app = new Vue({

el: '#app',

data: {

list: data

}

})

3:v-show指令

v-show也是條件渲染指令，控制元素顯隱，和v-if指令不一樣的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地爲元素設置CSS的style屬性。

V-if是false會將元素在dom文檔中刪除

V-show是false是將元素的display設置none

V-if會刪除元素，v-show只是作樣式顯隱，會保留頁面中

4:v-else指令

能夠用v-else指令爲v-if或v-show添加一個「else塊」。v-else元素必須當即跟在v-if或v-show元素的後面——不然它不能被識別。

v-else元素是否渲染在HTML中，取決於前面使用的是v-if仍是v-show指令。

v-if爲true，後面的v-else不會渲染到HTML；v-show爲tue，可是後面的v-else渲染到HTML。

5:v-bind指令

v-bind指令能夠在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數一般是HTML元素的特性（attribute），例如：v-bind:class=」’’

v-bind:argument="expression"

6:v-on指令

v-on指令用於給監聽DOM事件，它的用語法和v-bind是相似的，例如監聽<a>元素的點擊事件：

<a v-on:click="doSomething">

語法：V-on:click=「事件回調函數的名稱」

定義事件的回調函數，在vue的實例化對象的methods屬性中定義

Methods他的值是一個對象

對象是屬性名稱表示事件的回調函數名稱

對象的屬性值是一個函數，就是事件的回調函數

他的this指向的是vue實例化對象，所以經過它咱們能夠獲取或者設置vue實例化對象上屬性

它默認有個參數是事件對象，這個事件對象能夠訪問該事件的相關信息$event傳遞參數能夠訪問到事件對象

當咱們在使用事件時候，能夠傳遞一些參數，此時在vue的事件回調函數中它的參數與事件使用時候傳入的參數是一致的

<input type="text" v-model="msg">

<button v-on:click="showTitle(msg, $event, 'hello')">btn</button>

<button v-on:click="showTitle">btn2</button>

<h1>{{title}}</h1>

var app = new Vue({

el: '#app',

data: {

title: '',

msg: ''

},

methods: {

// 屬性名稱表示回調函數的名稱

showTitle: function () {

// console.log(this)

// console.log(arguments)       傳的參數都能訪問到 msg, $event, 'hello'

// 經過this訪問vue實例化對象上的其餘屬性和方法。Data.title   data.aa

this.title = '快樂大本營';

},

aa: function () {

}

}

})