前端入门学习笔记（三十六）vue.js入门（四）v-on，v-bind，v-model，

1.v-on

on就是可以理解为监听的意思，可缩写为@
比如说我们可以监听click事件，当点击事件发生的时候，出发对应的方法

    <div id="app">
      <button v-on:click="handelBtn">show alter</button>
    </div>
    <script>
      let vm = new Vue({
        el: '#app',
        methods: {
          handelBtn: function() {
            alert('hello world')
          }
        }
      })
    </script>

methods是vue的参数，主要用于存放方法，
当点击按钮后，就会弹出alter，所触发的方法必须写在methods内，

因为v-on可以缩写为@
所以上述button代码可以改为如下所示

<button @click="handelBtn">show alter</button>

---

2.v-bind

官方的说法是单向绑定一个DOM元素，但按照我的理解，不如说是v-bind会将内容转换为js表达式更加容易理解
比如说 input = “text”，意思是input的值是“text”，
若改为v-bind:input = “text” ，意思是input的值是 text这一个变量，此时的text是一个js表达式，而不是一个字符串。
v-bind: 可以缩写为 :
以下为示例

    <div id="app">
      <div :style="styleObj" @click="handleClick">
        hello world
      </div>
    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          styleObj: {
            color: 'red'
          }
        },
        methods: {
          handleClick: function() {
            this.styleObj.color =
              this.styleObj.color === 'black' ? 'red' : 'black'
          }
        }
      })
      </script>

此示例为当该div标签检测到click事件的时候，会触发handleClick事件。
handleClick会对styleObj这个对象中的color进行判断，若为black则改为red，否则赋值为black。
style是单向绑定（js表达式），所以styleObj发生变化的时候，style的值也会跟着发生变化。
运行效果如下所示

点击hello world后，它会变为红色，若点击红色的hello world，他会变为黑色

---

3.v-model

v-model是双向绑定，下面的代码所实现的功能中，当你修改输入框的内容，data中inputValue也会随着修改。
当你对data中的inputValue赋值，如在浏览器的控制台中输入vm.$data.inputValue = ‘111’，这样的命令，input框所展现的内容会变成111

    <div id="app">
      <input type="text" v-model="inputValue" />
      <button v-on:click="handelBtn">show alter</button>
    </div>
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          inputValue: '',
          btnValue: ''
        },
        methods: {
          handelBtn: function() {
            alert(this.inputValue)
            alert(this.btnValue)
          }
        }
      })
      </script>

v-model 没有缩写