Vue学习之旅Part2：Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)

一、v-bind

先来一个常见场景：
在vue里定义了个名为mytitle的属性

<script>
    var vm=new Vue({
    
        el:"#app",
        data:{
    
            mytitle:"This is a title!"
        },
    })
</script>

此时 如果

<input type="button" value="按钮" title="mytitle">

是不行的
此时 只会将mytitle当作普通字符串 并不会去vue实例中寻找对应的属性

此时 可用v-bind加在属性前面 绑定一个属性 标明该属性是一个变量
这样 在解析的时候 会自动去vue实例的data里寻找对应的变量

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

这样就可以了

使用v-bind的时候 还可在属性名前后加上js表达式 将解析后的结果输出

例如：

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

v-bind还可简写为冒号[:]

: 就等同于 v-bind:
直接在冒号后跟着要绑定的属性即可

<input type