Vue学习(三): v-bind、v-on指令的学习

v-bind是Vue中提供的绑定属性的指令。

v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。
完整语法：<span v-bind:class="classProperty"></span >，解释：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。
缩写语法：<span :class="classProperty"></span >，解释：: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。

格式:
<input type="button" value="按钮" v-bind:title="mytitle">

var vm = new Vue({
            el: '#app',
            data:{
                mytitle: '定义的title'
            }
        })

v-bind加变量的表达式

<input type="button" value="按钮" v-bind:title="mytitle + ' 123'">

v-bind简写

<input type="button" value="按钮" :title="mytitle + ' 123'">

注意:

1. v-bind:指令可以简写为:要绑定的属性。
2. v-bind中可以合法写JS表达式。

v-on 事件绑定机制

<input type="button" value="按钮" v-on:click="show">
 methods:{//这个methods属性定义了当前vue实例所有可用的方法
                show: function(){
                    alert('yes')
                }
            }

v-on简写

<input type="button" value="按钮" @click="show">
 methods:{//这个methods属性定义了当前vue实例所有可用的方法
                show(){
                    alert('yes')
                }
            }