Vue第5天 （v-click和v-bind）

用movies裝載電影的內容我們用li標簽把這些電影顯示到網頁上去，通過控制台輸入：app.movies.push('aaa')可以在頁面中馬上添加了aaa。這是因為它是響應式的。

計數器案例：

　　設計一個記錄點擊次數的計數器，點擊加號增加一次，減號就減少一次。

    <div id="app">
        <h2>當前計數{{counter}}</h2>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                counter:0
            }
        })
    </script>

　　非常簡單，注意的是v-on后面的click是點擊事件。這里可以添加一個函數讓整體更加具有可讀性：

　　

    <div id="app">
        <h2>當前計數{{counter}}</h2>
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods:{
                add:function(){
                    this.counter++;
                },
                sub:function(){
                    this.counter--;
                }
            }
        })
    </script>

　　在vue實例中添加了一個methods區，這里包含着各種需要使用的函數，通過函數名：function（）這樣來定義一個函數。這里注意操作內部變量的時候一定要加上this。那么上面v-on：click=后面增加一個函數名就可以了。同時用@替換了v-on：。

　　對象內部回調函數，在vue對象內部直接寫函數（不是放在methods中）這些函數將會被vue回調，這就是生命周期的一種體現：當你創建了一個vue的時候，感覺上沒有做什么但是內部做了一系列的操作，做到每一步的時候都會進行一些回調來告訴你進行到了哪一步。我們可以通過理解生命周期來在vue創建的每個時間點進行不同的操作，例如使用beforeCreate：function()

 

v-bind的使用：

　　v-bind可以綁定數據和元素屬性。我們在標簽中如果要把元素屬性設置為一個變量，則可以用v-bind實現元素屬性綁定變量的操作。

　　

    <div id="app">
        <img v-bind:src="img">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                img:"http://a0.att.hudong.com/27/10/01300000324235124757108108752.jpg"
            }, 
        })
    </script>

　　這里將一個img標簽把src屬性綁定到img變量上，img存儲在data中可以改變。data中的數據是一個中轉，各種地址數據不可能直接在標簽中寫死。語法是<標簽 v-bind：給哪個屬性賦值=“變量”>，它有個簡寫，就是直接寫冒號。本質也是v-bind：。