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

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

        keydown:按键按下

        keyup:按键抬起

        click:鼠标单击

        dbclick:鼠标双击

        load:控件装载

        etd:页面装载

        ......

* @ 是v-on:的缩写，比如v-on:click可以写成@click

在 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>

未经允许不得转载：Web前端开发资源网 » Vue.js学习笔记——事件监听

推荐阅读：

使用flexible后 不同设备的data-dpr还始终为1解决方法

Vue.js学习笔记——项目目录结构

给Sublime增加代码格式化快捷键

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

写一写今天用阿里云安装wdCP搭建网站踩的坑