在Vue中v-on指令的基本用法

  在我们学习vue中，我们会学习到v-on，要知道这个指令基本运用与为元素的绑定。但是其有两种写法，为基本和简写。那么举个例子来看。

<div class="app">
<input type="button" value="双击事件" v-on:dblclick="doIt">
<input type="button" value="双击事件简写" @dblclick="doIt">
</div>
<script>
var app = new Vue({
            el: ".app",
            methods: {
              
                doIt: function () {
                  
                    alert("P-Mile&apo");
                },
            }


        })
</script>

  运用以上代码可达成，按钮+双击+doIt内的内容+弹窗。因此我们得知，绑定的方法定义在methods属性中，v-on简写只需要将v-on替换成为@即可完成。

  如果这时我们想要访问data内的数据，那么方法内部通过this关键字可以访问定义在data中数据。

由此我们不仅产生疑问，如果我们将其数据进行改变。那么，元素会一并更新吗？答案是，是的。

    <div class="app">
        <h2 @click="changePeople">{{people}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                people: "apo"
            },
            methods: {
                changePeople: function () {
                    this.people += "泰兰德的夏天"
                }
            }


        })
    </script>

  这样可以进一步掩盖，vue不适合更改页面中元素的显示，这点的不足。