Vue学习笔记（二）

更新咯

---

今天更新的内容为 v-bind 、 v-on的用法

v-bind 指令

1.v-bind: 是Vue中，提供的用于绑定属性的指令
基本用法为：

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

2.v-bind在使用的时候，会把引号里面的东西当作JS代码去执行，也就是说，可以把所写的变量+表达式输出
即：

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

3.注意：v-bind: 指令可以被简写为 :要绑定的属性
4.v-blind 中，可以写合法的JS表达式

v-on 指令

1.Vue 中提供了 v-on： 事件绑定机制
基本用法为：

<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('Hello')"> 

这串代码会在页面上显示出一个按钮，点击按钮就会弹出写有文本“Hello”的弹窗

2.v-on的简写
v-on与v-bind一样，也有简写形式，v-on的简写为 @
即:

<input type="button" value="按钮" @click="show">

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytitle: '这是一个自己定义的tittle'
        },
        methods:{  //这个 methods属性中定义了当前Vue实例所有可用的方法
            show:function(){
                alert('Hello')
            }
        }
    })
</script>

这串代码与1中的代码效果一致