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：。