v-if v-else v-for v-on v-bind

由于公司只用JQ,再這樣下去，本寶寶就要被淘汰啦，所以閑暇時間，學(xué)習(xí)下當(dāng)前熱門框架Vue,這也是我準(zhǔn)備今年必須啃下的硬骨頭。在此記錄學(xué)習(xí)過程中的點點滴滴，一方面方便其他有志于學(xué)習(xí)Vue的同學(xué)，另一方面，也有助于我后期回顧知識。以下文字純屬手碼，如有雷同，純屬巧合。歡迎志同道合者提出文中錯誤和問題！

1.vue常用指令

v-if v-else

v-if、v-else 條件渲染指令，根據(jù)其后表達式的boolean值進行判斷是否渲染該元素

例子：

<div id="app">
    <h2 v-if="flag">show-boy</h2>
        <!-- v-else和v-if一起用-->
    <h2 v-else>show-girl</h2>
    <button v-on:click="changeFlag"></button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            changeFlag:function(){
                this.flag = !this.flag;
            }
        }
    })
<script>

v-if和v-else一般結(jié)合起來用，當(dāng)v-if后面的變量的布爾值為真的時候，顯示該內(nèi)容"show-boy"，v-else里面的內(nèi)容不顯示。反之，則顯示v-else里面的內(nèi)容"show-girl"，不顯示v-if里面的內(nèi)容

v-show

v-show決定是否顯示內(nèi)容

例子：

<div id="app">
    <h2 v-show="flag">show-me</h2>
    <button v-on:click="changeFlag"></button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            changeFlag:function(){
                this.flag = !this.flag;
            }
        }
    })
<script>

v-show決定該區(qū)域是否顯示出來，當(dāng)后面布爾值為真的時候，顯示"show-me",反之不顯示

v-for

v-for是vue指令當(dāng)中用的最頻繁的，它的作用就相當(dāng)于我們在JS代碼中循環(huán)遍歷從后臺獲取的數(shù)據(jù)，最后再將數(shù)據(jù)渲染到頁面上

例子：

<div id="app">
    <ul>
        <li v-for="item in Arr">//item為每次循環(huán)的對象
            <div>item.name</div>
            <div>item.age</div>
        </li>
    </ul>                
</div>                  
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            Arr:[
                    {
                        name:"tom",
                        age:15
                    },
                    {
                        name:"jack",
                        age:20
                    }
            ]
        }
    })
<script>
//結(jié)果
    tom
    15
    jack
    20

v-for一般用來將從后臺獲取的數(shù)據(jù)，循環(huán)遍歷渲染在頁面上，使用v-for不僅可以循環(huán)遍歷數(shù)組元素，還可以遍歷數(shù)組元素的下標(biāo)

例子：

<div id="app">
    <ul>
        <li v-for="(item,i) in Arr">//item為每次循環(huán)的對象,i為元素下標(biāo)
            <div>第{{i}}個人的名字為：{{item.name}}</div>
        </li>
    </ul>                
</div>                  
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            Arr:[
                    {
                        name:"tom",
                        age:15
                    },
                    {
                        name:"jack",
                        age:20
                    }
            ]
        }
    })
<script>
//結(jié)果:
    第0個人的名字為：tom
    第1個人的名字為：jack

v-for不僅可以用來遍歷數(shù)組，還可以用來遍歷對象的key和value

例子：

<div id="app">
    <ul>
        <li v-for="(value,key) in Mine">//key為屬性名稱，value為對應(yīng)屬性值,注意value在前，key在后
            <span>{{key}}</span>:
            <span>{{value}}</span>
        </li>
    </ul>                
</div>                  
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            Mine:{
                    name:"rui.wei",
                    age:25,
                    gender:"man"
                }
        }
    })
<script>
//結(jié)果:
    name: rui.wei
    age: 25
    gender: man

v-on

v-on用來給元素綁定事件，事件函數(shù)定義在實例vm的methods屬性里

例子：

<div id="app">
    <button v-on:click="myTry"></button>//可以簡寫為@click="myTry"
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            myTry:function(){
                console.log("Welcome to Vue")
            }
        }
    })
<script>

不管什么事件，如click、mouseover、keyup...都用該指令綁定到對應(yīng)元素上，如果想要對該元素做一些行為或者樣式改變的話，那么在methods中定義事件的時候，要將事件對象傳入進去，如下：

例子：

<div id="app">
    <button v-on:click="myTry"></button>//可以簡寫為@click="myTry"
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            myTry:function(event){
                event.target.style.background = "red";
            }
        }
    })
<script>

Vue的強大之處，還在于很人性化，比如給事件加上了一些事件修飾符和按鍵修飾符（即指定什么鍵觸發(fā)該事件）**

(官方解釋)在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現(xiàn)這點，但更好的方式是：methods 只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

例子（事件修飾符）：

<div id="app">
    <button v-on:click.stop="myTry"></button>//可以簡寫為@click="myTry"                                    
</div>                   
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            myTry:function(event){
                event.target.style.background = "red";
            }
        }
    })
<script>
//.stop:取消事件冒泡
//.prevent:提交事件不在重載頁面
//.self:只在該元素上觸發(fā)事件，而不在其子元素上觸發(fā)事件
//.once:點擊事件將只會觸發(fā)一次
//事件修飾符還可以是串聯(lián)的，如<form v-on:submit.prevent></form>
......

例子（按鍵修飾符）：

<div id="app">
    <div v-on:keyup.enter="myTry"></div>                        
</div>                   
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            myTry:function(event){
                console.log("You have get it by press Enter!")
            }
        }
    })
<script>
//在監(jiān)聽鍵盤事件時，我們經(jīng)常需要監(jiān)測常見的鍵值。 Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符,有：.enter/.tab/.delete (捕獲 “刪除” 和 “退格” 鍵)/.esc/.space/.up/.down/.left/.right

v-bind

v-bind用來給元素綁定屬性

1.v-bind:class用來給元素動態(tài)添加class值

例子：

<style>
    .myClass{
        background:"pink";
        color:"gray";
    }
</style>
<body>
    <div id="app">//v-bind:class可以縮寫為:class
        <h2 v-bind:class={myClass:flag}">Hello world!</h2>
        <button @click="changeFlag">Give me a change!</button>
    </div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false
        },
        methods:{
            changeFlag:function(){
                this.flag = !this.flag;
            }
        }
    })
<script>
</body>

//當(dāng)我們點擊按鈕的時候，動態(tài)的改變定義在data中的flag值。當(dāng)flag值為true的時候，h2標(biāo)簽將會加上名為myClass的class。但是一般會將flag同時對應(yīng)兩個class，從而在兩個class之間來回切換樣式。如下:

<style>
    .myClass{
        background:"pink";
        color:"gray";
    }
    .myClass_1{
        background:"red";
        color:"blue";
    }
</style>
<body>
    <div id="app">
        <h2 :class={myClass:flag,myClass_1:!flag}">Hello world!</h2>
        <button @click="changeFlag">Give me a change!</button>
    </div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:false
        },
        methods:{
            changeFlag:function(){
                this.flag = !this.flag;//methods中的this==vm
            }
        }
    })
<script>
</body>

2.v-bind:style

v-bind:style用來給元素綁定樣式

例子：

<div id="app">
   <div :style="myStyle">Welcome to my world!</div>                                 
</div>                   
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true,
            myStyle:{
                "color":"red",
                "font-size":"16px"
            }
        }
    })
<script>
//div將會加上color="red",font-size:16px樣式