Vue.js学习笔记——事件监听

 * v-on：事件监听，为页面元素绑定各种监听事件。

        keydown:按键按下

        keyup:按键抬起

        click:鼠标单击

        dbclick:鼠标双击

        load:控件装载

        etd:页面装载

        ……

* @ 是v-on:的缩写，比如v-on:[email protected]

在 data 中定义一个 myMovie 变量，给它一个默认值‘阿凡达’，用于在页面中显示。

给页面中的按钮添加一个点击事件 v-on:click 并绑定在 methods 中设置的 btnClick 方法。

点击按钮修改对应的 myMovie 值，达到实时变化的效果。代码如下：

<div id="myApp">
    <h1>您最喜欢的电影是：{{ myMovie }}</h1>
    <button v-on:click="btnClick('老炮')">老炮</button>
    <button v-on:click="btnClick('阿凡达')">阿凡达</button>
    <button v-on:click="btnClick('变形金刚')">变形金刚</button>
    <button v-on:click="btnClick('速度与激情')">速度与激情</button>
    <button @click="btnClick('其他')">其他</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            myMovie: '阿凡达'
        },
        methods: {
            btnClick: function (movie) {
                this.myMovie = movie;
            }
        }
    })
</script>

未经允许不得转载：w3h5 » Vue.js学习笔记——事件监听