06.v-on指令基础 

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doit">
        <input type="button" value="v-on简写" @click='doit'>
        <input type="button" value="双击事件" @dblclick="doit">
        <h2 @click='changeFood'> {{food}} </h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        // v-on 指令的作用是：为元素绑定事件  简写为 @ 格式如下
        // v-on:click="事件名称"  或者  @click="事件名称"
        // 绑定的方法写在 methods属性中
        // 语法糖：就是简写
        var app = new Vue({
            el: '#app',
            data: {
                food: '羊肉串'
            },
            methods: {
                doit: function() {
                    alert('做IT 月薪过万 ');
                },
                changeFood: function() {
                    this.food += '好吃';
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:33  闭上耳朵  阅读(71)  评论(0)    收藏  举报